閉包是...

Keven 發(fā)布于2019-08-23 13:53 / 330人閱讀

摘要：首先引用文檔的一句話作為開(kāi)頭閉包是函數(shù)和聲明該函數(shù)的詞法環(huán)境的組合。這個(gè)環(huán)境包含了這個(gè)閉包創(chuàng)建時(shí)所能訪問(wèn)的所有局部變量。

首先引用 MDN 文檔的一句話作為開(kāi)頭

閉包是函數(shù)和聲明該函數(shù)的詞法環(huán)境的組合。

閉包的概念

當(dāng)一個(gè)函數(shù)被 return 的時(shí)候，這個(gè)函數(shù)內(nèi)部的詞法作用域中的變量是可以被外界訪問(wèn)到的，外層函數(shù)執(zhí)行完畢時(shí)被銷(xiāo)毀，但由于內(nèi)部函數(shù)作為值返回出去，這些值得以保存下來(lái)，存儲(chǔ)在內(nèi)存中，也就是私有性。

一個(gè)基本的例子：

// 來(lái)自 MDN
function makeFunc() {
  var name = "DOG";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

閉包是由函數(shù)以及創(chuàng)建該函數(shù)的詞法環(huán)境組合而成。這個(gè)環(huán)境包含了這個(gè)閉包創(chuàng)建時(shí)所能訪問(wèn)的所有局部變量。執(zhí)行 makeFunc 時(shí)創(chuàng)建的 displayName 函數(shù)實(shí)例的引用，而 displayName 實(shí)例仍可訪問(wèn)其詞法作用域中的變量，即可以訪問(wèn)到 name 。由此，當(dāng) myFunc 被調(diào)用時(shí)，name 仍可被訪問(wèn)。

閉包的應(yīng)用 私有屬性

在 JavaScript 中，是沒(méi)有原生支持私有屬性的（據(jù)說(shuō)現(xiàn)在已經(jīng)有了提議），但是我們可以使用閉包來(lái)創(chuàng)建一個(gè)私有屬性。

// 來(lái)自 MDN
var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
};

var counter = makeCounter();

console.log(counter.privateCounter); // undefined
console.log(counter.value()); // 0

存儲(chǔ)變量

function func() {
  var x = 100;
  return {
    function() {
      return x;
    }
  }
}
var m = func(); //運(yùn)行函數(shù)，變量 x 被 m 引用

此時(shí) m 引用了變量 x ，所以函數(shù)執(zhí)行后 x 不會(huì)被釋放，可以把比較重要或者計(jì)算耗費(fèi)很大的值存在 x 中，只需要第一次計(jì)算賦值后，就可以通過(guò) m 函數(shù)引用 x 的值，不必重復(fù)計(jì)算，同時(shí)也不容易被修改。

導(dǎo)致的問(wèn)題

看一個(gè)例子：

var a = [];
for(var i = 0; i < 10; i++) {
  a[i] = () => {
    return i;
  };
}
a[6](); //10

在這個(gè)簡(jiǎn)單的函數(shù)中，變量 i 是在 for 循環(huán)中定義的，如果是在 C++ 或者 Java 中，這樣定義的變量，一旦循環(huán)結(jié)束，變量也就隨之銷(xiāo)毀，i 的作用范圍只在循環(huán)這個(gè)小塊，就稱為塊級(jí)作用域。在 JavaScript中，沒(méi)有這樣的塊級(jí)作用域。所以上一段代碼其實(shí)相當(dāng)于：

var a = [];
var i = 0;
for(; i < 10; i++) {
  a[i] = () => {
    return i;
  };
}
a[6](); //10

這樣就很好理解了。由于匿名函數(shù)里面沒(méi)有 i 這個(gè)變量，在函數(shù)執(zhí)行的時(shí)候，這個(gè) i 他要從父級(jí)函數(shù)中尋找，而父級(jí)函數(shù)中的 i 在for 循環(huán)中，當(dāng)找到這個(gè) i 的時(shí)候，是 for 循環(huán)已經(jīng)循環(huán)完畢，所以所得與預(yù)想不一致。

改進(jìn)：

var a = [];
for(var i = 0; i < 10; i++) {
  a[i] = (() => {
    return i;
  })();
}
a[6]; // 6

總結(jié)

看到了一段很有用的話：

當(dāng)一個(gè)子函數(shù)被創(chuàng)建時(shí)，是父函數(shù)的執(zhí)行導(dǎo)致的，所以當(dāng)子函數(shù)創(chuàng)建時(shí)，父函數(shù)已經(jīng)處于執(zhí)行階段，所以父函數(shù)的執(zhí)行上下文已經(jīng)創(chuàng)建了。同時(shí)，因?yàn)樽雍瘮?shù)也在父函數(shù)的局部變量作用域內(nèi)，所以，子函數(shù)在創(chuàng)建的時(shí)候，除了要引用全局上下文，也需要引用父函數(shù)的執(zhí)行上下文。當(dāng)一個(gè)子函數(shù)執(zhí)行時(shí)，因?yàn)樗瑯邮呛瘮?shù)，所以它同樣需要?jiǎng)?chuàng)建自己的執(zhí)行上下文，當(dāng)它返回的時(shí)候，同樣也只解除屬性中對(duì)自身執(zhí)行上下文的引用，對(duì)父函數(shù)的執(zhí)行上下文的引用并沒(méi)有解除，這意味著，父函數(shù)的執(zhí)行上下文與子函數(shù)本身共存亡了。只要子函數(shù)還存在引用，垃圾收集器就不會(huì)銷(xiāo)毀它們所在的執(zhí)行上下文。另外，因?yàn)楦负瘮?shù)的局部變量并不在全局上下文中，所以它只能在子函數(shù)的變量解析中被訪問(wèn)，自然而然就相當(dāng)于它們是子函數(shù)私有的了。