函数

函数都是Function类型的实例，Function也有属性和方法，跟其他类型一样，所以函数名就是指向函数对象的指针，并且不一定与函数本身紧密绑定。

函数有以下几种方式创建：

函数声明式

function sum (num1, num2) {

return num1 + num2;

}

函数表达式

let sum = function(num1, num2) {

return num1 + num2;

};

箭头函数

let sum = (num1, num2) => {

return num1 + num2;

};

Function构造函数

let sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐

箭头函数

箭头函数使用起来十分方便，任何使用函数表达式的地方都可以使用箭头函数：

let arrowSum = (a, b) => {

return a + b;

};

// 单个参数可以不用括号

let arrowSum = a => {

return a;

};

// 如果只有一行则可以省略return 会自动返回

let arrowSum = a => { a + 1};

箭头函数虽然语法简洁，但也有很多场合不适用。箭头函数不能使用 arguments、super 和new.target，也不能用作构造函数。此外，箭头函数也没有 prototype 属性。

函数名

因为函数名就是指向函数的指针，所以它们跟其他包含对象指针的变量具有相同的行为。这意味着一个函数可以有多个名称，如下所示：

function sum(num1, num2) {

return num1 + num2;

}

console.log(sum(10, 10)); // 20

let anotherSum = sum;

console.log(anotherSum(10, 10)); // 20

sum = null;

console.log(anotherSum(10, 10)); // 20

ECMAScript 6 的所有函数对象都会暴露一个只读的 name 属性，其中包含关于函数的信息。多数情况下，这个属性中保存的就是一个函数标识符，或者说是一个字符串化的变量名。即使函数没有名称，也会如实显示成空字符串。如果它是使用 Function 构造函数创建的，则会标识成"anonymous"：

function foo() {}

let bar = function() {};

let baz = () => {};

console.log(foo.name); // foo

console.log(bar.name); // bar

console.log(baz.name); // baz

console.log((() => {}).name); //（空字符串）

console.log((new Function()).name); // anonymous

理解参数

ECMAScript 函数既不关心传入的参数个数，也不关心这些参数的数据类型。意味着定义函数时要接受两个参数，调用时一定要传两个，可以传多个，也可以不传都不会报错。这是因为ECMAScript 参数在函数内部表现为一个数组。函数调用时总会接受数组，但函数并不关心数组包含什么。

事实上调用function关键字定义函数时除了箭头函数可以在函数内访问arguments对象，从中取得每个传进来的参数。

arguments 对象是一个类数组对象（但不是 Array 的实例），因此可以使用中括号语法访问其中的元素（第一个参数是 arguments[0]，第二个参数是 arguments[1]）。而要确定传进来多少个参数，可以访问 arguments.length 属性。因为arguments本身并不能调用数组方法，它是一个另外一种对象类型，只不过属性从0开始排，依次为0，1，2...最后还有 callee 和length属性，我们也把这样的对象称为类数组。

修改arguments的值

在严格模式与非严格模式下，修改函数参数值表现的结果不一样。看下面的两个例子：

function foo(a) {

"use strict";

console.log(a, arguments[0]); // 1 1

a = 10;

console.log(a, arguments[0]); // 10 1

arguments[0] = 20;

console.log(a, arguments[0]); // 10 20

}

foo(1);

另一个非严格模式的例子：

function foo(a) {

console.log(a, arguments[0]);// 1 1

a = 10;

console.log(a, arguments[0]);// 10 10

arguments[0] = 20;

console.log(a, arguments[0]);// 20 20

}

foo(1);

从上面的两个例子中可以看出，在严格模式下，函数中的参数与 arguments 对象没有联系，修改一个值不会改变另一个值。而在非严格模式下，两个会互相影响。

将参数从一个函数传递到另一个函数

下面是将参数从一个函数传递到另一个函数的推荐做法。

function foo() {

bar.apply(this, arguments);

}

function bar(a, b, c) {

// logic

}

箭头函数中的参数

如果函数是使用箭头语法定义的，那么传给函数的参数将不能使用 arguments 关键字访问，而只能通过定义的命名参数访问。

function foo() {

console.log(arguments[0]);

}

foo(5); // 5

let bar = () => {

console.log(arguments[0]);

};

bar(5); // ReferenceError: arguments is not defined

虽然箭头函数中没有 arguments 对象，但可以在包装函数中把它提供给箭头函数：

function foo() {

let bar = () => {

console.log(arguments[0]); // 5

};

bar();

}

foo(5);

重载

ECMAScript 函数不能像传统编程那样重载。在其他语言比如 Java 中，一个函数可以有两个定义，只要签名（接收参数的类型和数量）不同就行。如前所述，ECMAScript 函数没有签名，因为参数是由包含零个或多个值的数组表示的。没有函数签名，自然也就没有重载。

如果有定义了多个同名函数，则后定义的会覆盖先定义的。没有重载但是可以模拟重载：

const fn = function(){

if(arguments.length == 1){

return arguments[0] + 10

}else if(arguments.length == 2){

return arguments[0] + arguments[1]

}

}

fn(10) // 20

fn(20 ,30) //50

默认参数值

ES5及以前，通过检测某个参数是否等于undefined，如果没有就给它赋值使用：

