JS中的函数

1、函数形参的默认值

JavaScript函数有一个特别的地方，无论在函数定义中声明了多少形参，都可以传入任意数量的参数，也可以在定义函数时添加针对参数数量的处理逻辑，当已定义的形参无对应的传入参数时，为其指定一个默认值。

1.1 在ES5中模拟默认参数

在ES5和早期版本中，当有可选参数时，如果不显示传递，则其值默认为undefined，因此我们经常使用逻辑或操作符来为缺失的参数提供默认值。

function test(url, timeout, callback) {timeout = (typeof timeout !== 'undefined') ? timeout : 2000;callback = (typeof callback !== 'undefined') ? callback : function () { };//other
}

或

function test(url, timeout, callback) {timeout = (timeout !== undefined) ? timeout : 2000;callback = (callback !== undefined) ? callback : function () { };//other
}

typeof a后的类型是字符串类型，需要加“”；timeout数值类型为undefined，不需要加引号“”。

1.2 ES6中的默认参数值

ES6中简化了为形参提供默认值的过程，如果没为参数传入值，则为其提供一个初始值。

function test(url, timeout=2000, callback=function(){}) {//other
}

此时当不为第二、三个参数传入值，或传入undefined时，会使用其默认值。

1.3 默认参数值对arguments对象的影响

ES中，如果一个参数使用了默认参数值，无论是否显示定义了严格模式

• arguments的长度总是必填参数的个数。
• 实参的值始终存在arguments对象中，当传入的参数被修改时，arguments对象中的参数也不会变更。

function test(url, timeout = 2000) {console.log("arguments.length:" + arguments.length);//1console.log(arguments[0] === url);//trueurl = "aaaaaaa";console.log(arguments[0] === url);//false
}

1.4 默认参数表达式

在下面的例子中，如果不传入最后一个参数，就会调用getValue()函数来得到正确的默认值。

注意1：初次解析函数声明时不会调用getValue()方法，只有当调用test()且不传入第二个参数时才会调用。

注意2：当使用函数调用结果作为默认参数时，如果忘记写小括号，例如second = getValue，则最终传入的时对函数的引用，而不是函数调用的结果。

function getValue() {return 5;
}
function test(first, second = this.getValue()) {console.log("first:" + first);//1console.log("second:" + second);//5 console.log("first + second:" + (first + second));//6
}
test(1);

正因为默认参数是在函数调用时求值，所以可以使用先定义的参数作为后定义参数的默认值。例如：

function test(first, second = first) {console.log("first:" + first);//1console.log("second:" + second);//1 
}
test(1);

但先定义的参数不能访问后定义的参数。例如：

function test(first = second, second) {console.log("first:" + first);console.log("second:" + second);
}
test(undefined, 1);//抛出错误

1.5 默认参数的临时死区

定义参数时，会为每个参数创建一个新的标识符绑定，该绑定在初始化之前不可被引用，如果试图访问会导致程序抛出错误。当调用函数时，会通过传入的值或参数的默认值初始化该参数。

上面的例子中，当first初始化时，second尚未初始化，所以会导致程序抛出错误，此时second尚处于临时死区中。

函数参数有自己的作用域和临时死区，其与参数体的作用域是各自独立的，也就是说参数的默认值不可访问函数体内声明的变量。

2、处理无命名参数

JS的函数语法规定，无论函数已定义的命名参数有多少，都不限制调用时传入的实际参数数量，调用时总是可以传入任意数量的参数。

• 当传入更少数量的参数时，默认参数值的特性可以有效简化函数声明的代码。
• 当传入更多数量的参数时，ES6使用不定参数

2.1 ES6中的不定参数

在函数的命名参数前添加三个点（...）就表明这是一个不定参数，该参数为一个数组，包含着自它之后传入的所有参数，通过这个数组名即可逐一访问里面的参数。

function sum(...theArgs) {let total = 0;for (const arg of theArgs) {total += arg;}return total;
}
console.log(sum(1,2,3,4));//10

