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调用配合使用，显示加载的过程和结果

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配合使用，显示动画

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不能正常地垃圾收集, 从而可能导致造成内存泄露，

巴特西

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

最新文章

热门文章