function makeKing(name) {

name = (typeof name !== 'undefined') ? name : 'Henry';

return `King ${name} VIII`;

}

console.log(makeKing()); // 'King Henry VIII'

console.log(makeKing('Louis')); // 'King Louis VIII'

ES6就不用这么麻烦了，因为支持定义默认参数：

function makeKing(name = 'Henry') {

return `King ${name} VIII`;

}

console.log(makeKing('Louis')); // 'King Louis VIII'

console.log(makeKing()); // 'King Henry VIII'

但是使用默认参数时，arguments对象的值不反映参数的默认值，只反映传给函数的参数:

function makeKing(name = 'Henry') {

console.log(arguments)

return `King ${name} VIII`;

}

makeKing('Louis');// [Arguments] { '0': 'Louis' }

makeKing();// [Arguments] {}

默认参数作用域与暂时性死区

因为在求值默认参数时可以定义对象，也可以动态调用函数，所以函数参数肯定是在某个作用域中求值的。

给多个参数定义默认值实际上跟使用 let 关键字顺序声明变量一样。来看下面的例子：

function makeKing(name = 'Henry', numerals = 'VIII') {

return `King ${name} ${numerals}`;

}

console.log(makeKing()); // King Henry VIII

参数初始化顺序遵循“暂时性死区”规则，即前面定义的参数不能引用后面定义的。像这样就会抛出错误：

// 调用时不传第一个参数会报错

function makeKing(name = numerals, numerals = 'VIII') {

return `King ${name} ${numerals}`;

}

参数也存在于自己的作用域中，它们不能引用函数体的作用域：

// 调用时不传第二个参数会报错

function makeKing(name = 'Henry', numerals = defaultNumeral) {

let defaultNumeral = 'VIII';

return `King ${name} ${numerals}`;

}

参数扩展与收集

ECMAScript 6 新增了扩展操作符，使用它可以非常简洁地操作和组合集合数据。扩展操作符最有用的场景就是函数定义中的参数列表，在这里它可以充分利用这门语言的弱类型及参数长度可变的特点。扩展操作符既可以用于调用函数时传参，也可以用于定义函数参数。

扩展参数

在给函数传参时，有时候可能不需要传一个数组，而是要分别传入数组的元素。

比如有个函数希望通过迭代 arguments 对象来实现累加。ES5及之前是这样实现的：

let values = [1, 2, 3, 4];

function getSum() {

let sum = 0;

for (let i = 0; i < arguments.length; ++i) {

sum += arguments[i];

}

return sum;

}

console.log(getSum.apply(null, values)); // 10

而在ES6中可以通过扩展操作符简洁的实现这种操作。

console.log(getSum(...values)); // 10

因为数组的长度已知，所以在使用扩展操作符传参的时候，并不妨碍在其前面或后面再传其他的值，包括使用扩展操作符传其他参数：

console.log(getSum(-1, ...values)); // 9

console.log(getSum(...values, 5)); // 15

console.log(getSum(-1, ...values, 5)); // 14

console.log(getSum(...values, ...[5,6,7])); // 28

收集参数

在构思函数定义时，可以使用扩展操作符把不同长度的独立参数组合为一个数组。这有点类似arguments 对象的构造机制，只不过收集参数的结果会得到一个 Array 实例。

function getSum(...values) {

// 顺序累加 values 中的所有值

// 初始值的总和为 0

console.log(values) // [1,2,3]

return values.reduce((x, y) => x + y, 0);

}

console.log(getSum(1,2,3)); // 6

收集参数的前面如果还有命名参数，则只会收集其余的参数；如果没有则会得到空数组。因为收集参数的结果可变，所以只能把它作为最后一个参数：

// 不可以

function getProduct(...values, lastValue) {}

// 可以

function ignoreFirst(firstValue, ...values) {

console.log(values);

}

ignoreFirst(); // []

ignoreFirst(1); // []

ignoreFirst(1,2); // [2]

ignoreFirst(1,2,3); // [2, 3]

箭头函数虽然不支持 arguments 对象，但支持收集参数的定义方式，因此也可以实现与使用arguments 一样的逻辑：

let getSum = (...values) => {

return values.reduce((x, y) => x + y, 0);

}

console.log(getSum(1,2,3)); // 6

另外，使用收集参数并不影响 arguments 对象，它仍然反映调用时传给函数的参数：

function getSum(...values) {

console.log(arguments.length); // 3

console.log(arguments); // [1, 2, 3]

console.log(values); // [1, 2, 3]

}

console.log(getSum(1,2,3));

函数声明与函数表达式

这两种语法的是等价的，但是在JS引擎在加载数据时对它们是区别对待的。JavaScript 引擎在任何代码执行之前，会先读取函数声明，并在执行上下文中生成函数定义。而函数表达式必须等到代码执行到它那一行，才会在执行上下文中生成函数定义。

// 没问题

console.log(sum(10, 10));

function sum(num1, num2) {

return num1 + num2;

}

以上代码可以正常运行，因为函数声明会在任何代码执行之前先被读取并添加到执行上下文。这个过程叫作函数声明提升（function declaration hoisting）。在执行代码时，JavaScript 引擎会先执行一遍扫描，把发现的函数声明提升到源代码树的顶部。因此即使函数定义出现在调用它们的代码之后，引擎也会把函数声明提升到顶部。如果把前面代码中的函数声明改为等价的函数表达式，那么执行的时候就会出错：

