Javascript的闭包及其使用技巧实例

Javascript的闭包及其使用技巧实例

一、闭包的基本概念

闭包（Closure）是一个引用了自由变量的函数，记录了该函数在定义时的scope chain。又称词法闭包（Lexical Closure）或函数闭包（function closures）.

闭包的基本规则：

* 函数执行是基于函数定义时的scope， 而不是 函数运行时的scope

（定义时的Scope： 在定义这个函数的时候的scope chain）

为此， JS的function对象的内部状态，不仅包括函数代码本身， 而且包括了一个引用，指向函数定义时的scope Chain，

后者，用于提供函数中变量的值, 这种把代码及其所需要的scope组合到一起, 就是 闭包，closure。它是JS许多实用技巧的技术基础。

二、闭包的应用实例

示例1：

var who = "global scope"; // 全局变量who

function checkscope() {

var who = "local scope"; // 局部变量who

function f() { return who; } // 嵌套函数，

return f();

}

checkscope();                  // => "local scope"

f函数在定义的时候, scope chain中有局部变量who和全局变量who， 按照局部变量优先于全局变量的原则，

函数中的who的应该局部变量这的who，其值是 “local scope”。

这就是函数的定义时Scope。根据Clouse的特性，JS会记录这些信息， 不论这个函数f在什么地方执行， who的值都是这个“local scope”

示例2：执行的地方变了， 但是函数定义时的scope未变

var who = "global scope"; // A global variable

function checkscope() {

var who = "local scope"; // A local variable

function f() { return who; } // Return the value in scope here

return f;

}

checkscope()() // => "local scope"， 虽然，在这个时候“运行时的scope”中的who已经是全局的了。

实例3： 定义一个函数， 每调用一次， 获取一个唯一的整数，而且从0开始递增，每次+1。

var uniqueInteger = (function() { // 定义并执行1个外层函数。

var counter = 0; // 根据“定义时的scope”原则， 这个变量事实上成了下面函数的私有变量， 虽然它在函数体外，

当外层函数返回的时候， 此变量只能被下面的嵌套函数存取，

return function() { return counter++; }; // 定义一个函数，称作嵌套函数，被输出给uniqueInteger，在外面使用， 不是在外层函数内使用。

}());

uniqueInteger();  // 0

uniqueInteger();  // 1

uniqueInteger();  // 2

uniqueInteger();  // 3

实例4： 带有reset的计数器

function Counter() { // 定义并执行1个外层函数。

var n = 0; // 根据“定义时的scope”原则， 这个变量事实上成了下面2个嵌套函数的私有变量， 虽然它在函数体外，

当外层函数返回的时候， 此变量只能被下面的嵌套函数存取，

return ｛  // 定义2个嵌套函数，并组合成1个对象输出, 供外面使用；

// 这两个嵌套函数， 都可以存取外层函数中的局部变量n

count: function() { return n++; }; 。

reset: function() { n = 0; }

}

};

var counter1 = Counter()，  // 每一次调用 外层函数Counter（），都创建1个新的scope chain和1个新的私有变量n，互相不影响

counter2 = Counter()；

counter1.count();  // 0

counter1.count();  // 1

counter1.count();  // 2

counter2.count();  // 0

counter2.count();  // 1

counter2.count();  // 2

counter1.reset();

counter1.count();  // 0

counter1.count();  // 1

counter2.count();  // 3

counter2.count();  // 4

实例5： 与Ajax调用配合使用， 显示加载的过程和结果

<div></div>

<script src="jquery.js"></script>

<script>

var elem = jQuery("div");

elem.html("Loading...");

jQuery.ajax({

url: "test.html",

success: function(html){  //嵌入函数， 直接使用外层函数中的elem， 暴露给Ajax作为callback使用

assert( elem, "The element to append to, via a closure." );

elem.html( html );

}

});

</script>

实例6： 与timer配合使用， 显示动画

<div id="box" style="position:absolute;">Box!</div>

<script>

var elem = document.getElementById("box");

var count = 0;

var timer = setInterval(function(){ //嵌入函数， 直接使用外层函数中的elem和count， 暴露给Timer作为callback使用

if ( count < 100 ) {

elem.style.left = count + "px";

count++;

} else {

clearInterval( timer );

}

}, 10);

</script>

进阶:  JS 引擎内部是如何实现Scope Chain和Clouse的？

Scope Chain是一个list， 不是stack，

当执行function的时候， 建立1个新scope object，来存储此函数中的局部变量，并且把这个object加入到scope chain中，

当推出function的时候， 从scope chain中，删除这个object。

如果没有嵌套的函数， 则此object再无引用， 所以它会被 当作垃圾收集

如果有嵌套的函数， 则每一个嵌套函数都引用scope chain， 而scope chain引用此object，

** 如果这些嵌套函数，只限于在其外层函数里面使用， 则 这些嵌套函数及此object仍然可以被正常地垃圾收集。

** 如果这些嵌套函数 被用于外层函数之外的更多地方， 则这些嵌套函数及此object不能正常地垃圾收集, 从而可能导致造成内存泄露，