2.2 不定参数对arguments对象的影响

无论是否使用不定参数，arguments对象总是包含所有传入函数的参数。

function checkArgs(...theArgs) {console.log(theArgs.length);//2console.log(arguments.length);//2console.log(theArgs[0],arguments[0]);//a a console.log(theArgs[1],arguments[1]);//b b
}
checkArgs('a','b');

2.3 展开运算符

Math.max()方法不允许传入数组，所以在ES5及其早期版本中，可能需要手动实现从数组中遍历取值，或者使用apply()方法。

在ES6中的展开运算符就可以简化上述示例，向Math.max()方法传入一个数组，再在数组前添加不定参数中使用的...符号，就无需再调用apply()方法了。

同时，可以将展开运算符与其他正常传入的参数混合使用。

let values = [25,50,75,100];
//console.log(Math.max.apply(Math,values));//100 ES5中使用apply方法
console.log(Math.max(...values));//100
console.log(Math.max(...values,200));//200

3、 name属性

由于在JavaScript中有多种定义函数的方式，因而辨别函数就是一项具有挑战性的任务。此外，匿名函数表达式的广泛使用更是加大了调试的难度，开发者们经常要追踪难以解读的栈记录。为了解决这些问题，ES6中所有函数新增了name属性。

3.1 如何选择合适的名称

在下面的代码中，doSomething()函数的name属性值为“doSomething”，对应着声明时的函数名称；匿名函数表达式doAnotherTing()的name属性值为“doAnothering”，对应着被赋值为该匿名函数的变量的名称。

function doSomeThing(){//空函数
}var doAnotherThing = function(){//空函数
}console.log(doSomeThing.name);//"doSomeThing"
console.log(doAnotherThing.name);//"doAnotherThing"

4、明确函数的多重用途

JavaScript函数有两个不同的内部方法：[[Call]]和[[Construct]]。

• 当通过new关键字调用函数时，执行的时[[Construct]]函数，它负责创建一个通常被称作实例的新对象，然后再执行函数体，将this绑定到实例上；
• 如果不通过new关键字调用函数，则执行[[Call]]函数，从而直接执行代码中的函数体。

注意：

• 具有[[Construct]]方法的函数被统称为构造函数。
• 不是所有的函数都有[[Construct]]方法，因此不是所有函数都可以通过new来调用。例如：箭头函数就没有[[Construct]]方法。

function Person(name){this.name = name;
}
var person1 =new Person("yff");
var person2 = Person("yxy");console.log(person1);//"[object object]"
console.log(person2);//"undefined"

5、块级函数

在ES5中，下面的代码会抛出语法错误；在ES6中，会将doSomething()函数视作一个块级声明，从而可以在定义该函数的代码块内访问和调用它。

"use strict";
if(true){console.log(typeof doSomething);//"function"function doSomething(){//空函数}
}
console.log(typeof doSomething);//"undefined"

结果分析：

• 在定义函数的代码块内，块级函数会被提升至顶部，所以typeof doSomething的值为“function”，这也佐证了，即使你在函数定义的位置前调用它，还是能返回正确的结果。
• 但是一旦if语句代码块结束执行，doSomething()函数将不再存在。

5.1 块级函数的使用场景

在代码段中，块级函数会被提升至块的顶部，而用let定义的函数表达式不会被提升。

"use strict";
if (true) {console.log(typeof doSomething);//抛出错误let doSomething = function () {//空函数}
}

在上述代码中，当执行到typeof doSomething时，由于此时尚未执行let声明语句，doSomething()还在当前块作用域的临时死区中，因此程序被迫中断执行。

5.2 非严格模式下的块级函数

在ES6中，即使处于非严格模式下，也可以声明块级函数，但其行为与严格模式下稍有不同。这些函数不再提升至代码块的顶部，而是提升至外围函数或全局作用域的顶部。