// 会出错

console.log(sum(10, 10));

let sum = function(num1, num2) {

return num1 + num2;

};

上面的代码之所以会出错，是因为这个函数定义包含在一个变量初始化语句中，而不是函数声明中。这意味着代码如果没有执行到加粗的那一行，那么执行上下文中就没有函数的定义，所以上面的代码会出错。这并不是因为使用 let 而导致的，使用 var 关键字也会碰到同样的问题：

console.log(sum(10, 10));

var sum = function(num1, num2) {

return num1 + num2;

};

除了函数什么时候真正有定义这个区别之外，这两种语法是等价的。

函数作为值

因为函数名在 ECMAScript 中就是变量，所以函数可以用在任何可以使用变量的地方。这意味着不仅可以把函数作为参数传给另一个函数，而且还可以在一个函数中返回另一个函数。来看下面的例子：

function callSomeFunction(someFunction, someArgument) {

return someFunction(someArgument);

}

这个函数接收两个参数。第一个参数应该是一个函数，第二个参数应该是要传给这个函数的值。任何函数都可以像下面这样作为参数传递：

function add10(num) {

return num + 10;

}

let result1 = callSomeFunction(add10, 10);

console.log(result1); // 20

function getGreeting(name) {

return "Hello, " + name;

}

let result2 = callSomeFunction(getGreeting, "Nicholas");

console.log(result2); // "Hello, Nicholas"

callSomeFunction()函数是通用的，第一个参数传入的是什么函数都可以，而且它始终返回调用作为第一个参数传入的函数的结果。要注意的是，如果是访问函数而不是调用函数，那就必须不带括号，所以传给 callSomeFunction()的必须是 add10 和 getGreeting，而不能是它们的执行结果。从一个函数中返回另一个函数也是可以的，而且非常有用。例如，假设有一个包含对象的数组，而我们想按照任意对象属性对数组进行序。为此，可以定义一个 sort()方法需要的比较函数，它接收两个参数，即要比较的值。但这个比较函数还需要想办法确定根据哪个属性来排序。这个问题可以通过定义一个根据属性名来创建比较函数的函数来解决。比如：

function createComparisonFunction(propertyName) {

return function(object1, object2) {

let value1 = object1[propertyName];

let value2 = object2[propertyName];

if (value1 < value2) {

return -1;

} else if (value1 > value2) {

return 1;

} else {

return 0;

}

};

}

这个函数的语法乍一看比较复杂，但实际上就是在一个函数中返回另一个函数，注意那个 return操作符。内部函数可以访问 propertyName 参数，并通过中括号语法取得要比较的对象的相应属性值。取得属性值以后，再按照 sort()方法的需要返回比较值就行了。这个函数可以像下面这样使用：

let data = [

{name: "Zachary", age: 28},

{name: "Nicholas", age: 29}

];

data.sort(createComparisonFunction("name"));

console.log(data[0].name); // Nicholas

data.sort(createComparisonFunction("age"));

console.log(data[0].name); // Zachary

在上面的代码中，数组 data 中包含两个结构相同的对象。每个对象都有一个 name 属性和一个 age属性。默认情况下，sort()方法要对这两个对象执行 toString()，然后再决定它们的顺序，但这样得不到有意义的结果。而通过调用 createComparisonFunction("name")来创建一个比较函数，就可以根据每个对象 name 属性的值来排序，结果 name 属性值为"Nicholas"、age 属性值为 29 的对象会排在前面。而调用 createComparisonFunction("age")则会创建一个根据每个对象 age 属性的值来排序的比较函数，结果 name 属性值为"Zachary"、age 属性值为 28 的对象会排在前面。

函数内部

ES5中函数内部存在两个特殊的对象：arguments和this。ES6中新增了new.target属性。

arguments

arguments 它是一个类数组对象，包含调用函数时传入的所有参数。这个对象只有以 function 关键字定义函数（相对于使用箭头语法创建函数）时才会有。虽然主要用于包含函数参数，但 arguments 对象其实还有一个 callee 属性，是一个指向 arguments 对象所在函数的指针。来看下面这个经典的阶乘函数：

function factorial(num) {

if (num <= 1) {

return 1;

} else {

return num * factorial(num - 1);

}

}

阶乘函数一般定义成递归调用的，就像上面这个例子一样。只要给函数一个名称，而且这个名称不会变，这样定义就没有问题。但是，这个函数要正确执行就必须保证函数名是 factorial，从而导致了紧密耦合。使用 arguments.callee 就可以让函数逻辑与函数名解耦：

function factorial(num) {

if (num <= 1) {

return 1;

} else {

return num * arguments.callee(num - 1);

}

}

这个重写之后的 factorial()函数已经用 arguments.callee 代替了之前硬编码的 factorial。这意味着无论函数叫什么名称，都可以引用正确的函数。考虑下面的情况：

let trueFactorial = factorial;

factorial = function () {

return 0;

};

console.log(trueFactorial(5)); // 120

console.log(factorial(5)); // 0

