【JS 口袋書】第 6 章：JS 中的閉包與模塊

時間 2019-11-16

原文原文鏈接

做者：valentinogagliardi
譯者：前端小智
來源：github

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...html

爲了保證的可讀性，本文采用意譯而非直譯。前端

全局變量使用容易引起bug，我們常常教導儘可能不要使用全局變量，儘管全局變量在某些狀況下是有用的。例如，在瀏覽器中使用JS時，我們能夠訪問全局window對象，window中有不少有用的方法，好比：git

window.alert('Hello world'); // Shows an alert
window.setTimeout(callback, 3000); // Delay execution
window.fetch(someUrl); // make XHR requests
window.open(); // Opens a new tab

這些方法也像這樣使用：github

alert('Hello world'); // Shows an alert
setTimeout(callback, 3000); // Delay execution
fetch(someUrl); // make XHR requests
open(); // Opens a new tab

這是方便的。Redux是另外一個「好」全局變量的例子:整個應用程序的狀態存儲在一個JS對象中，這個對象能夠從整個應用程序(經過Redux)訪問。可是當在一個團隊若是同時有50個編寫代碼時，以如何處理這樣的代碼：數組

var arr = [];

function addToArr(element) {
  arr.push(element);
  return element + " added!";
}

我們同事在另外一個文件中建立一個名爲arr的新全局數組的概率有多大?我以爲很是高。JS中的全局變量很是糟糕的另外一個緣由是引擎足夠友好，能夠爲我們建立全局變量。若是忘了在變量名前加上var，就像這樣：瀏覽器

name = "Valentino";

JS引擎爲會建立一個全局變量，更糟糕的是，能夠在函數中建立了「非預期」變量：微信

function doStuff() {
  name = "Valentino";
}

doStuff();

console.log(name); // "Valentino"

無辜的功能最終污染了全球環境。幸運的是，能夠用「嚴格模式」來消除這種行爲，在每一個JS文件使用「use strict」足以免愚蠢的錯誤：閉包

"use strict";

function doStuff() {
  name = "Valentino";
}

doStuff();

console.log(name); // ReferenceError: name is not defined

但一直使用嚴格模式也是一個問題，並不確實每一個開發人員都會使用嚴格模式，所以，我們必須找到一種解決「全局變量污染」問題的方法，幸運的是，JS 一直有一個內置的機制來解決這個問題。模塊化

揭祕閉包

那麼，我們如何保護全局變量不被污染?讓我們從一個簡單的解開始，把arr移動到一個函數中：函數

function addToArr(element) {
  var arr = [];
  arr.push(element);
  return element + " added to " + arr;
}

彷佛合理，但結果不是我們所指望的：

var firstPass = addToArr("a");
var secondPass = addToArr("b");
console.log(firstPass); // a added to a
console.log(secondPass); // b added to b

arr在每次函數調用時都會被重置，如今它成了一個局部變量，而在第一個例子中我們聲明的arr是全局變量。全局變量是「實時的」，不會被重圍。局部變量在函數執行完後就會被銷燬了彷佛沒有辦法防止局部變量被破壞？閉包會有幫助嗎？可是什麼是閉包呢？

JS函數能夠包含其餘函數，這到如今是很常見的，以下所示：

function addToArr(element) {
  var arr = [];

  function push() {
    arr.push(element);
  }

  return element + " added to " + arr;
}

但若是我們直接把 push 函數返回，又會怎麼樣呢？以下所示：

function addToArr(element) {
  var arr = [];

  return function push() {
    arr.push(element);
    console.log(arr);
  };

  //return element + " added to " + arr;
}

外部函數變成一個容器，返回另外一個函數。第二個return語句被註釋，由於該代碼永遠不會被執行。此時，我們知道函數調用的結果能夠保存在變量中。

var result = addToArr();

如今result變成了一個可執行的JS函數:

var result = addToArr();
result("a");
result("b");

只需修復一下，將參數「element」從外部函數移動到內部函數：