"use strict";
if (true) {console.log(typeof doSomething);//"function"function doSomething() {//空函数}
}console.log(typeof doSomething);//"function"

在这个示例中，doSomething()函数被提升至全局作用域，所以在if代码块外也可以访问到。

6、箭头函数

箭头函数是一种使用箭头（=>）定义函数的新语法，但是它与传统的JavaScript函数有些许不同，主要集中在以下方面：

• 没有this、super、arguments和new.target绑定：箭头函数中的this、super、arguments以及new.target这些值由外围最近一层非箭头函数决定。
• 不能通过new关键字调用：箭头函数没有[[Construct]]方法，所以不能被用作构造函数，如果通过new关键字调用箭头函数，程序会抛出错误。
• 没有原型：由于不可以通过new关键字调用箭头函数，因而没有构建原型的需求，所以箭头函数不存在prototype这个属性。
• 不可以改变this的绑定：函数内部的this值不可被改变，在函数的生命周期内始终保持一致。
• 不支持arguments对象：箭头函数没有arguments绑定，所以你必须通过命名参数和不定参数这两种形式访问函数的参数。
• 不支持重复的命名参数：无论在严格还是非严格模式下，箭头函数都不支持重复的命名参数。

原因分析：

• this绑定时JS程序中一个常见的错误来源，在函数内很容易就对this值失去了控制，其经常导致程序出现意想不到的行为，箭头函数消除了这方面的烦恼。
• 如果限制箭头函数的this值，简化代码执行的过程，则JS引擎可以更轻松地优化这些操作，而常规函数往往同时会作为构造函数使用或者以其他方式对其进行修改。

总结：

• 箭头函数的差异主要是减少错误以及理清模糊不清的地方。这样，JS引擎就可以更好地优化箭头函数的执行过程。

6.1 箭头函数：单一参数

当箭头函数只有一个参数时，可以直接写参数名，箭头紧随其后，箭头右侧的表达式被求值后便立即返回。即使没有显示的返回语句，这个箭头函数也可以返回传入的第一个参数，不需要更多的语法铺垫。

let reflect = value => value;
//相当于
let reflect = function (value) {return value;
}

6.2 箭头函数：多个参数

这里的sum()函数接受两个参数，将它们简单相加后返回最终的结果，与reflect()函数唯一的不同是，它的参数被包裹在小括号中，并且用逗号进行分割。

let reflect = (num1, num2) => num1 + num2;
//相当于
let reflect = function (num1, num2) {return num1 + num2;
}

6.3 箭头函数：没有参数

如果函数没有参数，也要在声明的时候写一组没有内容的小括号。

let reflect = () => "yff";
//相当于
let reflect = function () {return "yff";
}

6.4 箭头函数：花括号包裹函数体

如果你希望为函数编写由多个表达式组成的更传统的函数体，那么需要用花括号包裹函数体，并显式地定义一个返回值。

let reflect = (sum1, sum2) => {return sum1 + sum2;
};
//相当于
let reflect = function (sum1, sum2) {return sum1 + sum2;
}

7 立即执行函数

JS函数的一个流行的使用方式是创建立即执行函数表达式（IIFE），你可以定义一个匿名函数并立即调用，自始至终不保存对该函数的引用。

let person = function (name) {return {getName: function () {return name;}};
}("yff");
console.log(person.getName());//yff

7.1 箭头函数实现立即执行函数

只要将箭头函数包裹在小括号里，就可以用它实现相同的功能。

let person = ((name) => {return {getName: function () {return name;}}
})("yff");
console.log(person.getName());//yff

小括号只包裹箭头函数定义，没有包含（"yff"）。正常函数定义的立即执行函数表达式既可以用小括号包裹函数体，也可以额外包裹函数调用部分。

7.2 箭头函数没有this绑定

箭头函数中没有this绑定，必须通过查找作用域来决定其值。如果箭头函数被非箭头函数包含，则this绑定的是最近一层非箭头函数的this，否则，this的值会被设置为全局对象。