这里，trueFactorial 变量被赋值为 factorial，实际上把同一个函数的指针又保存到了另一个位置。然后，factorial 函数又被重写为一个返回 0 的函数。如果像 factorial()最初的版本那样不使用arguments.callee，那么像上面这样调用 trueFactorial()就会返回 0。不过，通过将函数与名称解耦，trueFactorial()就可以正确计算阶乘，而 factorial()则只能返回 0。

this

另一个特殊的对象是 this，它在标准函数和箭头函数中有不同的行为。在标准函数中，this 引用的是把函数当成方法调用的上下文对象，这时候通常称其为 this 值（在网页的全局上下文中调用函数时，this 指向 windows）。来看下面的例子：

window.color = 'red';

let o = {

color: 'blue'

};

function sayColor() {

console.log(this.color);

}

sayColor(); // 'red'

o.sayColor = sayColor;

o.sayColor(); // 'blue'

定义在全局上下文中的函数 sayColor()引用了 this 对象。这个 this 到底引用哪个对象必须到函数被调用时才能确定。因此这个值在代码执行的过程中可能会变。如果在全局上下文中调用sayColor()，这结果会输出"red"，因为 this 指向 window，而 this.color 相当于 window.color。而在把 sayColor()赋值给 o 之后再调用 o.sayColor()，this 会指向 o，即 this.color 相当于o.color，所以会显示"blue"。

在箭头函数中，this引用的是定义箭头函数的上下文。下面的例子演示了这一点。在对sayColor()的两次调用中，this 引用的都是 window 对象，因为这个箭头函数是在 window 上下文中定义的：

window.color = 'red';

let o = {

color: 'blue'

};

let sayColor = () => console.log(this.color);

sayColor(); // 'red'

o.sayColor = sayColor;

o.sayColor(); // 'red'

在事件回调或定时回调中调用某个函数时，this 值指向的并非想要的对象。此时将回调函数写成箭头函数就可以解决问题。这是因为箭头函数中的 this 会保留定义该函数时的上下文：

function King() {

this.royaltyName = 'Henry';

// this 引用 King 的实例

setTimeout(() => console.log(this.royaltyName), 1000);

}

function Queen() {

this.royaltyName = 'Elizabeth';

// this 引用 window 对象

setTimeout(function() { console.log(this.royaltyName); }, 1000);

}

new King(); // Henry

new Queen(); // undefined

注意函数名只是保存指针的变量。因此全局定义的 sayColor()函数和 o.sayColor()是同一个函数，只不过执行的上下文不同。

new.target

ECMAScript 中的函数始终可以作为构造函数实例化一个新对象，也可以作为普通函数被调用。ECMAScript 6 新增了检测函数是否使用 new 关键字调用的 new.target 属性。如果函数是正常调用的，则 new.target 的值是 undefined；如果是使用 new 关键字调用的，则 new.target 将引用被调用的构造函数。

function King() {

if (!new.target) {

throw 'King must be instantiated using "new"'

}

console.log('King instantiated using "new"');

}

new King(); // King instantiated using "new"

King(); // Error: King must be instantiated using "new"

函数属性与方法

ECMAScript 中的函数是对象，因此有属性和方法。每个函数都有两个属性：length和 prototype。其中，length 属性保存函数定义的命名参数的个数：

function sayName(name) {

console.log(name);

}

function sum(num1, num2) {

return num1 + num2;

}

function sayHi() {

console.log("hi");

}

console.log(sayName.length); // 1

console.log(sum.length); // 2

console.log(sayHi.length); // 0

prototype 属性也许是 ECMAScript 核心中最有趣的部分。prototype 是保存引用类型所有实例方法的地方，这意味着 toString()、valueOf()等方法实际上都保存在 prototype 上，进而由所有实例共享。这个属性在自定义类型时特别重要。在 ECMAScript 5中，prototype 属性是不可枚举的，因此使用 for-in 循环不会返回这个属性。

函数还有两个方法：apply和call。这两个方式都会以指定得this值来调用函数。区别是apply得第二个参数是一个数组，而call可以有多个参数。

function sum(num1, num2) {

return num1 + num2;

}

function callSum1(num1, num2) {

return sum.apply(this, arguments); // 传入 arguments 对象

}

function callSum2(num1, num2) {

return sum.apply(this, [num1, num2]); // 传入数组

}

console.log(callSum1(10, 10)); // 20

console.log(callSum2(10, 10)); // 20

function sum(num1, num2) {

return num1 + num2;

}

function callSum(num1, num2) {

return sum.call(this, num1, num2);

}

console.log(callSum(10, 10)); // 20

apply()和 call()真正强大的地方并不是给函数传参，而是控制函数调用上下文即函数体内 this值的能力。

ECMAScript 5 出于同样的目的定义了一个新方法：bind()。bind()方法会创建一个新的函数实例，其 this 值会被绑定到传给 bind()的对象。比如：

window.color = 'red';

var o = {

color: 'blue'

};

function sayColor() {

console.log(this.color);

}

let objectSayColor = sayColor.bind(o);

objectSayColor(); // blue

这里，在 sayColor()上调用 bind()并传入对象 o 创建了一个新函数 objectSayColor()。objectSayColor()中的 this 值被设置为 o，因此直接调用这个函数，即使是在全局作用域中调用，也会返回字符串"blue"。