function addToArr() {
  var arr = [];

  return function push(element) {
    arr.push(element);
    console.log(arr);
  };

  //return element + " added to " + arr;
}

神奇的現象出現了，完整代碼以下：

function addToArr() {
  var arr = [];

  return function push(element) {
    arr.push(element);
    console.log(arr);
  };

  //return element + " added to " + arr;
}

var result = addToArr();
result("a"); // [ 'a' ]
result("b"); // [ 'a', 'b' ]

這種被稱爲JS閉包:一個可以記住其環境變量的函數。爲此，內部函數必須是一個封閉(外部)函數的返回值。這種也稱爲工廠函數。代碼能夠稍做調整，變動能夠取更好的命名，內部函數能夠是匿名的:

function addToArr() {
  var arr = [];

  return function(element) {
    arr.push(element);
    return element + " added to " + arr;
  };
}

var closure = addToArr();
console.log(closure("a")); // a added to a
console.log(closure("b")); // b added to a,b

如今應該清楚了，「閉包」是內部函數。但有一個問題須要解決:我們爲何要這樣作?JS閉包的真正目的是什麼?

閉包的須要

除了純粹的「學術」知識以外，JS閉包還有不少用處：

提供私有的全局變量
在函數調用之間保存變量(狀態)

JS中閉包最有趣的應用程序之一是模塊模式。在ES6以前，除了將變量和方法封裝在函數中以外，沒有其餘方法能夠模塊化JS代碼並提供私有變量與方法」。閉包與當即調用的函數表達式相結合是至今通用解決方案。

var Person = (function(){
  // do something
})()

在模塊中能夠有「私有」變量和方法:

var Person = (function() {
  var person = {
    name: "",
    age: 0
  };

  function setName(personName) {
    person.name = personName;
  }

  function setAge(personAge) {
    person.age = personAge;
  }
})();

從外部我們沒法訪問person.name或person.age。我們也不能調用setName或setAge。模塊內的全部內容都是「私有的」。若是想公開我們的方法，咱們能夠返回一個包含對私有方法引用的對象。

var Person = (function() {
  var person = {
    name: "",
    age: 0
  };

  function setName(personName) {
    person.name = personName;
  }

  function setAge(personAge) {
    person.age = personAge;
  }

  return {
    setName: setName,
    setAge: setAge
  };
})();

若是想獲取person對象，添加一個獲取 person 對象的方法並返回便可。

var Person = (function() {
  var person = {
    name: "",
    age: 0
  };

  function setName(personName) {
    person.name = personName;
  }

  function setAge(personAge) {
    person.age = personAge;
  }

  function getPerson() {
    return person.name + " " + person.age;
  }

  return {
    setName: setName,
    setAge: setAge,
    getPerson: getPerson
  };
})();

Person.setName("Tom");
Person.setAge(44);
var person = Person.getPerson();
console.log(person); // Tom 44

這種方式，外部獲取不到 person 對象：

console.log(Person.person); // undefined

模塊模式不是構造JS代碼的惟一方式。使用對象，我們能夠實現相同的結果：

var Person = {
  name: "",
  age: 0,
  setName: function(personName) {
    this.name = personName;
  }
  // other methods here
};

可是這樣，內部屬性就不在是私有的了：

var Person = {
  name: "",
  age: 0,
  setName: function(personName) {
    this.name = personName;
  }
  // other methods here
};

Person.setName("Tom");

console.log(Person.name); // Tom

這是模塊的主要賣點之一。另外一個好處是，模塊有助於組織代碼，使其具備重用性和可讀性。如，開發人員看到如下的代碼就大概知道是作什麼的：

"use strict";

var Person = (function() {
  var person = {
    name: "",
    age: 0
  };

  function setName(personName) {
    person.name = personName;
  }

  function setAge(personAge) {
    person.age = personAge;
  }

  function getPerson() {
    return person.name + " " + person.age;
  }

  return {
    setName: setName,
    setAge: setAge,
    getPerson: getPerson
  };
})();