学习Javascript闭包（Closure）

 

参考：http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

闭包概念：

出于种种缘由，咱们有时候须要获得函数内的局部变量。可是，前面已经说过了，正常状况下，这是办不到的，只有经过变通方法才能实现。

那就是在函数的内部，再定义一个函数。

　　function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　alert(n); // 999
　　　　}

　　}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的全部局部变量，对f2都是可见的。可是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式做用域"结构（chain scope），子对象会一级一级地向上寻找全部父对象的变量。因此，父对象的全部变量，对子对象都是可见的，反之则不成立。

既然f2能够读取f1中的局部变量，那么只要把f2做为返回值，咱们不就能够在f1外部读取它的内部变量了吗！

    function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　alert(n); 
　　　　}

　　　　return f2;

　　}

　　var result=f1();

       result(); // 999

代码中的f2函数，就是闭包。

各类专业文献上的"闭包"（closure）定义很是抽象，很难看懂。个人理解是，闭包就是可以读取其余函数内部变量的函数。

因为在Javascript语言中，只有函数内部的子函数才能读取局部变量，所以能够把闭包简单理解成"定义在一个函数内部的函数"。

因此，在本质上，闭包就是将函数内部和函数外部链接起来的一座桥梁。

闭包的用途：

闭包能够用在许多地方。它的最大用处有两个，一个是前面提到的能够读取函数内部的变量，另外一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢？请看下面的代码。

function f1(){

　　　　var n=999;

　　　　nAdd=function(){n+=1}

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

　　nAdd();

　　result(); // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证实了，函数f1中的局部变量n一直保存在内存中，并无在f1调用后被自动清除。

为何会这样呢？缘由就在于f1是f2的父函数，而f2被赋给了一个全局变量，这致使f2始终在内存中，而f2的存在依赖于f1，所以f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另外一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，所以nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数自己也是一个闭包，因此nAdd至关因而一个setter，能够在函数外部对函数内部的局部变量进行操做。

注意：

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

 

var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()()); //My Object

说明: this的指向是由它所在函数调用的上下文决定的，而不是由它所在函数定义的上下文决定的。

 

闭包的二种写法：（下面这2种写法返回结果是同样的）

第一种：var x=(function(){ ... })();  是先声明匿名函数，再执行这个函数，最后将返回值赋值给变量

第二种：var x=(function(){ ... }()); 是先强制执行函数，而后将返回值赋值给变量x; 

//第二种写法等价于：var x=function(){ ... }();

测试：

var x = (function(){ 
alert("居然被你看见了");
return 1;
})();
console.log(x); //出现alert弹窗“居然被你看见了”，打印出值1

================================================

var x = (function(){
alert("居然又被你看见了");
return 1;
}())
console.log(x); //出现alert弹窗“居然被你看见了”，打印出值1

=================================================

误解1：

 var x = ( function( ){ ... });  等价于 var x = function(){ ... }; 不是闭包，只是给x定义一个函数。

//就行var x=5； 和 var x = (5);  带括号与不带是同样的。

测试：

var x = (function(){
alert("你看不见我执行"); 
return 1;
})
console.log(x);   // function (){alert("你看不见我执行");  return 1; } 

=================================================

误解2：

$(function(){}) 也就是$(document).ready(function(){})  加载完毕后当即执行是闭包 ，因此通常不这么写。

也可理解为var x=function(){};  $(x)就至关于在jquery函数的内部定义了函数x();

 

闭包特性：

1. 能够阻止变量被 GC 回收（这里我常常会插一个问题：能不能介绍一下 GC 的执行机制？）
2. 能够实现某个特性，好比私有变量等

这些都是闭包的结果，或者闭包的用法，不是闭包自己。这些用法和现象是能够经过闭包的机制推出来的。另外，闭包在 JS 里很是重要，我认为仍是有必要了解清楚的。

JS 的闭包包含如下要点：

1. 函数声明的时候，会生成一个独立的做用域
2. 同一做用域的对象能够互相访问
3. 做用域呈层级包含状态，造成做用域链，子做用域的对象能够访问父做用域的对象，反之不能；另外子做用域会使用最近的父做用域的对象

其实第二点才是真闭包，不过咱们一般把“闭包”的概念扩大到上面3点之和。基于此3点，其它不管用法仍是问题均可以推出来。

另外，关于垃圾回收的问题，《JS 高级程序设计》里面有比较清晰的介绍，并非闭包会致使内存泄漏，就像咱们不能说菜刀会杀人同样。因此建议你们把 GC 也搞清楚，为何闭包有时候可能致使内存泄漏，怎么处理？哪些浏览器会发生哪些不会发生，这样本身写起代码来也更容易操做。毕竟，全部的 JS 都包含闭包。