对函数而言，继承的方法 toLocaleString()和 toString()始终返回函数的代码。返回代码的具体格式因浏览器而异。有的返回源代码，包含注释，而有的只返回代码的内部形式，会删除注释，甚至代码可能被解释器修改过。由于这些差异，因此不能在重要功能中依赖这些方法返回的值，而只应在调试中使用它们。继承的方法 valueOf()返回函数本身。

递归

上面有说过递归得例子，并且可以通过arguments.callee来优化：

function factorial(num) {

if (num <= 1) {

return 1;

} else {

return num * arguments.callee(num - 1);

}

}

使用递归时arguments.callee应该是首选，但是在严格模式下会范文出错。此时可以使用命名函数表达式达到目的：

const factorial = (function f(num) {

if (num <= 1) {

return 1;

} else {

return num * f(num - 1);

}

});

这里创建了一个命名函数表达式 f()，然后将它赋值给了变量 factorial。即使把函数赋值给另一个变量，函数表达式的名称 f 也不变，因此递归调用不会有问题。这个模式在严格模式和非严格模式下都可以使用。

尾调用优化

ECMAScript 6 规范新增了一项内存管理优化机制，让 JavaScript 引擎在满足条件时可以重用栈帧。具体来说，这项优化非常适合“尾调用”，即外部函数的返回值是一个内部函数的返回值。比如：

function outerFunction() {

return innerFunction(); // 尾调用

}

在 ES6 优化之前，执行这个例子会在内存中发生如下操作。

执行到 outerFunction 函数体，第一个栈帧被推到栈上。
执行 outerFunction 函数体，到 return 语句。计算返回值必须先计算 innerFunction。
执行到 innerFunction 函数体，第二个栈帧被推到栈上。
执行 innerFunction 函数体，计算其返回值。
将返回值传回 outerFunction，然后 outerFunction 再返回值。
将栈帧弹出栈外。

在 ES6 优化之后，执行这个例子会在内存中发生如下操作。

执行到 outerFunction 函数体，第一个栈帧被推到栈上。
执行 outerFunction 函数体，到达 return 语句。为求值返回语句，必须先求值 innerFunction。
引擎发现把第一个栈帧弹出栈外也没问题，因为 innerFunction 的返回值也是 outerFunction的返回值。
弹出 outerFunction 的栈帧。
执行到 innerFunction 函数体，栈帧被推到栈上。
执行 innerFunction 函数体，计算其返回值。
将 innerFunction 的栈帧弹出栈外。

很明显，第一种情况下每多调用一次嵌套函数，就会多增加一个栈帧。而第二种情况下无论调用多少次嵌套函数，都只有一个栈帧。这就是 ES6 尾调用优化的关键：如果函数的逻辑允许基于尾调用将其

销毁，则引擎就会那么做。

注意现在还没有办法测试尾调用优化是否起作用。不过，因为这是 ES6 规范所规定的，兼容的浏览器实现都能保证在代码满足条件的情况下应用这个优化。

尾调用优化条件

优化条件就是确定外部栈帧真的没有存在的必要了，涉及得条件如下：

代码在严格模式下执行；
外部函数的返回值是对尾调用函数的调用；
尾调用函数返回后不需要执行额外的操作；
尾调用函数不是引用外部函数作用域中自由变量的闭包。

以下是不符合的条件的：

"use strict";

// 无优化：尾调用没有返回

function outerFunction() {

innerFunction();

}

// 无优化：尾调用没有直接返回

function outerFunction() {

let innerFunctionResult = innerFunction();

return innerFunctionResult;

}

// 无优化：尾调用返回后必须转型为字符串

function outerFunction() {

return innerFunction().toString();

}

// 无优化：尾调用是一个闭包

function outerFunction() {

let foo = 'bar';

function innerFunction() { return foo; }

return innerFunction();

}

以下是符合条件的：

"use strict";

// 有优化：栈帧销毁前执行参数计算

function outerFunction(a, b) {

return innerFunction(a + b);

}

// 有优化：初始返回值不涉及栈帧

function outerFunction(a, b) {

if (a < b) {

return a;

}

return innerFunction(a + b);

}

// 有优化：两个内部函数都在尾部

function outerFunction(condition) {

return condition ? innerFunctionA() : innerFunctionB();

}

差异化尾调用和递归尾调用是容易让人混淆的地方。无论是递归尾调用还是非递归尾调用，都可以应用优化。引擎并不区分尾调用中调用的是函数自身还是其他函数。不过，这个优化在递归场景下的效果是最明显的，因为递归代码最容易在栈内存中迅速产生大量栈帧。

为什么尾调用必须在严格模式下

之所以要求严格模式，主要因为在非严格模式下函数调用中允许使用 f.arguments和 f.caller，而它们都会引用外部函数的栈帧。显然，这意味着不能应用优化了。因此尾调用优化要求必须在严格模式下有效，以防止引用这些属性。

尾调用优化的代码

可以通过把简单的递归函数转换为待优化的代码来加深对尾调用优化的理解。下面是一个通过递归计算斐波纳契数列的函数：

function fib(n) {

if (n < 2) {

return n;

}

return fib(n - 1) + fib(n - 2);

}

console.log(fib(0)); // 0

console.log(fib(1)); // 1

console.log(fib(2)); // 1

console.log(fib(3)); // 2

console.log(fib(4)); // 3

console.log(fib(5)); // 5

console.log(fib(6)); // 8

