JavaScript 閉包

zhou_you 發(fā)布于2019-08-22 10:37 / 1465人閱讀

摘要：閉包的注意事項(xiàng)通常，函數(shù)的作用域及其所有變量都會(huì)在函數(shù)執(zhí)行結(jié)束后被銷毀。但是，在創(chuàng)建了一個(gè)閉包以后，這個(gè)函數(shù)的作用域就會(huì)一直保存到閉包不存在為止。最后通過釋放了和對(duì)閉包的引用。從而使用閉包模塊化代碼，減少全局變量的污染。

JavaScript 閉包

原文鏈接

什么是閉包（Closure）

簡(jiǎn)單講，閉包就是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。
MDN 上面這么說：閉包是一種特殊的對(duì)象。它由兩部分構(gòu)成：函數(shù)，以及創(chuàng)建該函數(shù)的環(huán)境。環(huán)境由閉包創(chuàng)建時(shí)在作用域中的任何局部變量組成。

但是，網(wǎng)上找了好多資料，它們對(duì)閉包的定義也各有各樣，搞得我也不知道怎么去定義閉包了，所以干脆不去定義了，意會(huì)吧。

道可道，非常道；名可名，非常名。

產(chǎn)生一個(gè)閉包

創(chuàng)建閉包最常見方式，就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。下面例子中的 closure 就是一個(gè)閉包：

function func(){
  var a = 1,b = 2;
  
  function closure(){
    return a+b;
  }
  return closure;
}

閉包的作用域鏈包含著它自己的作用域，以及包含它的函數(shù)的作用域和全局作用域。

閉包的注意事項(xiàng)

通常，函數(shù)的作用域及其所有變量都會(huì)在函數(shù)執(zhí)行結(jié)束后被銷毀。但是，在創(chuàng)建了一個(gè)閉包以后，這個(gè)函數(shù)的作用域就會(huì)一直保存到閉包不存在為止。

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

// 釋放對(duì)閉包的引用
add5 = null;
add10 = null;

add5 和 add10 都是閉包。它們共享相同的函數(shù)定義，但是保存了不同的環(huán)境。在 add5 的環(huán)境中，x 為 5。而在 add10 中，x 則為 10。最后通過 null 釋放了 add5 和 add10 對(duì)閉包的引用。

在javascript中，如果一個(gè)對(duì)象不再被引用，那么這個(gè)對(duì)象就會(huì)被垃圾回收機(jī)制回收； 
如果兩個(gè)對(duì)象互相引用，而不再被第3者所引用，那么這兩個(gè)互相引用的對(duì)象也會(huì)被回收。

閉包只能取得包含函數(shù)中任何變量的最后一個(gè)值，這是因?yàn)殚]包所保存的是整個(gè)變量對(duì)象，而不是某個(gè)特殊的變量。

function test(){
  var arr = [];
  for(var i = 0;i < 10;i++){
    arr[i] = function(){
      return i;
    };
  }
  for(var a = 0;a < 10;a++){
    console.log(arr[a]());
  }
}
test(); // 連續(xù)打印 10 個(gè) 10

對(duì)于上面的情況，如果我們改變代碼如下：

function test(){
  var arr = [];
  for(let i = 0;i < 10;i++){  // 僅在這里作出了改動(dòng)
    arr[i] = function(){
      return i;
    };
  }
  for(var a = 0;a < 10;a++){
    console.log(arr[a]());
  }
}
test(); // 打印 0 到 9

對(duì)于上面兩種代碼的解釋，請(qǐng)看我在 segmentfault 上面的提問：鏈接

閉包中的 this 對(duì)象

var name = "The Window";

var obj = {
  name: "My Object",
  
  getName: function(){
    return function(){
      return this.name;
    };
  }
};

console.log(obj.getName()());  // The Window

obj.getName()()實(shí)際上是在全局作用域中調(diào)用了匿名函數(shù)，this指向了window。這里要理解函數(shù)名與函數(shù)功能（或者稱函數(shù)值）是分割開的，不要認(rèn)為函數(shù)在哪里，其內(nèi)部的this就指向哪里。匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此其 this 對(duì)象通常指向 window。

var name = "The Window";

var obj = {
  name: "My Object",
  
  getName: function(){
    var that = this;
    return function(){
      return that.name;
    };
  }
};

console.log(obj.getName()());  // My Object

閉包的應(yīng)用

應(yīng)用閉包的主要場(chǎng)合是：設(shè)計(jì)私有的方法和變量。

任何在函數(shù)中定義的變量，都可以認(rèn)為是私有變量，因?yàn)椴荒茉诤瘮?shù)外部訪問這些變量。私有變量包括函數(shù)的參數(shù)、局部變量和函數(shù)內(nèi)定義的其他函數(shù)。

