`

浅谈JavaScript闭包

 
阅读更多

Javascript Closure

 

为什么知道闭包很重要?

闭包是JS语言的难点也是其一大特色,很多初学者甚至从业多年的开发者也很难弄清楚这个概念。弄明白这个概念十分重要,因为不但是对学习JS语言的一个大提升,在编写高级应用时候经常要用到,同时也是很多面试题目中经常会考到的问题。

 

闭包的“官方”解释:

所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
想必上述解释大部分人看起来都像是天书,要了解闭包首先我们还需要知道JS语言的作用域这个概念。

 

变量的作用域

函数内部可以直接读取全局变量。

var n=7;
function f1 () {
  alert(n);
}
f1();  // 7

 
在函数外部自然无法读取函数内的局部变量。

function f1 () {
  var n=7;
}
alert(n);  // error

 
这样牵扯出来一个问题:如何访问函数内部的变量呢 ?
我们先来看下面一个例子:

function f1() {

   var n = 7;
   function f2 (){
      alert(n);
   }
   return f2;
}

var result = f1();
result();  

这里就形成了闭包,由此我们可以给闭包一个新的解释。

 


闭包的“通俗”解释:

闭包就是能够读取其他函数内部变量的函数,其本质就是就是将函数内部和函数外部连接起来的一座桥梁。


(闭包是由函式和与其相关的参照环境组合而成的实体。即便在函数内部定义了函数,如果没有引用父函数作用域的变量,也照样可以不是闭包。函数和环境,缺一不可,这才是闭包。)

再看一个稍微复杂一点的例子:

var foo = ( function () {
    var secret = 'secret';
    return {
        get_secret: function () {
            return secret;
        }, 
new_secret: function (new_secret) {
            secret = new_secret;
        }
    };
}() );

foo.get_secret ();  // 得到 ‘secret'
foo.secret;   // Type error,访问不能
foo.new_secret ('a new secret');  // 通过函数接口,我们访问并修改了 secret 变量
foo.get_secret (); // 得到 'a new secret'

 

 


引用 Douglas Crockford [1] :
之所以可能通过这种方式在 JavaScript 种实现公有,私有,特权变量正是因为闭包,闭包是指在 JavaScript 中,内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。

 

闭包主要应用场合主要是为了:设计私有的方法和变量。

 

function foo(x) {
    var tmp = 3;
    return function (y) {
        alert(x + y + (++tmp));
    }
}
var bar = foo(2); // bar 现在是一个闭包
bar(10);

 

 

闭包特点

闭包会把函数中的变量都被保存在内存中。

注意点

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

 

参考资源

ECMA-262-3 in detail. Chapter 6. Closures.

[1] how do JavaScript closures work

[2] 学习Javascript闭包(Closure)

[3] 理解Javascript的闭包

[4] JavaScript:闭包和引用

[5] Private Members in JavaScript
 

 

 

该篇文章是公司技术分享会的演讲稿文字整理

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics