前端基础（三）：函数

语法：

function name([param[, param2 [...]]]){	[statements]}

name:函数名称

param:需要传递给函数的参数的名称。有最大参数数量限制，不同引擎限制不同。

statements:包含函数体的语句

函数的最基本用法，注意会有声明提升机制。

2.函数表达式

语法：

var name = function(param [,param [...]]){        [statements]}或let name = function(param [,param [...]]){        [statements]}

用法同函数声明，使用let时，是块级作用域。

如下代码,我们就能看出函数声明与函数表达式的差异：

testFun(); //testFunfunction testFun () {    console.log('testFun');}console.log(typeof testFun1); //undefinedvar testFun1 = function () {    console.log('testFun1');};

以第一个是函数申明提升，所以我们可以在声明之前使用函数。第二个是var变量声明提升，在声明之前它的值是undefined，所以无法直接使用。

3.Funcion构造函数

new Function([arg1 [ ,arg2 [,arg3 [...]]] ,] functionBody);

参数：

arg1, arg2, ... argN

​ 函数使用的参数列表

functionBody

​ 一个包含函数定义的语句字符串

JS中，所有的函数都是Function构造函数的实例。 内置对象实质也是一个函数，所以， 也是继承自Function的。而且，Function本身也是一个函数，因此，它自己也继承自己。

Function.prototype === Function.__proto__;	//true

使用这种方法创建函数有以下三点缺点：

1.使用Function创建的函数只有在运行到 new Function（）语句时，才会解析函数。上面两种方式创建的函数，是与JS代码一起解析的。所以，使用Function函数创建的函数效率更低。

2.函数都是在全局作用域中创建的，无法使用创建时的上下文作用域。

let msg = 'testFun3 global';function testFun3 () {    let msg = 'testFun3 inner';    let testFun4 = new Function('console.log(msg);');    testFun4();}testFun3(); //testFun3 global

3.代码书写在字符串中，不利于维护。

所以，尽量不要使用该方式定义函数。

4.function*

function* name([param[, param[, ... param]]]) { statements }

定义一个生成器函数。

基础用法：

function * generator (i) {    yield i;    yield i + 1;    let y = yield i + 2;    yield y;}let gen1 = generator(0);console.log(gen1.next()); //{value: 0, done: false}console.log(gen1.next()); //{value: 1, done: false}console.log(gen1.next()); //{value: 2, done: false}console.log(gen1.next(100)); //{value: 100, done: false}console.log(gen1.next()); //{value: undefined, done: true}

调用next函数时，传入的值是赋予上一个yield的返回值。

有浏览器兼容性问题，IE所有版本都不支持该用法。

函数调用

###直接调用

语法：

funName([arg1 [,arg2 , [arg3 [...]]]]);

最常用方式，不予赘述。

apply

func.apply(thisArg [ ,argsArray])

一般情况下，我们直接调用函数即可，在一些特殊的应用场景下，我们才会需要用到apply函数。例：

let Obj = {    name: 'obj',    print: function () {        console.log(this.name);    }};function success (callback) {    this.name = 'success obj';    callback(); 	//success obj    callback.apply(Obj); 	//obj}success(Obj.print);

如上，如果我们将函数作为参数传递时，为了保证this的指向，就可能需要使用apply方法。

call

fun.call(thisArg, arg1, arg2, ...)

new constructor[([args])]

参数：

constructor

​ 一个类或者函数。

args

​ 类或者函数的参数列表，new constructor 等同于 new constructor().

当使用new Foo(...)来调用一个函数时，其实发生了如下三件事。

①创建一个继承自Foo.prototype的新对象。

②调用Foo函数，并将新建的对象作为this绑定到当前函数的执行上下文中。

③如果函数有返回值，就返回该值；否则，直接返回第一步创建的对象。

举个栗子：

function Foo (name) {    this.name = name;}var foo1 = new Foo('Tom');var foo2 =  .create(Foo.prototype);Foo.call(foo2, 'Tom');console.log(foo1 instanceof Foo); //trueconsole.log(foo2 instanceof Foo); //true

对象方法调用

语法：

obj.foo([args])

或

var pFoo = obj.foo;pFoo([args]);

这种方式就是对象的属性值为函数的时候，我们调用函数的情况。

用法基本和直接调用一致，其实通过第一种方式调用，实质就是在全局对象上声明了一个函数变量，然后通过全局对象来调用这个函数，所以他们的表象和使用方法类似。

但是这里，我们需要注意一点，就是我们通过对象属性调用和声明一个变量来获取函数值而后调用有使用上的区别。

举个栗子：

var obj = {    foo: function (name) {        this.name = name;        console.log(this);    }};obj.foo('Tom'); //objvar pFoo = obj.foo;pFoo(); //window

如上栗子，直接调用，this指向的是 obj 对象，但如果通过变量赋值后，this指向的是当前函数调用语句的上下文环境，这里我是浏览器环境，并且在顶层作用域中执行，所以this指向的是window对象。

总结

函数定义有函数声明、函数表达式、Function构造函数、function*四种方式。前面两种最常用，但是要注意this的指向问题（由于函数声明的作用域问题，我建议尽量使用函数表达式）。Function构造函数官方推荐不要使用，funtion*生成器函数是ES2015出现的新特性，使用时需要注意兼容性。

函数调用有函数直接调用、apply、call、作为构造函数调用、对象方法调用。他们各有针对的使用场景，需要注意的是对象方法调用中的this指向问题。

原文发布时间为：2018年06月19日
原文作者：老司机带你撸代码

本文来源：开源中国 如需转载请联系原作者