詳談JavaScript函數閉包使用及注意事項程式碼詳解
- 伊谢尔伦原創
- 2017-07-25 15:04:271341瀏覽
閉包的英文單字是closure，這是JavaScript中非常重要的一部分知識，因為使用閉包可以大大減少我們的程式碼量，使我們的程式碼看起來更加清晰等等，總之功能十分強大。
閉包的意思：閉包說白了就是函數的嵌套，內層的函數可以使用外層函數的所有變量，即使外層函數已經執行完畢（這點涉及JavaScript作用域鏈）。
範例一
function checkClosure(){
var str = 'rain-man';
setTimeout(
function(){ alert(str); } //这是一个匿名函数
, 2000);
}
checkClosure();這個範例看起來十分的簡單，仔細分析下它的執行過程還是有許多知識點的：checkClosure函數的執行是瞬間的（也許用時只是0.00001毫秒），在checkClosure的函數體內創建了一個變數str，在checkClosure執行完畢之後str並沒有被釋放，這是因為setTimeout內的匿名函數存在這對str的引用。待到2秒後函數體內的匿名函數被執行完畢,str才被釋放。
範例二，最佳化程式碼
function forTimeout(x, y){
alert(x + y);
}
function delay(x , y , time){
setTimeout('forTimeout(' + x + ',' + y + ')' , time);
}
/**
* 上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰
* function delay(x , y , time){
* setTimeout(
* function(){
* forTimeout(x , y)
* }
* , time);
* }
*/匿名函數最大的用途是建立閉包（這是JavaScript語言的特性之一），也可以建立命名空間，以減少全域變數的使用。
範例三：
var oEvent = {};
(function(){
var addEvent = function(){ /*代码的实现省略了*/ };
function removeEvent(){}
oEvent.addEvent = addEvent;
oEvent.removeEvent = removeEvent;
})();範例四：
var rainman = (function(x , y){
return x + y;
})(2 , 3);
/**
* 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。
* var rainman = function(x , y){
* return x + y;
* }(2 , 3);
*/在這裡我們建立了一個變數rainman，並透過直接呼叫匿名函數初始化為5，這種小技巧有時十分實用。
範例五：
var outer = null;
(function(){
var one = 1;
function inner (){
one += 1;
alert(one);
}
outer = inner;
})();
outer(); //2
outer(); //3
outer(); //4這段程式碼中的變數one是一個局部變數（因為它被定義在一個函數之內），因此外部是不可以存取的。但這裡我們建立了inner函數，inner函數是可以存取變數one的；又將全域變數outer引用了inner，所以三次呼叫outer會彈出遞增的結果。
注意：閉包允許內層函數引用父函數中的變量，但是該變量是最終值
示例六：
/**
* <body>
* <ul>
* <li>one</li>
* <li>two</li>
* <li>three</li>
* <li>one</li>
* </ul>
*/
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
lists[ i ].onmouseover = function(){
alert(i);
};
}你會發現當滑鼠移過每一個 解決方法一： 解決方法二： 解決方法三： 以上是詳談JavaScript函數閉包使用及注意事項程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
(function(index){
lists[ index ].onmouseover = function(){
alert(index);
};
})(i);
}var lists = document.getElementsByTagName('li');
for(var i = 0, len = lists.length; i < len; i++){
lists[ i ].$$index = i; //通过在Dom元素上绑定$$index属性记录下标
lists[ i ].onmouseover = function(){
alert(this.$$index);
};
}function eventListener(list, index){
list.onmouseover = function(){
alert(index);
};
}
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
eventListener(lists[ i ] , i);
}