把有權(quán)訪問私有變量的公有方法稱為特權(quán)方法（privileged method）。

function Animal(){
  
  // 私有變量
  var series = "哺乳動(dòng)物";
  function run(){
    console.log("Run!!!");
  }
  
  // 特權(quán)方法
  this.getSeries = function(){
    return series;
  };
}

模塊模式（The Module Pattern）：為單例創(chuàng)建私有變量和方法。
單例（singleton）：指的是只有一個(gè)實(shí)例的對(duì)象。JavaScript 一般以對(duì)象字面量的方式來創(chuàng)建一個(gè)單例對(duì)象。

var singleton = {
  name: "percy",
  speak:function(){
    console.log("speaking!!!");
  },
  getName: function(){
    return this.name;
  }
};

上面是普通模式創(chuàng)建的單例，下面使用模塊模式創(chuàng)建單例：

var singleton = (function(){
  
  // 私有變量
  var age = 22;
  var speak = function(){
    console.log("speaking!!!");
  };
  
  // 特權(quán)（或公有）屬性和方法
  return {
    name: "percy",
    getAge: function(){
      return age;
    }
  };
})();

匿名函數(shù)最大的用途是創(chuàng)建閉包，并且還可以構(gòu)建命名空間，以減少全局變量的使用。從而使用閉包模塊化代碼，減少全局變量的污染。

var objEvent = objEvent || {};
(function(){ 
    var addEvent = function(){ 
      // some code
    };
    function removeEvent(){
      // some code
    }

    objEvent.addEvent = addEvent;
    objEvent.removeEvent = removeEvent;
})();

在這段代碼中函數(shù) addEvent 和 removeEvent 都是局部變量，但我們可以通過全局變量 objEvent 使用它，這就大大減少了全局變量的使用，增強(qiáng)了網(wǎng)頁的安全性。

一個(gè)閉包計(jì)數(shù)器

var countNumber = (function(){
  var num = 0;
  return function(){
    return ++num;
  };
})();

閉包的缺陷

閉包的缺點(diǎn)就是常駐內(nèi)存會(huì)增大內(nèi)存使用量，并且使用不當(dāng)很容易造成內(nèi)存泄露。

如果不是因?yàn)槟承┨厥馊蝿?wù)而需要閉包，在沒有必要的情況下，在其它函數(shù)中創(chuàng)建函數(shù)是不明智的，因?yàn)殚]包對(duì)腳本性能具有負(fù)面影響，包括處理速度和內(nèi)存消耗。

最后再來一些有關(guān)閉包的面試題

下面代碼中，標(biāo)記？的地方輸出分別是什么？

function fun(n,o){
  console.log(o);
  return {
    fun: function(m){
      return fun(m,n);
    }
  };
}

var a = fun(0);  // ?
a.fun(1);        // ?        
a.fun(2);        // ?
a.fun(3);        // ?

var b = fun(0).fun(1).fun(2).fun(3);  // ?

var c = fun(0).fun(1);  // ?
c.fun(2);        // ?
c.fun(3);        // ?

undefined
0
0
0
undefined, 0, 1, 2
undefined, 0
1
1

參考資料

【書】《JavaScript 高級(jí)程序設(shè)計(jì)（第三版）》

【文章】學(xué)習(xí)Javascript閉包（Closure）

【文章】【JavaScript】【函數(shù)】閉包閉包！

GPU云服務(wù)器云服務(wù)器 javascript閉包 javascript閉包詳解循環(huán)閉包閉包概念

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90947.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

zhou_you

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

搬瓦工雙11優(yōu)惠碼，全場(chǎng)VPS8.9折促銷，美國(guó)CN2 GIA VPS 低至$44/季

閱讀 3262·2021-11-11 11:00
進(jìn)一步理解：inline-block，vertical-align，line-height

閱讀 2582·2019-08-29 11:23
巧用SASS之如何遍歷n個(gè)子元素并為其設(shè)置屬性

閱讀 1463·2019-08-29 10:58
CSS：em 和 strong 的區(qū)別

閱讀 2347·2019-08-29 10:58
JavaScript 設(shè)計(jì)模式（五）：迭代器模式

閱讀 2966·2019-08-23 18:26
JS進(jìn)階篇1---函數(shù)節(jié)流（throttle）

閱讀 2523·2019-08-23 18:18
LeetCode 之 JavaScript 解答第23題 —— 合并K個(gè)有序鏈表（Merge K S

閱讀 2053·2019-08-23 16:53
九宮格抽獎(jiǎng)--手?jǐn)]代碼

閱讀 3427·2019-08-23 13:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

JavaScript 閉包

相關(guān)文章