下面示例中的事件处理程序是一个调用了this.doSomething()的箭头函数，此处的this与init()函数里的this一致。

let PageHandler = {id: "123",init: function () {document.addEventListener("click", event => this.doSomething(event.type), false);},doSomething: function (type) {console.log("handling " + type + " for " + this.id);}
}
PageHandler.init();

7.3 箭头函数没有prototype属性

箭头函数缺少正常函数所拥有的prototype属性，它的设计初衷是“即用即弃”，所以不能用它来定义新的类型。如果尝试通过new关键字调用一个箭头函数，会导致程序抛出错误。

var myType = () => { };
var object = new myType();//错误，不可以通过new关键字调用箭头函数

7.4 箭头函数没有arguments绑定

箭头函数没有自己的arguments对象，且未来无论函数在哪个上下文中执行，箭头函数始终可以访问外围函数的arguments对象。

function test() {return () => arguments[0];
}var testObj = test(54);
console.log(testObj());

在test()函数中，箭头函数引用了外围函数传入的第一个参数arguments[0]，即使箭头函数此时已不再处于创建它的函数的作用域中，却依然可以访问当时的arguments对象，这是arguments标识符的作用域链解决方案所规定的。

7.4 总结

• 箭头函数没有[[Construct]]方法，不能执行new myType()。
• 箭头函数中的this值取决于该函数外部非箭头函数的this值。
• 不能通过call()、apply()、bind()等方法改变this的值。
• 箭头函数没有arguments绑定。

8 尾调用优化

ES6关于函数最有趣的变化可能是尾调用系统的引擎优化。

尾调用指的是函数作为另一个函数的最后一条语句被调用，例如：

function doSomething(){return test();
}

在ES5的引擎中，尾调用的实现与其他函数的实现类似：

• 创建一个新的栈帧（stack frame），将其推入调用栈来表示函数调用。
• 每一个未用完的栈帧都会保存在内存中，当调用栈变得过大时，会造成程序问题。

8.1 ES6中的尾调用优化

 ES6缩减了严格模式下尾调用栈的大小（非严格模式下不受影响），如果满足以下条件，尾调用不再创建新的栈帧，而是清除并重用当前栈帧。

• 尾调用不访问当前栈帧的变量（即该函数不是一个闭包）。
• 在函数内部，尾调用是最后一条语句。
• 尾调用的结果作为函数值返回。

（1）可以被JS引擎自动优化

"use strict";
function doSomething(){return test();
}

（2）不可以被JS引擎自动优化的案例

案例1：无返回值

"use strict";
function doSomething(){test();//无法优化：无返回
}

案例2：返回值后有其他操作

"use strict";
function doSomething() {return 1 + test();//无法优化：返回值后有其他操作
}

案例3：调用不在尾部

"use strict";
function doSomething() {var res = test();return res;//无法优化：调用不在尾部
}

案例4：闭包

"use strict";
function doSomething() {var num = 1;var func = () => num;return func();//无法优化：函数是闭包（函数调用了作用域中的局部变量）
}

8.2 如何利用尾调用优化

实际上，尾调用优化发生在引擎背后，除非你尝试优化一个函数，否则无需思考此类问题。

递归函数是其最主要的应用场景，此时尾调用优化的效果最显著。

阶乘函数：

function factorial(n) {if (n <= 1) {return 1;} else {return n * factorial(n - 1);//无法优化：返回后有执行乘法操作。}
}

• 分析：由于在递归调用前执行了乘法操作，因而当前版本的阶乘函数无法被引擎优化。
• 结果：如果n是一个非常大的数，而调用栈的尺寸就会不断增长并存在最终导致栈溢出的潜在风险。

优化：

function factorial(n, p = 1) {if (n <= 1) {return 1;} else {let res = n * p;return factorial(n - 1, res);//可以优化}
}

 当你写递归函数时，记得使用尾递归优化的特性，如果递归函数的计算量足够大，则尾递归优化可以大幅提升程序的性能。