js学习

2017-08-22 | 阅读：次

随着系统的深入开发，js技术也在慢慢学习，然后开始学习了闭包。

变量的作用域

要理解闭包就要理解js的变量作用域。变量的作用域无非就是全局变量和局部变量。全局变量作用域整个代码的范围，局部变量只作用域定义的函数内。如：

var a=100;//全局变量
function A(){
    var b=101;//局部变量
    alert(a);//打印100
    alert(b);//打印1-1
}

    alert(a);//打印100
    alert(b);//error，因为没有这个值,undefined

从外部读取局部变量

然而在实际的项目中，我们往往需要得到函数内的局部变量，一般来说是办不到的，所以需要通过一定的方法来实现，就那是闭包，就是在函数内部再定义一个函数：

function A（）{
    var n=100;
    function B(){
        alert(n);
    }
    return B;
}
var result=A();
result();//打印100

闭包的概念

闭包就是能读取其他函数内部的变量的函数，在js中，只有函数内部的子涵是才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的用途

闭包可以用在很多地方，它最大用处有两个，一个是读取函数内的变量，一个是让这些变量的值始终保持在内存中，也就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。

function A(){
var n=345;
function B(){
alert(n);
}
nAdd=function(){n+=1;}

return B;
}
var result=A();
result();//打印345
nAdd();
result();//打印346

上段代码中result就是闭包B()函数，一共运行了2次，通过打印的值可以看出，函数A()的局部变量一直保存在内存中，并没有在被调用好被自动清除。原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

闭包的微观世界

如果要更加深入的了解闭包以及函数a和嵌套函数b的关系，我们需要引入另外几个概念：函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。 1.当定义函数a的时候，js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境”，如果a是一个全局函数，则scope chain中只有window对象。 2.当执行函数a的时候，a会进入相应的执行环境(excution context)。 3.在创建执行环境的过程中，首先会为a添加一个scope属性，即a的作用域，其值就为第1步中的scope chain。即a.scope=a的作用域链。 4.然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象，但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后，把活动对象添加到a的作用域链的最顶端。此时a的作用域链包含了两个对象：a的活动对象和window对象。 5.下一步是在活动对象上添加一个arguments属性，它保存着调用函数a时所传递的参数。 6.最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中，完成了函数b的的定义，因此如同第3步，函数b的作用域链被设置为b所被定义的环境，即a的作用域。

到此，整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c，又函数b的作用域链包含了对函数a的活动对象的引用，也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用，函数b又依赖函数a，因此函数a在返回后不会被GC回收。

当函数b执行的时候亦会像以上步骤一样。因此，执行时b的作用域链包含了3个对象：b的活动对象、a的活动对象和window对象
如图所示，当在函数b中访问一个变量的时候，搜索顺序是： 1.先搜索自身的活动对象，如果存在则返回，如果不存在将继续搜索函数a的活动对象，依次查找，直到找到为止。 2.如果函数b存在prototype原型对象，则在查找完自身的活动对象后先查找自身的原型对象，再继续查找。这就是Javascript中的变量查找机制。 3.如果整个作用域链上都无法找到，则返回undefined。

function f(x) {   var g = function () { return x; }  return g;}var h = f(1);alert(h()); 

这段代码中变量h指向了f中的那个匿名函数(由g返回)。 1.假设函数h的作用域是在执行alert(h())确定的，那么此时h的作用域链是：h的活动对象->alert的活动对象->window对象。 2.假设函数h的作用域是在定义时确定的，就是说h指向的那个匿名函数在定义的时候就已经确定了作用域。那么在执行的时候，h的作用域链为：h的活动对象->f的活动对象->window对象。

如果第一种假设成立，那输出值就是undefined；如果第二种假设成立，输出值则为1。

运行结果证明了第2个假设是正确的，说明函数的作用域确实是在定义这个函数的时候就已经确定了。

使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。 2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

　　var name = "The Window";   
　　var object = {   
　　　　name : "My Object",   
　　　　getNameFunc : function(){   
　　　　　　return function(){   
　　　　　　　　return this.name;   
　　　　　};   
　　　　}   
};   
alert(object.getNameFunc()());  //The Window

匿名函数

上面的代码中关于nAdd=function(){n+=1;}就是匿名函数。匿名函数：就是没有函数名的函数。通常来说，我们应用的一些架构源码就是使用的匿名函数写的。

cybil

cybil's blog