《JavaScript Ninja》之闭包

闭包

闭包是什么，它们是如何工作的

/* 分析：在同一个作用域内声明一个变量和函数，`outerFunction`可以看到并访问`outerValue`。
* 此处是全局作用域，该作用域实际上就是一个闭包，从未消失过（因为页面已经被加载了）。
*/

var outerValue = "ninja";

function outerFunction() {
alert(outerValue);
}

outerFunction();    // ninja

var outerValue = "ninja";
var later;  // 声明一个全局变量

function outerFunction() {
// 在函数内部声明一个值。该变量的作用域是限制在该函数内部，并且在函数外部访问不到
var innerValue = "samurai";

// 在外部函数内，声明一个内部函数。注意，声明该函数时，innerValue是在作用域内的。
function innerFunction() {
alert(outerValue);
alert(innerValue);
}

later = innerFunction;  // 将内部函数引用到later变量上
}

/* 调用外部函数，将会声明内部函数，并将内部函数赋值给later变量
* 但并不输出
*/
outerFunction();

/* 通过later调用内部函数
*不能直接调用内部函数，因为它的作用域（和innerValue一起）被限制在outerFunction()内
*/
later();    // ninja,samurai

later

innerValue

innerFunction()

var outerValue = "ninja";
var later;

function outerFunction() {
var innerValue = "samurai";

function innerFunction(paramValue) {
console.log(outerValue);
console.log(innerValue);
console.log(paramValue);
console.log(tooLate);
}

later = innerFunction;
}

console.log(tooLate);   // undefined

var tooLate = "ronin";

outerFunction();

later('wakizashi');     // ninja,samurai,wakizashi,ronin

利用闭包简化开发

function Ninja() {
var age = 10;

this.getAge = function() {
return age;
}

this.setAge = function() {
age++;
}
}

var ninja = new Ninja();
ninja.setAge();
ninja.getAge(); // 11

// 示例1：在 Ajax 请求的 callback 里使用闭包
jQuery('#testButton').click(function() {
var elem$ = jQuery('#testSubject');

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

jQuery.ajax({
url: "test.html",
success: function(html) {   // 通过闭包引用了elem$变量
console.log(elem$);
elem$.html(html);
}
});
});

// 示例2：在计时器间隔回调中使用闭包
function animateIt(elementId) {

var elem = document.getElementById(elementId);
var tick = 0;

var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + "px";
tick++;
} else {
clearInterval(timer);
console.log(tick == 100);
console.log(elem);
console.log(timer);
}
}, 10);
}

animateIt('box');

利用闭包提高性能&&解决常见的作用域问题

bind

bind()

apply()

call()

apply()

call()

柯里化

即时函数（立即执行函数）

(function() {
statement..;
})();

// method 1
(function() {
var numClicks = 0;
document.addEventListener("click", function(){
alert( ++numClicks );
},false);
})();

// method 2
document.addEventListener("click", (function() {
var numClicks = 0;
return function() {
alert( ++numClicks );
}
})(), false);

(function(what) {
alert(what);
})('Hi there!');

(function(v) {
Object.extend(v, {
href: v._getAttr,
src:  v._getAttr,
...
});
})(Element.attributeTranslations.read.values);

var div = document.getElementsByTagName("div");

for (var i=0; i < div.length; i++) {
(function(n) {
div
.addEventListener("click", function() {
alert("div #" + n + " was clicked.");
}, false);
})(i);
}

// method 1
(function() {
var jQuery = window.jQuery = function() {
// Initialize
};

// ...
})();

// method 2
var jQuery = (function() {
function jQuery() {
// Initialize
}

// ...

return jQuery;
})();