显然这个函数不符合尾调用优化的条件，因为返回语句中有一个相加的操作。结果，fib(n)的栈帧数的内存复杂度是 O(2n)。因此，即使这么一个简单的调用也可以给浏览器带来麻烦：fib(1000);

当然，解决这个问题也有不同的策略，比如把递归改写成迭代循环形式。不过，也可以保持递归实现，但将其重构为满足优化条件的形式。为此可以使用两个嵌套的函数，外部函数作为基础框架，内部函数执行递归：

"use strict";

// 基础框架

function fib(n) {

return fibImpl(0, 1, n);

}

// 执行递归

function fibImpl(a, b, n) {

if (n === 0) {

return a;

}

return fibImpl(b, a + b, n - 1);

}

这样重构之后，就可以满足尾调用优化的所有条件，再调用 fib(1000)就不会对浏览器造成威胁了。

闭包

匿名函数经常被人误认为是闭包（closure）。闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。比如，下面是之前展示的 createComparisonFunction()函数：

function createComparisonFunction(propertyName) {

return function (object1, object2) {

let value1 = object1[propertyName];

let value2 = object2[propertyName];

if (value1 < value2) {

return -1;

} else if (value1 > value2) {

return 1;

} else {

return 0;

}

};

}

理解作用域链创建和使用的细节对理解闭包非常重要。在调用一个函数时，会为这个函数调用创建一个执行上下文，并创建一个作用域链。然后用 arguments和其他命名参数来初始化这个函数的活动对象。外部函数的活动对象是内部函数作用域链上的第二个对象。这个作用域链一直向外串起了所有包含函数的活动对象，直到全局执行上下文才终止。

当函数执行时，每个执行上下文都会包含一个其中变量的对象。全局上下文中的叫变量对象，它会在代码执行期间始终存在。而函数局部上下文中的叫活动对象，只在函数执行期间存在。在定义compare()函数时，就会为它创建作用域链，预装载全局变量对象，并保存在内部的[[Scope]]中。在调用这个函数时，会创建相应的执行上下文，然后通过复制函数的[[Scope]]来创建其作用域链。接着会创建函数的活动对象（用作变量对象）并将其推入作用域链的前端。在这个例子中，这意味着 compare()函数执行上下文的作用域链中有两个变量对象：局部变量对象和全局变量对象。作用域链其实是一个包含指针的列表，每个指针分别指向一个变量对象，但物理上并不会包含相应的对象。

函数内部的代码在访问变量时，就会使用给定的名称从作用域链中查找变量。函数执行完毕后，局部活动对象会被销毁，内存中就只剩下全局作用域。不过，闭包就不一样了。例如：

const Bibao = () => {

let A = 0;

return () => {

console.log(A)

return A++

}

}

const C = Bibao()

C() // 0

C() // 1

当Bibao返回匿名函数后，他的作用域链被初始化包含Bibao 的活动对象和全局变量对象。这样匿名函数就可以访问到Bibao 可以访问的所有变量。另一个副作用时Bibao 的活动对象并不能在它执行完毕后销毁，因为匿名函数的作用域链中仍对它有引用。在Bibao 执行完毕后，其执行上下文的作用域链会销毁，但它的活动对象仍然会被保留到内存中，直到匿名函数被销毁后才会被销毁。

C = null

注意因为闭包会保留它们包含函数的作用域，所以比其他函数更占用内存。过度使用闭包可能导致内存过度占用，因此建议仅在十分必要时使用。V8 等优化的 JavaScript 引擎会努力回收被闭包困住的内存，不过我们还是建议在使用闭包时要谨慎

this对象

在闭包中使用 this 会让代码变复杂。如果内部函数没有使用箭头函数定义，则 this 对象会在运行时绑定到执行函数的上下文。如果在全局函数中调用，则 this 在非严格模式下等于 window，在严格模式下等于 undefined。如果作为某个对象的方法调用，则 this 等于这个对象。匿名函数在这种情况下不会绑定到某个对象，这就意味着 this 会指向 window，除非在严格模式下 this 是 undefined。不过，由于闭包的写法所致，这个事实有时候没有那么容易看出来。

window.identity = 'The Window';

let object = {

identity: 'My Object',

getIdentityFunc() {

return function () {

return this.identity;

};

},

};

console.log(object.getIdentityFunc()()); // 'The Window'

这里先创建里全局变量identity，然后在创建了object对象其中包含identity属性，object中的getIdentityFunc返回匿名函数，匿名函数返回this.identity。所以调用object.getIdentityFunc()()会立即返回字符串。但是查看返回值发现返回的时全局变量中的identity，为什么不是匿名函数包含作用域中的identity 值呢？

这是因为每个函数在被调用时都会自动创建两个特殊变量，this和arguments。内部函数用于无法访问外部函数的这两个变量。如果想要在内部函数中访问外部函数的this应该这么做：

window.identity = 'The Window';

let object = {

identity: 'My Object',

getIdentityFunc() {

let that = this;

return function () {

return that.identity;

};

},

};

console.log(object.getIdentityFunc()()); // 'My Object'

通过变量，也就是闭包让他访问到外部外部函数的this。

注意 this 和 arguments 都是不能直接在内部函数中访问的。如果想访问包含作用域中的 arguments 对象，则同样需要将其引用先保存到闭包能访问的另一个变量中。

