Javascript閉包用法實例分析_javascript技巧-js教程-PHP中文網

Javascript閉包用法實例分析_javascript技巧

WBOY

發布： 2016-05-16 16:18:24

原創

1157 人瀏覽過

本文實例分析了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
   aLi[i].onclick = function() {

     alert(i); // 無論點選哪個元素，彈出的值都為len，表示這裡的i和在for之後列印i的值是一樣的。 

   };

}

使用閉包後：

複製程式碼程式碼如下:

var aLi = document.getElementsByTagName('li');

for (var i=0, len=aLi.length; i
  aLi[i].onclick = (function(i) {

    return function() {

      alert(i); // 此時點選元素，就會跳出對應的下標了。 

    }

  })(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

実際、上記の使用法は、専門用語では関数カリー化と呼ばれており、複数のパラメーターを受け取る関数を、単一のパラメーター (元の関数の最初のパラメーター) を受け取り、残りのパラメーターを返す関数に変換します。 . パラメータを受け取り、結果を返す新しい関数テクノロジ。基本的に、次のようなクロージャのキャッシュ機能も利用します。

コードをコピーコードは次のとおりです。

var adder = function(num) {
戻り関数(y) {
return num y;
};
};

var inc = adder(1);
var dec = adder(-1);
//inc、dec は 2 つの新しい関数になり、その関数は渡されたパラメーター値を変換することです (/‐)1
alert(inc(99));//100
alert(dec(101));//100
alert(adder(100)(2));//102
alert(adder(2)(100));//102

もう 1 つの例は、Ali Yubo の seaJS ソースコードです:

コードをコピーコードは次のとおりです:

/**
* util-lang.js - 最小限の言語拡張
*/
関数 isType(type) {
return function(obj) {
Return {}.toString.call(obj) == "[object " type "]"
}
}

var isObject = isType("オブジェクト");
var isString = isType("String");

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。