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 是一个匿名函数,而这个匿名函数本身就是一个闭包,可以在函数外部对函数内部的变量进行操作。

五、使用闭包的注意点

  • 由于闭包会使得函数中的变量保存在内存中,内存消耗大,所以不能滥用闭包,否则会造成网页性能问题,还有可能导致内存泄漏。解决方法就是在退出函数之前,将不使用的局部变量全部删除。
  • 闭包会在父函数外部改变父函数内部变量的值。所以如果把父函数当作对象使用时,把闭包当作它的公用方法,把内部变量当作私有属性时,这时一定要小心,不要随意改变父函数内部的变量值。

六、思考题

理解下面两段代码的运行结果,基本就算理解闭包的运行机制了。

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

推荐阅读更多精彩内容