第十章 函数 （下）

10.10 函数属性与方法

        前面提到过，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

        以上代码定义了3个函数，每个函数的命名参数个数都不一样。sayName()函数有1个命名参数，所以其length属性为1。类似地，sum()函数有两个命名参数，所以其length属性是2。而sayHi()没有命名参数，其length属性为0。

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

        函数还有两个方法：apply()和call()。这两个方法都会以指定的this值来调用函数，即会设置调用函数时函数体内this对象的值。apply()方法接收两个参数：函数内this的值和一个参数数组。第二个参数可以是Array的实例，但也可以是arguments对象。来看下面的例子：

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

        在这个例子中，callSum1()会调用sum()函数，将this作为函数体内的this值（这里等于window，因为是在全局作用域中调用的）传入，同时还传入了arguments对象。callSum2()也会调用sum()函数，但会传入参数的数组。这两个函数都会执行并返回正确的结果。

注意         在严格模式下，调用函数时如果没有指定上下文对象，则this值不会指向window。除非使用apply()或call()把函数指定给一个对象，否则this的值会变成undefined。

        call()方法与apply()的作用一样，只是传参的形式不同。第一个参数跟apply()一样，也是this值，而剩下的要传给被调用函数的参数则是逐个传递的。换句话说，通过call()向函数传参时，必须将参数一个一个地列出来，比如：

function sum(num1, num2) {
    return num1 + num2;
}

function callSum(num1, num2) {
    return sum.call(this, num1, num2);
}

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

        这里的callSum()函数必须逐个地把参数传给call()方法。结果跟
apply()的例子一样。到底是使用apply()还是call()，完全取决于怎么
给要调用的函数传参更方便。如果想直接传arguments对象或者一个数
组，那就用apply()；否则，就用call()。当然，如果不用给被调用的
函数传参，则使用哪个方法都一样。

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

window.color = 'red';

let o = {
    color: 'blue'
};

function sayColor() {
    console.log(this.color);
}

sayColor(); // red

sayColor.call(this);   // red
sayColor.call(window); // red
sayColor.call(o);      // blue

        这个例子是在之前那个关于this对象的例子基础上修改而成的。同样，sayColor()是一个全局函数，如果在全局作用域中调用它，那么会显示"red"。这是因为this.color会求值为window.color。如果在全局作用域中显式调用sayColor.call(this)或者sayColor.call(window)，则同样都会显示"red"。而在使用sayColor.call(o)把函数的执行上下文即this切换为对象o之后，结果就变成了显示"blue"了。

        使用call()或apply()的好处是可以将任意对象设置为任意函数的作用域，这样对象可以不用关心方法。在前面例子最初的版本中，为切换上下文需要先把sayColor()直接赋值为o的属性，然后再调用。而在这个修改后的版本中，就不需要这一步操作了。

        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()返回函数本身。

10.11 函数表达式

        函数表达式虽然更强大，但也更容易让人迷惑。我们知道，定义函数有两种方式：函数声明和函数表达式。函数声明是这样的：

function functionName(arg0, arg1, arg2) {
    // 函数体
}

        函数声明的关键特点是函数声明提升，即函数声明会在代码执行之前获得定义。这意味着函数声明可以出现在调用它的代码之后：

sayHi();
function sayHi() {
    console.log("Hi!");
}

        这个例子不会抛出错误，因为JavaScript引擎会先读取函数声明，然后再执行代码。

        第二种创建函数的方式就是函数表达式。函数表达式有几种不同的形式，最常见的是这样的：

let functionName = function(arg0, arg1, arg2) {
    // 函数体
};

        函数表达式看起来就像一个普通的变量定义和赋值，即创建一个函数再把它赋值给一个变量functionName。这样创建的函数叫作匿名函数（anonymous funtion），因为function关键字后面没有标识符。（匿名函数有也时候也被称为兰姆达函数）。未赋值给其他变量的匿名函数的name属性是空字符串。

        函数表达式跟JavaScript中的其他表达式一样，需要先赋值再使用。下面的例子会导致错误：

sayHi(); // Error! function doesn't exist yet
let sayHi = function() {
    console.log("Hi!");
};

        理解函数声明与函数表达式之间的区别，关键是理解提升。比如，以下代码的执行结果可能会出乎意料：

// 千万别这样做！
if (condition) {
    function sayHi() {
        console.log('Hi!');
    }
} else {
    function sayHi() {
        console.log('Yo!');
    }
}

        这段代码看起来很正常，就是如果condition为true，则使用第一个sayHi()定义；否则，就使用第二个。事实上，这种写法在ECAMScript中不是有效的语法。JavaScript引擎会尝试将其纠正为适当的声明。问题在于浏览器纠正这个问题的方式并不一致。多数浏览器会忽略condition直接返回第二个声明。Firefox会在condition为true时返回第一个声明。这种写法很危险，不要使用。不过，如果把上面的函数声明换成函数表达式就没问题了：

// 没问题
let sayHi;
if (condition) {
    sayHi = function() {
        console.log("Hi!");
    };
} else {
    sayHi = function() {
        console.log("Yo!");
    };
}

        这个例子可以如预期一样，根据condition的值为变量sayHi赋予相应的函数。

        创建函数并赋值给变量的能力也可以用于在一个函数中把另一个函数当作值返回：

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;
        }
    };
}

        这里的createComparisonFunction()函数返回一个匿名函数，这个匿名函数要么被赋值给一个变量，要么可以直接调用。但在createComparisonFunction()内部，那个函数是匿名的。任何时候，只要函数被当作值来使用，它就是一个函数表达式。本章后面会介绍，这并不是使用函数表达式的唯一方式。

