本文實例分析了Javascript閉包的概念及用法。分享給大家供大家參考。具體如下：
提到閉包，想必大家都早有耳聞，下面說下我的簡單理解。
說實話平時工作中實際手動寫閉包的場景並不多，但是項目中用到的第三方框架和組件或多或少用到了閉包。
所以，了解閉包是非常必要的。呵呵...
一、什麼是閉包
簡而言之，就是能夠讀取其他函數內部變量的函數。
由於JS變量作用域的特性，外部不能訪問內部變量，內部可以外部變量。
二、使用場景
1. 實現私有成員。
2. 保護命名空間，避免污染全局變量。
3. 緩存變量。
先看一個封裝的例子：
複製代碼代碼如下:var person = function () {
// 變量作用域為函數內部，外部無法訪問
var name = "default";
return {
getName: function () {
return name;
},
setName: function (newName) {
name = newName;
}
}
}();
console.log(person.name); // 直接訪問，結果為：undefined
console.log(person.getName()); // 結果為：default
console.log(person.setName("langjt"));
console.log(person.getName()); // 結果為：langjt
再看循環中常用閉包解決引用外部變量問題：
複製代碼代碼如下:var aLi = document.getElementsByTagName('li');
for (var i=0, len=aLi.length; i<len; i++) {
aLi[i].onclick = function() {
alert(i); // 無論點擊哪個<li>元素，彈出的值都為len，表明這裡的i和在for之後打印i的值是一樣的。
};
}
使用閉包後：
複製代碼代碼如下:var aLi = document.getElementsByTagName('li');
for (var i=0, len=aLi.length; i<len; i++) {
aLi[i].onclick = (function(i) {
return function() {
alert(i); // 此時點擊<li>元素，就會彈出對應的下標了。
}
})(i);
}
三、注意事項
1. 內存洩漏
由於閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題。
比如：
複製代碼代碼如下:function foo() {
var oDiv = document.getElementById('J_DIV');
var id = oDiv.id;
oDiv.onclick = function() {
// alert(oDiv.id); 這裡存在循環引用，IE低版本頁面關閉後oDiv仍在內存中。所以盡可能緩存基本類型而不是對象。
alert(id);
};
oDiv = null;
}
2. 變量命名
如果內部函數的變量和外部函數的變量名相同時，那麼內部函數再也無法指向外部函數那個同名的變量。
比如：
複製代碼代碼如下:function foo(num) {
return function(num) {
console.log(num);
}
}
var f = new foo(9);
f(); // undefined
其實上面的用法，專業術語叫函數柯里化(Currying)，就是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，並且返回接受餘下的參數而且返回結果的新函數的技術。本質上也利用了閉包可以緩存的特性，比如：
複製代碼代碼如下:var adder = function(num) {
return function(y) {
return num+y;
};
};
var inc = adder(1);
var dec = adder(-1);
//inc, dec現在是兩個新的函數,作用是將傳入的參數值(+/)1
alert(inc(99));//100
alert(dec(101));//100
alert(adder(100)(2));//102
alert(adder(2)(100));//102
再比如阿里玉伯的seaJS源碼中：
複製代碼代碼如下:/**
* util-lang.js - The minimal language enhancement
*/
function isType(type) {
return function(obj) {
return {}.toString.call(obj) == "[object " + type + "]"
}
}
var isObject = isType("Object");
var isString = isType("String");
希望本文所述對大家的javascript程序設計有所幫助。