在一些特殊情况下，this也不是我们期待的值：

window.identity = 'The Window';

let object = {

identity: 'My Object',

getIdentity () {

return this.identity;

}

};

getIdentity()方法就是返回 this.identity 的值。以下是几种调用 object.getIdentity()的方式及返回值：

object.getIdentity(); // 'My Object'

(object.getIdentity)(); // 'My Object'

(object.getIdentity = object.getIdentity)(); // 'The Window'

第三行执行了一次赋值，然后再调用赋值后的结果。因为赋值表达式的值是函数本身，this 值不再与任何对象绑定，所以返回的是"The Window"。一般情况下，不大可能像第二行和第三行这样调用对象上的方法。

内存泄漏

由于 IE 在 IE9 之前对 JScript 对象和 COM 对象使用了不同的垃圾回收机制（第 4 章讨论过），所以闭包在这些旧版本 IE 中可能会导致问题。在这些版本的 IE 中，把 HTML 元素保存在某个闭包的作用域中，就相当于宣布该元素不能被销毁。来看下面的例子：

function assignHandler() {

let element = document.getElementById('someElement');

element.onclick = () => console.log(element.id);

}

以上代码创建了一个闭包，即 element 元素的事件处理程序（事件处理程序将在第 13 章讨论）。而这个处理程序又创建了一个循环引用。匿名函数引用着 assignHandler()的活动对象，阻止了对element 的引用计数归零。只要这个匿名函数存在，element 的引用计数就至少等于 1。也就是说，内存不会被回收。其实只要这个例子稍加修改，就可以避免这种情况，比如：

function assignHandler() {

let element = document.getElementById('someElement');

let id = element.id;

element.onclick = () => console.log(id);

element = null;

}

在这个修改后的版本中，闭包改为引用一个保存着 element.id 的变量 id，从而消除了循环引用。不过，光有这一步还不足以解决内存问题。因为闭包还是会引用包含函数的活动对象，而其中包含element。即使闭包没有直接引用 element，包含函数的活动对象上还是保存着对它的引用。因此，必须再把 element 设置为 null。这样就解除了对这个 COM 对象的引用，其引用计数也会减少，从而确保其内存可以在适当的时候被回收。

立即调用函数

立即调用的匿名函数又被称作立即调用的函数表达式（IIFE，Immediately Invoked Function Expression）。它类似于函数声明，但由于被包含在括号中，所以会被解释为函数表达式。紧跟在第一组括号后面的第二组括号会立即调用前面的函数表达式。

(function() {

// 块级作用域

})();

使用 IIFE 可以模拟块级作用域，即在一个函数表达式内部声明变量，然后立即调用这个函数。这样位于函数体作用域的变量就像是在块级作用域中一样。ECMAScript 5 尚未支持块级作用域，使用 IIFE模拟块级作用域是相当普遍的。

// IIFE

(function () {

for (var i = 0; i < count; i++) {

console.log(i);

}

})();

console.log(i); // 抛出错误

由此可以看出IIFE内部定义的变量外部在外部是无法访问的。在ES5及以前为了防止变量定义外泄可以是用IIFE。

IIFE也不会导致闭包问题，因为不存在对这个匿名函数的引用，因为运行完作用域就可以被销毁。

在ES6及之后IIFE就没有那么必要了，因为块级作用域中的变量无须IIFE就可以实现隔离：

let i;

for (i = 0; i < count; i++) {

console.log(i);

}

}

console.log(i); // 抛出错误

// 循环的块级作用域

for (let i = 0; i < count; i++) {

console.log(i);

}

console.log(i); // 抛出错误

说明 IIFE 用途的一个实际的例子，就是可以用它锁定参数值。比如：

let divs = document.querySelectorAll('div');

// 达不到目的！

for (var i = 0; i < divs.length; ++i) {

divs[i].addEventListener('click', function() {

console.log(i);

});

}

还有可以解决当时的for中使用var出现的问题：

for(var i = 0; i < 5; i ++){

setTimeout(() => {

console.log(i)

}, 0);

}

// 5 5 5 5 5

会一直返回5，这是因为setTimeout 的回调函数是在 for 循环结束后才执行的。由于 var 声明的变量 i 是一个函数作用域变量（而不是块作用域），当 setTimeout 的回调函数被执行时，for 循环已经完成，i 的值已经变为 5。因此，所有的 console.log(i) 都会输出 5。此时可以是用IIFE解决。

for(var i = 0; i < 5; i++){

(function(i) {

setTimeout(() => {

console.log(i);

}, 0);

})(i);

}

私有变量

严格讲JS是没有私有成员的概念，所有对象属性都是公有的。不过是有私有变量的概念。任何定义在函数或块中的变量，都可以认为是私有的。

function add(num1, num2) {

let sum = num1 + num2;

return sum;

}

其中add()中有三个私有变量：num1，num2和sum，这几个变量只能在函数内部使用，不能再函数外部访问。如果这个函数中创建了一个闭包，如果这个函数中创建了一个闭包，则这个闭包能通过其作用域链访问其外部的这 3 个变量。基于这一点，就可以创建出能够访问私有变量的公有方法。

特权方法：是能够访问函数私有变量的公有方法，在对象上有两种方式创建特权方法。第一种是在构造函数中：

