什么是閉包?

zxhaaa 發(fā)布于2019-08-21 10:40 / 2303人閱讀

摘要：無論焦點在哪個輸入域上，顯示的都是關(guān)于年齡的消息該問題的原因在于賦給是閉包中的匿名函數(shù)而不是閉包對象解決這個問題的一種方案是使指向一個新的閉包對象。

閉包定義 對閉包的具體定義有很多種說法，這些說法大體可以分為兩類:


閉包是其詞法上下文中引用了自由變量的函數(shù).

閉包是由函數(shù)和其相關(guān)的引用環(huán)境組合而成的實體.

詞法:變量的作用域是由它在源碼中所處位置決定的.

很多人都覺得閉包是一個很難理解的知識點，其實不然，不管它的定義有多難理解，我們只需自己對它形成一種自己可以理解的定義就可以了，并保證這種自我理解定義的正確性和可行性.

在這里來看，閉包不管他是一個函數(shù)還是一個實體，它給我的理解就是一個函數(shù)可以訪問當(dāng)前上下文的環(huán)境變量.在這樣看來,不管是函數(shù)內(nèi)部的函數(shù),還是單個定義的函數(shù),有函數(shù)的地方就存在閉包.

閉包的特性和好處 閉包的特性:

函數(shù)內(nèi)部可以引用外部的參數(shù)和變量.

參數(shù)和變量不會被垃圾回收機制回收.

使用閉包的好處

希望一個變量長期保存在內(nèi)存中

可以擁有私有成員

在函數(shù)內(nèi)部存在函數(shù)形式的閉包中,可以避免全局變量的污染

舉例 函數(shù)內(nèi)部函數(shù)

function init() {
  var name = "closure";
  function displayName() {
    alert(name);
  }
  displayName();
}
init();

函數(shù) init() 創(chuàng)建了一個局部變量 name，然后定義了名為 displayName() 的函數(shù)。 displayName() 是一個內(nèi)部函數(shù)——定義于 init() 之內(nèi)且僅在該函數(shù)體內(nèi)可用。displayName() 沒有任何自己的局部變量，然而它可以訪問到外部函數(shù)的變量，即可以使用父函數(shù)中聲明的 name 變量。

用閉包模擬私有方法

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 Counter1 = makeCounter();
var Counter2 = makeCounter();
alert(Counter1.value()); /* 提示 0 */
Counter1.increment();
Counter1.increment();
alert(Counter1.value()); /* 提示 2 */
Counter1.decrement();
alert(Counter1.value()); /* 提示 1 */
alert(Counter2.value()); /* 提示 0 */

請注意兩個計數(shù)器是如何維護(hù)它們各自的獨立性的。每次調(diào)用 makeCounter() 函數(shù)期間，其環(huán)境是不同的。每次調(diào)用中， privateCounter 中含有不同的實例。
這種形式的閉包提供了許多通常由面向?qū)ο缶嶶所享有的益處，尤其是數(shù)據(jù)隱藏和封裝。

在循環(huán)中創(chuàng)建閉包：一個常見錯誤

Helpful notes will appear here

E-mail:

Name:

Age:

function showHelp(help) {
  document.getElementById("help").innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {"id": "email", "help": "Your e-mail address"},
      {"id": "name", "help": "Your full name"},
      {"id": "age", "help": "Your age (you must be over 16)"}
    ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();

運行這段代碼后，您會發(fā)現(xiàn)它沒有達(dá)到想要的效果。無論焦點在哪個輸入域上，顯示的都是關(guān)于年齡的消息,
該問題的原因在于賦給 onfocus 是閉包（setupHelp）中的匿名函數(shù)而不是閉包對象；

解決這個問題的一種方案是使onfocus指向一個新的閉包對象。

function showHelp(help) {
  document.getElementById("help").innerHTML = help;
}

function makeHelpCallback(help) {
  return function() {
    showHelp(help);
  };
}

function setupHelp() {
  var helpText = [
      {"id": "email", "help": "Your e-mail address"},
      {"id": "name", "help": "Your full name"},
      {"id": "age", "help": "Your age (you must be over 16)"}
    ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
  }
}

setupHelp();

性能考量

如果不是因為某些特殊任務(wù)而需要閉包，在沒有必要的情況下，在其它函數(shù)中創(chuàng)建函數(shù)是不明智的，因為閉包對腳本性能具有負(fù)面影響，包括處理速度和內(nèi)存消耗。

例如，在創(chuàng)建新的對象或者類時，方法通常應(yīng)該關(guān)聯(lián)于對象的原型，而不是定義到對象的構(gòu)造器中。原因是這將導(dǎo)致每次構(gòu)造器被調(diào)用，方法都會被重新賦值一次（也就是說，為每一個對象的創(chuàng)建）。

考慮以下雖然不切實際但卻說明問題的示例：

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
  this.getName = function() {
    return this.name;
  };

  this.getMessage = function() {
    return this.message;
  };
}

上面的代碼并未利用到閉包的益處，因此，應(yīng)該修改為如下常規(guī)形式：

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype = {
  getName: function() {
    return this.name;
  },
  getMessage: function() {
    return this.message;
  }
};