Javascript閉包簡單理解

原文: Javascript閉包簡單理解

提到閉包，想必你們都早有耳聞，下面說下個人簡單理解。
說實話平時工做中實際手動寫閉包的場景並很少，可是項目中用到的第三方框架和組件或多或少用到了閉包。
因此，瞭解閉包是很是必要的。呵呵...

1、什麼是閉包
簡而言之，就是可以讀取其餘函數內部變量的函數。
因爲JS變量做用域的特性，外部不能訪問內部變量，內部能夠外部變量。

2、使用場景
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);
}

 

3、注意事項
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");