function MyObject() {

// 私有变量和私有函数

let privateVariable = 10;

function privateFunction() {

return false;

}

// 特权方法

this.publicMethod= function () {

privateVariable++;

return privateFunction();

};

}

其中变量privateVariable 和函数privateFunction在外部是无法访问的，只有通过publicMethod()来访问。

function Person(name) {

this.getName = function () {

return name;

};

this.setName = function (value) {

name = value;

};

}

let person = new Person('Nicholas');

console.log(person.getName()); // 'Nicholas'

person.setName('Greg');

console.log(person.getName()); // 'Greg'

这段代码就是在构造函数中定义了两个特权方法。每个方法可以在外部调用并且修改或访问私有变量name，没有别的方法可以访问name。。私有变量name 对每个 Person 实例而言都是独一无二的，因为每次调用构造函数都会重新创建一套变量和方法。不过这样也有个问题：必须通过构造函数来实现这种隔离。构造函数模式的缺点是每个实例都会重新创建一遍新方法。使用静态私有变量实现特权方法可以避免这个问题。

静态私有变量

特权方法可以使用私用作用域定义私有变量和函数实现。

(function () {

// 私有变量和私有函数

let privateVariable = 10;

function privateFunction() {

return false;

}

// 构造函数

MyObject = function () {};

// 公有和特权方法

MyObject.prototype.publicMethod = function () {

privateVariable++;

return privateFunction();

};

})();

在这里实现了私有变量和私有函数，并且在全局中添加了MyObject构造函数，并且给构造函数的原型定义了公有方法来访问私有变量。

这个模式与前一个模式的主要区别就是，私有变量和私有函数是由实例共享的。因为特权方法定义在原型上，所以同样是由实例共享的。特权方法作为一个闭包，始终引用着包含它的作用域。

(function () {

let name = '';

Person = function (value) {

name = value;

};

Person.prototype.getName = function () {

return name;

};

Person.prototype.setName = function (value) {

name = value;

};

})();

let person1 = new Person('Nicholas');

console.log(person1.getName()); // 'Nicholas'

person1.setName('Matt');

console.log(person1.getName()); // 'Matt'

let person2 = new Person('Michael');

console.log(person1.getName()); // 'Michael'

console.log(person2.getName()); // 'Michael'

使用这个模式，name变成了静态变量，可供所有实例使用，这意味着任何实例中调用setName修改这个值，会影响其他实例。

像这样创建私有变量可以利用原型更好的重用代码，只是每个实例没有了自己的所有变量。

注意使用闭包和私有变量会导致作用域链变长，作用域链越长，则查找变量所需的时间也越多。

模块模式

模块模式是指在一个单例对象上实现了相同的隔离和封装。单例对象就是只有一个实例的对象。

let singleton = {

name: value,

method() {

// 方法的代码

}

};

模块模式是在单例对象基础上加以扩展，使其通过作用域链来关联私有变量和特权方法。

let singleton = (function () {

// 私有变量和私有函数

let privateVariable = 10;

function privateFunction() {

return false;

}

// 特权/公有方法和属性

return {

publicProperty: true,

publicMethod() {

privateVariable++;

return privateFunction();

},

};

})();

模块模式使用匿名函数返回一个对象。匿名函数内部首先定义了私有变量和私有函数，之后通过对象字面量返回可以公开访问的属性和方法。本质上，对象字面量定义了单例对象的公共接口。如果单例对象需要进行某种初化，并且需要访问私有变量时，那就可以采用这个模式：

let application = (function () {

// 私有变量和私有函数

let components = new Array();

// 初始化

components.push(new BaseComponent());

// 公共接口

return {

getComponentCount() {

return components.length;

},

registerComponent(component) {

if (typeof component == 'object') {

components.push(component);

}

},

};

})();

模块增强模式

另一个利用模块模式的做法是在返回对象之前先对其进行增强。这适合单例对象需要是某个特定类型的实例，但又必须给它添加额外属性或方法的场景。来看下面的例子：

let singleton = function() {

// 私有变量和私有函数

let privateVariable = 10;

function privateFunction() {

return false;

}

// 创建对象

let object = new CustomType();

// 添加特权/公有属性和方法

object.publicProperty = true;

object.publicMethod = function() {

privateVariable++;

return privateFunction();

};

// 返回对象

return object;

}();

如果前一节的 application 对象必须是 BaseComponent 的实例，那么就可以使用下面的代码来创建它：

let application = function() {

// 私有变量和私有函数

let components = new Array();

// 初始化

components.push(new BaseComponent());

// 创建局部变量保存实例

let app = new BaseComponent();

// 公共接口

app.getComponentCount = function() {

return components.length;

};

app.registerComponent = function(component) {

if (typeof component == "object") {

components.push(component);

}

};

// 返回实例

return app;

}();

在这个重写的 application 单例对象的例子中，首先定义了私有变量和私有函数，跟之前例子中一样。主要区别在于这里创建了一个名为 app 的变量，其中保存了 BaseComponent 组件的实例。这是最终要变成application 的那个对象的局部版本。在给这个局部变量 app 添加了能够访问私有变量的公共方法之后，匿名函数返回了这个对象。然后，这个对象被赋值给 application。

原文： JavaScript高级程序设计(第四版)