《JavaScript高级程序设计 第三版》学习笔记 （六） 函数与闭包详解

一、函数声明

1.函数的声明语法：function funcName(){}。js执行前会把函数声明载入，因此可以在调用之后声明函数，不必向c语言一样先声明，再调用，然后写实现。这个学名叫“函数声明提升”。

2.函数的表达式语法：var funcName=function(){}。这种方式其实是先创建一个匿名函数，然后把函数的地址传给变量。所以在调用funcName之前，必须先写好函数，不能像声明语法那样先用，后声明。

二、作用域链的创建过程

[javascript] view
plain copy

//小实验  

function compare(value1,value2){  

    if(value1<value2){  

        return -1;  

    }else if(value1>value2){  

        return 1;  

    }else{  

        return 0;  

    }  

}  

var result=compare(3,4);  

1.函数的执行

（1）当函数compare第一次执行时，解析器会为它创建一个执行环境，完成其作用域链。

（2）使用this、arguments和其他命名参数的值初始化函数的活动对象。

（3）在作用域链中，第一层外部函数的活动对象处于第二位，全局执行环境里的活动对象在最后。

（4）函数执行过程中，为读取和写入变量，需要在作用域链中查找变量。

2.作用域链的生成

（1）创建compare时，预先创建一个包含全局变量的作用域链，这时作用域链中只有一个活动对象，活动对象里包含了this（指window）、compare、result。

（2）调用compare时，再创建一个活动对象，把该活动对象放在作用域链的顶端，之前包含全局变量的活动对象挪到第二。新的活动对象包含了value1和value2。

（3）compare执行完毕，（2）中创建的活动对象（包含value1和value2）会被销毁，compare的作用域链只剩下全局变量活动对象。

三、闭包

1.闭包的概念

（1）指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。

（2）下面例子中return的匿名函数A就是一个闭包，因为A使用了另一个函数compare的局部变量attrName。

[javascript] view
plain copy

//小实验  

//这是一个可以比较对象属性的函数，用于array.sort十分方便。  

function compare(attrName){  

    return function(object1,object2){//匿名函数A  

        if(object1[attrName]<object2[attrName]){  

            return -1;  

        }else if(object1[attrName]>object2[attrName]){  

            return 1;  

        }else{  

            return 0;  

        }  

    }  

}  

var func=compare("age");  

var result=func({age:14},{age:15});  

alert(result);//-1  

（3）虽然上面例子中的匿名函数A是返回到compare外面执行的，但是A的作用域链中包含了compare的局部变量。

2.闭包形成的原因

（1）正因为匿名函数A在compare内部，A的作用域链中才会包含compare创建的活动对象，从而可以使用compare的局部变量。如果还不清楚，请仔细阅读“作用域链的生成”，然后阅读下面的内容。

（2）匿名函数A从compare中返回后，它的作用域链内有两个活动对象：第一个是compare的活动对象（包含attrName）；第二个是全局活动对象（包含compare、func、result），这里this先不说。

（3）更关键的问题（闭包能够工作的核心条件）是，compare执行完，返回匿名函数A给func后，它自己创建的活动对象（包含attrName）并没有销毁。因为func的作用域链中还在引用这个活动对象。这是js内存回收机制决定的，确切地说，compare执行完毕后，它的执行环境、作用域链会被销毁。但是作用域链其实只是一个队列，其中存放着指向活动对象的指针。活动对象被销毁的前提是所有指向该对象的指针都已经销毁了。因此，当func的作用域链包含指向compare活动对象的指针时，compare的活动对象仍要在内存中保留。

（4）当func执行完毕，func创建的活动对象（包含age14和age15）销毁，然后compare的活动变量才会销毁。

3.闭包的优缺点

（1）使用起来非常灵活。

（2）不容易理解，尤其是层次比较多的时候。

（3）闭包比普通函数占用内存多。因此不在万不得已的时候，不要使用闭包。即便使用闭包，层次也不要太多。

四、闭包与父级变量

1.最后的值

（1）闭包的作用域链中，保存着各个层次的活动对象，通过这些对象去使用外部函数的变量。这是闭包实现的基本原理。

（2）根据基本原则，外部函数执行完后，外部函数的活动对象中保存着局部变量最后的值。

[javascript] view
plain copy

//小实验  

function box(){  

    var arr=[];  

    for(var n=0;n<10;n++){  

        arr.push(function(){  

            alert(n);     

        });   

    }  

    return arr;  

}  

var funcs=box();  

funcs[0]();//10  

funcs[9]();//10  

（3）上面例子中，alert的永远是10。虽然box执行完毕后返回了一个闭包数组，而且每个闭包都能使用n，但n的值并不是想象中的0到9，而是10。原因在前面已经解释过了。为了让每个闭包alert出自己在数组中的索引，我们可以创建另一个匿名函数，并强制执行。

[javascript] view
plain copy

//小实验  

function box(){  

    var arr=[];  

    for(var n=0;n<10;n++){  

        arr
=function(num){  

            return function(){  

                alert(num);   

            }  

        }(n);  

    }  

    return arr;  

}  

var funcs=box();  

funcs[0]();//0  

funcs[9]();//9  

（4）函数的强制执行（补充知识）：下面例子都是函数强制执行（以下是在v8引擎下实验的结果）。
　　<1>如果不用变量保存强制执行的返回值，函数体必须用括号括起来（正常1）。否则如果函数是声明函数，不会强制执行（异常1）；如果是匿名函数，会出现语法错误（异常2）。
　　<2>如果使用变量保存强制执行的返回值，函数是不是匿名的，函数体括与不括，都没有问题（正常2-5）。
　　<3>有很多人把“正常1”理解为闭包，其实是不正确的。这只是匿名函数强制执行而已，与闭包没有多大关系，只不过在闭包设计中，为了避免上面的问题，经常使用这种强制执行而已。

[javascript] view
plain copy

//小实验  

//正常1  

(function(i,j){  

    alert(i+j);//3  

})(1,2);  

//异常1  

function abc(i,j){  

    alert(i+j);//没有alert，也就是没有执行。  

}(1,2);  

//异常2  

function(i,j){  

    alert(i+j);   

}(1,2);//Unexpected token (  

  

  

//正常2  

var b=(function(i,j){  

    alert(i-j);//-1  

    return i-j;   

})(1,2);  

alert(b);//-1  

//正常3  

var a=function(i,j){  

    alert(i+j);//3    

}(1,2);  

alert(a);//undefined  

  

  

//正常4  

var c=(function func(i,j){  

    alert(i-j);//-1  

    return i-j;   

})(1,2);  

alert(c);//-1  

正常5  

var d=function func(i,j){  

    alert(i-j);//-1  

    return i-j;   

}(1,2);  

alert(d);//-1  

五、闭包与this指针

1.this指针是函数运行时基于函数的执行环境绑定的。换句话说，this跟作用域链没啥直接关系，看的是函数在哪儿。

2.闭包在哪儿执行谁也不好说，this指的到底是啥，也要看运行期。所以在闭包中使用this要格外小心。（这种题目在面试中很多，我在A公司2015校招web前端线试题中就遇到一个。）

[javascript] view
plain copy

//小实验  

var name="window";  

var obj={  

    name:"obj",  

    getName:function(){  

        return function(){  

            return this.name;     

        }  

    },  

    getName1:function(){  

        var _this=this;  

        return function(){  

            return _this.name;    

        }  

    }  

}  

alert(obj.getName()());//window  

alert(obj.getName1()());//obj