javascript閉包

2019年8月24日 109次阅读 来源: Mirror

閉包的定義：

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

先看以下例子：

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

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

javascript 中的函數會構成閉包。閉包是由函數以及建立該函數的詞法環境組合構成。這個環境包括了這個閉包建立時所能接見的一切局部變量。在以上的例子中，myFn是實行makeFn時建立的showName函數實例的援用，而showName實例仍可接見其詞法作用域中的變量，既能夠接見到name。 由此，當myFn 被挪用時，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) 函數，它吸收一個參數x ，並返回一個新的函數。返回的函數接收一個參數y，並返回 x+y的值。

本質上講，makeAdder 是一個工場函數 — 它建立了將指定的值和它的參數相加乞降的函數。上面的add5和add10都是閉包。它們同享雷同的函數定義，然則保留了差別的詞法環境。在add5的環境中，x為5，而在add10中，x則是10。

有用的閉包：

閉包許可將函數與其所操縱的某些數據（環境）關聯起來。這明顯類似於面向對象編程。在面向對象編程中，對象許可我們將某些數據（對象的屬性）與一個或很多個要領相干聯。

一般，運用只要一個要領的對象的處所都能夠運用閉包。

假如，我們想在頁面上增加一些能夠調解字號的按鈕。一種要領是以像素為單元指定 body 元素的 font-size，然後經由過程相對的 em 單元設置頁面中別的元素（比方header）的字號：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body { font-size: 12px;}
        h1 {font-size: 1.5em;}
        h2 {font-size: 1.2em;}
    </style>
    <script>
        function SetFs( size ){
            return function(){
                document.body.style.fontSize = size + 'px'
            }
        }
    </script>
</head>
<body>
    <h1> h1 標籤</h1>
    <h2> h2 標籤</h2>
    <button id="size_22" onclick="SetFs(22)()" >22px</button>
    <button id="size_32" onclick="SetFs(32)()" >32px</button>
</body>
</html>

用閉包模仿私有要領：

私有要領不單單議有利於限定對代碼的接見，還供應了治理全局定名空間的壯大才能，防止非中心的要領弄亂了代碼的大眾接口部份。

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;
        }
    }
    
})()

以上示例中我們只建立了一個詞法環境，為三個函數所同享：Counter.add、 Counter.decrease 和Counter.value

該同享環境建立一個馬上實行的匿名函數體內。這個環境中包括兩個私有項：privateCounter的變量和changeBy的函數。這兩項都沒法在這個匿名函數外直接接見。必需經由過程匿名函數返回的三個大眾函數接見。

這三個大眾函數是同享同一個環境的閉包。多虧javascript的詞法作用域，它們都能夠接見privateCounter變量和changeBy函數。

應當注意到我們定義了一個匿名函數，用來建立計算器。馬上實行函數將他的值賦給了變量
Counter。我們也能夠將這個函數存儲在另一個變量
makeCounter中，並用它來建立多個計數器。

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

兩個計數器Counter1和Counter2都援用本身詞法作用域內的變量privateCounter。每次挪用个中一個計數器時，經由過程轉變這個變量的值，會轉變這個閉包的詞法環境。然而在一個閉包內對變量的修正，不會影響到另一個閉包中的變量。

以這類體式格局運用閉包，供應了很多面向對象編程相干的優點——特別是數據隱蔽和封裝。

在輪迴中建立閉包：一個罕見的毛病

在ECMAScript2015引入let關鍵字之前，在輪迴中有一個罕見的閉包建立題目。以下：

<button>1</button>
<button>2</button>
<button>3</button>

<script>
    var els = document.querySelectorAll('button');
    for(var i=0; i<els.length ; i++){
        els[i].onclick = function(){
            alert( '第'+ i +`按鈕` )
        }
    }
</script>

運轉以上代碼，會發明沒有到達想要的效果。不管點擊哪一個按鈕，彈窗提醒的都是第3個按鈕。

原因是賦值給onclick的是閉包。三個閉包在輪迴中被建立，然則他們同享同一個詞法作用域，在這個作用域中存在一個變量i。當onclick的回調實行時，i的值被決議。由於輪迴在事宜觸發之前早已實行終了，變量i（被三個閉包同享）已變成了’3’。

處置懲罰這個題目的一種計劃是運用跟多的閉包:特別是運用前面所述的函數工場：

<button>1</button>
<button>2</button>
<button>3</button>

<script>
    var els = document.querySelectorAll('button'); 

    function clickCallback(x){
        return function(){
            alert(x)
        }
    }

    for(var i=0; i<els.length ; i++){
        els[i].onclick = clickCallback(i)
    }
</script>

這段代碼能夠如我們所希冀的那樣事情。一切的回調不再同享同一個環境，clickCallback函數為每一個回調建立一個新的詞法環境。在這些環境中。x指向輪迴中的i。

另一種要領完成了匿名閉包：

<button>1</button>
<button>2</button>
<button>3</button>


<script>
    var els = document.querySelectorAll('button');

    for(var i=0; i<els.length ; i++){
        els[i].onclick = (function (i) {
            return function(){alert(i)}
        })(i)
    }
</script>

防止運用過量的閉包，能夠用let關鍵詞：

<button>1</button>
<button>2</button>
<button>3</button>

<script>
    var els = document.querySelectorAll('button'); 

    for(let i=0; i<els.length ; i++){
        els[i].onclick = function(){
            alert( i );
        }
    }
</script>

這個例子運用的是let而不是var,因而每一個閉包都綁定了塊作用域的變量，這意味着不再須要分外的閉包。

機能考量

假如不是某些特定的使命須要運用閉包，在其他函數中建立函數是不明智的，由於閉包在處置懲罰速率和內存斲喪方面臨劇本機能具有負面影響。

比方，在建立新的對象或許類時，要領一般應當關聯於對象的原型，而不是定義到對象的組織器中。原因是這將致使每次組織器被挪用時，要領都會被從新賦值一次（也就是，每一個對象的建立）。

考慮一下示例：

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;
};
    原文作者：Mirror
    原文地址: https://segmentfault.com/a/1190000015289375
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