10.12 递归

        递归函数通常的形式是一个函数通过名称调用自己，如下面的例子所示：

function factorial(num) {
    if (num <= 1) {
        return 1;
    } else {
        return num * factorial(num - 1);
    }
}

        这是经典的递归阶乘函数。虽然这样写是可以的，但如果把这个函数赋值给其他变量，就会出问题：

let anotherFactorial = factorial;
factorial = null;
console.log(anotherFactorial(4)); // 报错

        这里把factorial()函数保存在了另一个变量anotherFactorial中，然后将factorial设置为null，于是只保留了一个对原始函数的引用。而在调用anotherFactorial()时，要递归调用factorial()，但因为它已经不是函数了，所以会出错。在写递归函数时使用arguments.callee可以避免这个问题。

        arguments.callee就是一个指向正在执行的函数的指针，因此可以在函数内部递归调用，如下所示：

function factorial(num) {
    if (num <= 1) {
        return 1;
    } else {
        return num * arguments.callee(num - 1);
    }
}

        像这里加粗的这一行一样，把函数名称替换成arguments.callee，可以确保无论通过什么变量调用这个函数都不会出问题。因此在编写递归函数时，arguments.callee是引用当前函数的首选。

        不过，在严格模式下运行的代码是不能访问arguments.callee的，因为访问会出错。此时，可以使用命名函数表达式（named function expression）达到目的。比如：

const factorial = (function f(num) {
    if (num <= 1) {
        return 1;
    } else {
        return num * f(num - 1);
    }
});

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

10.13 尾调用优化

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

function outerFunction() {
    return innerFunction(); // 尾调用
}

在ES6优化之前，执行这个例子会在内存中发生如下操作。
(1) 执行到outerFunction函数体，第一个栈帧被推到栈上。
(2) 执行outerFunction函数体，到return语句。计算返回值必须先计算innerFunction。
(3) 执行到innerFunction函数体，第二个栈帧被推到栈上。
(4) 执行innerFunction函数体，计算其返回值。
(5) 将返回值传回outerFunction，然后outerFunction再返回值。
(6) 将栈帧弹出栈外。

在ES6优化之后，执行这个例子会在内存中发生如下操作。
(1) 执行到outerFunction函数体，第一个栈帧被推到栈上。
(2) 执行outerFunction函数体，到达return语句。为求值返回语句，必须先求值innerFunction。
(3) 引擎发现把第一个栈帧弹出栈外也没问题，因为innerFunction的返回值也是outerFunction的返回值。
(4) 弹出outerFunction的栈帧。
(5) 执行到innerFunction函数体，栈帧被推到栈上。
(6) 执行innerFunction函数体，计算其返回值。
(7) 将innerFunction的栈帧弹出栈外。

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

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

10.13.1 尾调用优化的条件

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

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

        下面展示了几个违反上述条件的函数，因此都不符合尾调用优化的要求：

"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，而它们都会引用外部函数的栈帧。显然，这意味着不能应用优化了。因此尾调用优化要求必须在严格模式下有效，以防止引用这些属性。

10.13.2 尾调用优化的代码

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

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(2^n) 。因此，即使这么一个简单的调用也可以给浏览器带来麻烦：

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)就不会对浏览器造成威胁了。

10.14 闭包

        匿名函数经常被人误认为是闭包（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;
        }
    };
}

        这里加粗的代码位于内部函数（匿名函数）中，其中引用了外部函数的变量propertyName。在这个内部函数被返回并在其他地方被使用后，它仍然引用着那个变量。这是因为内部函数的作用域链包含createComparisonFunction()函数的作用域。要理解为什么会这样，可以想想第一次调用这个函数时会发生什么。

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

        在函数执行时，要从作用域链中查找变量，以便读、写值。来看下面的代码：

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
let result = compare(5, 10);

        这里定义的compare()函数是在全局上下文中调用的。第一次调用compare()时，会为它创建一个包含arguments、value1和value2的活动对象，这个对象是其作用域链上的第一个对象。而全局上下文的变量对象则是compare()作用域链上的第二个对象，其中包含this、result和compare。下图展示了以上关系。

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

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

        在一个函数内部定义的函数会把其包含函数的活动对象添加到自己的作用域链中。因此，在createComparisonFunction()函数中，匿名函数的作用域链中实际上包含createComparisonFunction()的活动对象。下图展示了以下代码执行后的结果。

let compare = createComparisonFunction('name');
let result = compare({ name: 'Nicholas' }, { name: 'Matt' });

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

// 创建比较函数
let compareNames = createComparisonFunction('name');

// 调用函数
let result = compareNames({ name: 'Nicholas' }, { name: 'Matt' });

// 解除对函数的引用，这样就可以释放内存了
compareNames = null;

        这里，创建的比较函数被保存在变量compareNames中。把compareNames设置为等于null会解除对函数的引用，从而让垃圾回收程序可以将内存释放掉。作用域链也会被销毁，其他作用域（除全局作用域之外）也可以销毁。

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

10.14.1 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，之后又创建一个包含identity属性的对象。这个对象还包含一个getIdentityFunc()方法，返回一个匿名函数。这个匿名函数返回this.identity。因为getIdentityFunc()返回函数，所以object.getIdentityFunc()()会立即调用这个返回的函数，
从而得到一个字符串。可是，此时返回的字符串是"The Winodw"，即全局变量identity的值。为什么匿名函数没有使用其包含作用域（getIdentityFunc()）的this对象呢？

        前面介绍过，每个函数在被调用时都会自动创建两个特殊变量：this和arguments。内部函数永远不可能直接访问外部函数的这两个变量。但是，如果把this保存到闭包可以访问的另一个变量中，则是行得通的。比如：

未完待续。。。