Javascript閉包用法實例分析
本文實例分析了Javascript閉包的概念及用法。分享給大家供大家參考。具體如下：
提到閉包，想必大家都早有耳聞，下面說下我的簡單理解。
說實話平時工作中實際手動寫閉包的場景并不多，但是項目中用到的第三方框架和組件或多或少用到了閉包。
所以，了解閉包是非常必要的。呵呵...
一、什么是閉包
簡而言之，就是能夠讀取其他函數(shù)內部變量的函數(shù)。
由于JS變量作用域的特性，外部不能訪問內部變量，內部可以外部變量。
二、使用場景
1. 實現(xiàn)私有成員。
2. 保護命名空間，避免污染全局變量。
3. 緩存變量。
先看一個封裝的例子：
// 變量作用域為函數(shù)內部，外部無法訪問
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
再看循環(huán)中常用閉包解決引用外部變量問題：
for (var i=0, len=aLi.length; i<len; i++) {
aLi[i].onclick = function() {
alert(i); // 無論點擊哪個<li>元素，彈出的值都為len，表明這里的i和在for之后打印i的值是一樣的。
};
}
使用閉包后：
for (var i=0, len=aLi.length; i<len; i++) {
aLi[i].onclick = (function(i) {
return function() {
alert(i); // 此時點擊<li>元素，就會彈出對應的下標了。
}
})(i);
}
三、注意事項
1. 內存泄漏
由于閉包會使得函數(shù)中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題。
比如：
var oDiv = document.getElementById(‘J_DIV');
var id = oDiv.id;
oDiv.onclick = function() {
// alert(oDiv.id); 這里存在循環(huán)引用，IE低版本頁面關閉后oDiv仍在內存中。所以盡可能緩存基本類型而不是對象。
alert(id);
};
oDiv = null;
}
2. 變量命名
如果內部函數(shù)的變量和外部函數(shù)的變量名相同時，那么內部函數(shù)再也無法指向外部函數(shù)那個同名的變量。
比如：
return function(num) {
console.log(num);
}
}
var f = new foo(9);
f(); // undefined
其實上面的用法，專業(yè)術語叫函數(shù)柯里化(Currying)，就是把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)（最初函數(shù)的第一個參數(shù)）的函數(shù)，并且返回接受余下的參數(shù)而且返回結果的新函數(shù)的技術。本質上也利用了閉包可以緩存的特性，比如：
return function(y) {
return num+y;
};
};
var inc = adder(1);
var dec = adder(-1);
//inc, dec現(xiàn)在是兩個新的函數(shù),作用是將傳入的參數(shù)值 (+/‐)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程序設計有所幫助。
相關文章
在開始設計你的腳本之前，要考慮的第一件事情就是檢查一下你要為其編寫腳本的HTML代碼，看看有什么東西可以幫助你達到目的。2008-10-10
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)日歷簽到功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了微信小程序之數(shù)據(jù)緩存的實例詳解的相關資料,希望通過本文能幫助到大家，讓大家掌握這部分內容，需要的朋友可以參考下2017-09-09
下面小編就為大家?guī)硪黄袛鄇s的Array和Object的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家詳細介紹了JavaScript設計模式之例模式的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JS把字符串格式的時間轉換成幾秒前、幾分鐘前、幾小時前、幾天前等格式
最近在做項目的時候，需要把后臺返回的時間轉換成幾秒前、幾分鐘前、幾小時前、幾天前等的格式，接下來通過本文給大家分享JS把字符串格式的時間轉換成幾秒前、幾分鐘前、幾小時前、幾天前等格式 ,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了javascript中Object使用詳解，非常全面詳盡，有需要的小伙伴參考下2015-01-01
在做交友中心的頁面的時候，有一個javascript函數(shù)，它的第二個參數(shù)是動態(tài)的。2008-12-12
使用特殊對象 arguments，開發(fā)者無需明確指出參數(shù)名，就能訪問它們，下面為大家介紹下其具體的應用2014-09-09
JS判斷來路是否是百度等搜索索引進行彈窗或自動跳轉的實現(xiàn)代碼
這篇文章主要介紹了JS判斷來路是否是百度等搜索索引進行彈窗或自動跳轉的實現(xiàn)代碼的相關資料,需要的朋友可以參考下2016-10-10