javascript闭包

在网上看了很多关于闭包的讲解,都晦涩难懂,最近看到了阮一峰老师的文章,对闭包有了比较清晰的认识,现在把它整理出来。
一、变量的作用域 理解闭包之前,先要知道javascript的变量作用域 .
两种作用域:全局变量,局部变量.
javascript的特殊在于函数内部可以直接访问全局变量。

var n =10; function f1(){ console.log(n); } f1(); //10

当然在函数外部无法访问函数内的局部变量
function f1(){ var n =10 } console.log(n); //n is not defined

还有一种情况是,在函数内部声明变量的时候,没有使用var命令,那么就实际上是声明了一个全局变量!这可能会造成全局变量污染,谨慎使用。
function f1(){ n =10; } f1(); console.log(n); // 10

二、从外部如何获取局部变量? 在写代码的过程中,由于各种原因我们可能需要去读取函数内部的局部变量,但是正常情况下是做不到的,只有想另外的办法。
那就是在函数内部,再定义一个函数
function f1(){ var n = 10; function f2(){ consolo.log(n); //10 } }

上面的代码中,函数f2在函数f1内部,这时f1的局部变量对 f2是可见的,但是f2的局部变量对f1是不可见的。这就是javascript语言特有的链式作用域结构,子对象可以一级一级的向上寻找父对象的变量。所以父对象的所有变量对子对象是可见的,反之却不可以。
既然f2已经可以读取f1的变量,那么只要把f2作为返回值,那么我们不就可以在f1外部读取f2的变量了吗!
function f1 (){ var n =10; return function f2(){ console.log(n) } } var result = f1(); result(); // 10

三、闭包的概念 上一节代码中的f2就是闭包 。
闭包就是能够读取其他函数内部变量的函数。在javascript 里面只要函数内部的子函数可以读取局部变量,因此可以把闭包简单的理解为‘定义在函数内部的函数’。
所以本质上,闭包就是函数内部和函数外包连接起来的一个桥梁。
四、闭包的用途 有两个大的好处,一个是读取函数内部的变量,另一个就是让这些变量的值一直保存在内存中。
function f1(){ var n =10; add = function (){ n+=1; } function f2(){ console.log(n); } return f2; } var result = f1(); result(); //10 add(); result(); // 11

在这段代码中,result其实就是局部函数f2。它一共运行了2次,一次是10,一次是11,这就证明了函数f1的局部变量一直保存在内存中,并没有在f2调用以后自动清除。
为什么会这样呢?原因在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2依赖于f1,因此f1也始终保存在内存中,不会在调用结束后,被垃圾回收站机制回收。 。
还有值得注意的地方是,add 函数没有使用var声明,因此add是一个全局变量。其次add 是一个匿名函数,而这个匿名函数本身就是一个闭包,可以在函数外部对函数内部的变量进行操作。
五、使用闭包的注意点
  • 由于闭包会使得函数中的变量保存在内存中,内存消耗大,所以不能滥用闭包,否则会造成网页性能问题,还有可能导致内存泄漏。解决方法就是在退出函数之前,将不使用的局部变量全部删除。
  • 闭包会在父函数外部改变父函数内部变量的值。所以如果把父函数当作对象使用时,把闭包当作它的公用方法,把内部变量当作私有属性时,这时一定要小心,不要随意改变父函数内部的变量值。
六、思考题 【javascript闭包】理解下面两段代码的运行结果,基本就算理解闭包的运行机制了。
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ return function(){ return this.name; }; } }; alert(object.getNameFunc()()); //The window

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

    推荐阅读