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