javascript閉包

binaryTree 發(fā)布于2019-08-22 18:04 / 809人閱讀

摘要：閉包的定義閉包是函數(shù)和聲明該函數(shù)的詞法作用域的組合。上面的和都是閉包。然而在一個閉包內(nèi)對變量的修改，不會影響到另一個閉包中的變量。原因是賦值給的是閉包。由于循環(huán)在事件觸發(fā)之前早已執(zhí)行完畢，變量被三個閉包共享已經(jīng)變成了。

閉包的定義：

閉包是函數(shù)和聲明該函數(shù)的詞法作用域的組合。

先看如下例子：

function makeFn(){
    var name = "Mirror";
    function showName(){
        alert(name)
    }
    
    return showName;
}

var myFn = makeFn();
myFn();  // "Mirror"

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

再看一個更有意思的例子：

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

以上示例中，我們定義了makeAdder(x) 函數(shù)，它接收一個參數(shù)x ，并返回一個新的函數(shù)。返回的函數(shù)接受一個參數(shù)y，并返回 x+y的值。

本質(zhì)上講，makeAdder 是一個工廠函數(shù) -- 它創(chuàng)建了將指定的值和它的參數(shù)相加求和的函數(shù)。上面的add5和add10都是閉包。它們共享相同的函數(shù)定義，但是保存了不同的詞法環(huán)境。在add5的環(huán)境中，x為5，而在add10中，x則是10。

實用的閉包：

閉包允許將函數(shù)與其所操作的某些數(shù)據(jù)（環(huán)境）關(guān)聯(lián)起來。這顯然類似于面向?qū)ο缶幊?。在面向?qū)ο缶幊讨校瑢ο笤试S我們將某些數(shù)據(jù)（對象的屬性）與一個或者多個方法相關(guān)聯(lián)。

通常，使用只有一個方法的對象的地方都可以使用閉包。

假如，我們想在頁面上添加一些可以調(diào)整字號的按鈕。一種方法是以像素為單位指定 body 元素的 font-size，然后通過相對的 em 單位設(shè)置頁面中其它元素（例如header）的字號：




    
    
    


     h1 標(biāo)簽
     h2 標(biāo)簽

用閉包模擬私有方法：

私有方法不僅僅有利于限制對代碼的訪問，還提供了管理全局命名空間的強大能力，避免非核心的方法弄亂了代碼的公共接口部分。

var Counter = ( function(){
    var privateCounter = 0;
    function changeBy(val){
        privateCounter += val
    };
    
    return {
        add:function(){
            changeBy(1);
            return privateCounter;
        },
        decrease:function(){
            changeBy(-1);
            return privateCounter;
        },
        value:function(){
            return privateCounter;
        }
    }
    
})()

以上示例中我們只創(chuàng)建了一個詞法環(huán)境，為三個函數(shù)所共享：Counter.add、 Counter.decrease 和Counter.value

該共享環(huán)境創(chuàng)建一個立即執(zhí)行的匿名函數(shù)體內(nèi)。這個環(huán)境中包含兩個私有項：privateCounter的變量和changeBy的函數(shù)。這兩項都無法在這個匿名函數(shù)外直接訪問。必須通過匿名函數(shù)返回的三個公共函數(shù)訪問。

這三個公共函數(shù)是共享同一個環(huán)境的閉包。多虧javascript的詞法作用域，它們都可以訪問privateCounter變量和changeBy函數(shù)。

應(yīng)該注意到我們定義了一個匿名函數(shù)，用來創(chuàng)建計算器。立即執(zhí)行函數(shù)將他的值賦給了變量Counter。我們也可以將這個函數(shù)存儲在另一個變量makeCounter中，并用它來創(chuàng)建多個計數(shù)器。

var makeCounter = function(){
    var privateCounter = 0;
    var changeBy = function(val){
        privateCounter += val
    };
    return {
        add:function(){
            changeBy(1)
            return privateCounter
        },
        decrease:function(){
             changeBy(-1)
             return privateCounter
        },
        value:function(){
            return privateCounter
        }
    }
}


var Counter1 = makeCounter();
var Counter2 = makeCounter();
Counter1.add() // 1
Counter2.decrease() // -1

兩個計數(shù)器Counter1和Counter2都引用自己詞法作用域內(nèi)的變量privateCounter。每次調(diào)用其中一個計數(shù)器時，通過改變這個變量的值，會改變這個閉包的詞法環(huán)境。然而在一個閉包內(nèi)對變量的修改，不會影響到另一個閉包中的變量。

以這種方式使用閉包，提供了許多面向?qū)ο缶幊滔嚓P(guān)的好處——特別是數(shù)據(jù)隱藏和封裝。

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

在ECMAScript2015引入let關(guān)鍵字以前，在循環(huán)中有一個常見的閉包創(chuàng)建問題。如下：

運行以上代碼，會發(fā)現(xiàn)沒有達(dá)到想要的結(jié)果。無論點擊哪個按鈕，彈窗提示的都是第3個按鈕。

原因是賦值給onclick的是閉包。三個閉包在循環(huán)中被創(chuàng)建，但是他們共享同一個詞法作用域，在這個作用域中存在一個變量i。當(dāng)onclick的回調(diào)執(zhí)行時，i的值被決定。由于循環(huán)在事件觸發(fā)之前早已執(zhí)行完畢，變量i（被三個閉包共享）已經(jīng)變成了"3"。

解決這個問題的一種方案是使用跟多的閉包:特別是使用前面所述的函數(shù)工廠：

這段代碼可以如我們所期望的那樣工作。所有的回調(diào)不再共享同一個環(huán)境，clickCallback函數(shù)為每一個回調(diào)創(chuàng)建一個新的詞法環(huán)境。在這些環(huán)境中。x指向循環(huán)中的i。

另一種方法實現(xiàn)了匿名閉包：

避免使用過多的閉包，可以用let關(guān)鍵詞：

這個例子使用的是let而不是var,因此每個閉包都綁定了塊作用域的變量，這意味著不再需要額外的閉包。

性能考量

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

例如，在創(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;
    this.message = message.toString();
    this.getName = function(){
        return this.name;
    };
    this.getMessage = function(){
        return this.message
    };
}

上面的代碼并未利用到閉包的好處，可以修改成如下：

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

不建議重新定義原型。可改成如下例子：

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

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

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

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

發(fā)表評論

登陸后可評論

0條評論

binaryTree

男|高級講師

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

TA的文章

VMware虛擬機安裝黑群暉7.0教程

閱讀 2760·2021-09-24 09:47
搬瓦工申請退款的條件和方法教程

閱讀 4380·2021-08-27 13:10
第八集: 從零開始實現(xiàn)一套pc端vue的ui組件庫(input, textarea組件)

閱讀 3031·2019-08-30 15:44
前端開發(fā)必備調(diào)試技巧

閱讀 1300·2019-08-29 12:56
關(guān)于彈幕的制作第一篇一樣式

閱讀 2601·2019-08-28 18:07
從零開始實現(xiàn)一個Vue級聯(lián)組件

閱讀 2626·2019-08-26 14:05
JavaScript 事件冒泡和捕獲模式

閱讀 2586·2019-08-26 13:41
在NPM發(fā)布自己造的輪子

閱讀 1275·2019-08-26 13:33

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

資訊專欄INFORMATION COLUMN

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

javascript閉包

h1 標(biāo)簽

h2 標(biāo)簽

相關(guān)文章