從前到後的閉包-js教程-PHP中文網

在 JavaScript 領域，閉包通常被視為一門神祕的藝術。一旦掌握了它們，您就可以編寫一些真正令人驚嘆的 JavaScript。本文將帶您快速了解 JavaScript 閉包的魔力。

#什麼是閉包？

JavaScript 的關鍵事實之一就是一切都是物件。當然，這也包括功能。

閉包只不過是一個具有相關作用域的函數對象，在該作用域中解析了函數的變數。

閉包因其內容而閉合的方式而得名。考慮以下 JavaScript 程式碼：

topping = "anchovi";
function pizzaParty(numSlices) {
	var topping = "pepperoni",

	innerFunction = function() {
		var topping = "ham";
		console.log(" .....But put " + topping + " on " + numSlices + " slices");
	};

	console.log("This pizza is all about the " + topping);

	innerFunction();
}
pizzaParty(3);

登入後複製

如果你打開你最喜歡的控制台並運行那個壞男孩，你會收到一條美味的消息，大意是“這個披薩全是意大利辣香腸......但是把火腿放在三片上。”此範例說明了JavaScript 的一些關鍵概念，這些概念對於掌握閉包至關重要。

閉包是一個函數物件

上面的程式碼中有多少個函數物件？好吧...我們有 pizzaParty 函數，並且嵌套在該函數中的是 innerFunction。數學並不總是我的強項，但在我的書中 1 1 = 2 。每個函數物件都有自己的一組變量，這些變數在每個函數的範圍中解析。

閉包有其自己的範圍

如果沒有堅實的範圍基礎，就無法完全理解閉包。 JavaScript 的作用域機制允許每個函數擁有自己的topping 變量，如果沒有它，我們可能會在披薩派對上吃到太多的意大利辣香腸、太少的火腿或*gasp* . .. 一些鳳尾魚。讓我們用一個簡單的例子來更好地說明這個想法。

從前到後的閉包

# 函數是使用定義函數時有效的作用域來執行的。它與呼叫函數時的有效範圍無關。

變數輔助功能由外而內工作

綠色箭頭表示可訪問性是從外到內的。在函數外部範圍內定義的變數可以從函數內部存取。

如果我們在pizzaParty 函數中省略topping 變量，那麼我們會收到類似「This Pizza is all about the anchovi」的訊息，但由於pizzaParty 在其自己的範圍內有一個topping 變數;那些鹹味的傻瓜永遠不會靠近我們的披薩派對。

同樣，可以從 innerFunction 內部存取 numSlices 參數，因為它是在上面的範圍中定義的 - 在本例中是 pizzaParty 的範圍。

變數可訪問性無法從內到外發揮作用

紅色箭頭表示函數範圍內的變數永遠無法在該函數之外存取。只有當變數滿足以下條件之一時才會出現這種情況：

正在使用 var 關鍵字。
變數是函數或外部函數的參數。
該變數是一個巢狀函數。

設定變數時省略 var 關鍵字將導致 JavaScript 在外部函數中設定最接近的命名變量，一直到全域範圍。因此，使用我們的範例，無法從pizzaParty 存取innerFunction 中的火腿topping，並且無法在anchovi 所在的全域範圍內存取pizzaParty 中的義大利辣香腸topping。

JavaScript 使用詞法作用域

詞法作用域意味著函數是使用定義函數時有效的變數作用域來執行的。它與呼叫函數時的有效範圍無關。這一事實對於釋放閉包的力量至關重要。

現在我們了解了閉包是什麼以及閉包的範圍意味著什麼，讓我們深入研究一些經典用例。

使用閉包保護隱私

閉包是向公眾隱藏程式碼的方式。透過閉包，您可以輕鬆地擁有與外界隔離的私有成員：

(function(exports){

	function myPrivateMultiplyFunction(num,num2) {
		return num * num2;
	}

	//equivalent to window.multiply = function(num1,num2) { ...
	exports.multiply = function(num1,num2) {
		console.log(myPrivateMultiplyFunction(num1,num2));
	}

})(window);

登入後複製

透過閉包，您可以輕鬆擁有與外界隔離的私人成員。

讓我們來分解一下。我們的頂層函數物件是一個匿名函數：

(function(exports){
	
})(window);

登入後複製

我們立即呼叫這個匿名函數。我們將全域上下文傳遞給它（在本例中為 window），這樣我們就可以「匯出」一個公共函數，但隱藏其他所有函數。因為函數 myPrivateMultiplyFunction 是一個巢狀函數，它只存在於我們的閉包範圍內；所以我們可以在這個範圍內的任何地方使用它，而且只能在這個範圍內。

JavaScript 將保留對我們的私有函數的引用，以便在乘法函數內部使用，但無法在閉包外部存取 myPrivateMultiplyFunction 。讓我們試試這個：

multiply(2,6) // => 12
myPrivateMultiplyFunction(2,6) // => ReferenceError: myPrivateMultiplyFunction is not defined

登入後複製

闭包允许我们定义一个供私人使用的函数，同时仍然允许我们控制世界其他地方所看到的内容。闭包还能做什么？

使用闭包进行元编程

在生成代码时，闭包非常方便。厌倦了记住键盘事件的所有那些烦人的键代码？一种常见的技术是使用键映射：

var KeyMap = {
	"Enter":13,
	"Shift":16,
	"Tab":9,
	"LeftArrow":37
};

登入後複製

然后，在键盘事件中，我们要检查是否按下了某个键：

var txtInput = document.getElementById('myTextInput');
txtInput.onkeypress = function(e) {
	var code = e.keyCode || e.which //usual fare for getting the pressed key
	if (code === KeyMap.Enter) {
	    console.log(txtInput.value);
	}
}

登入後複製

捕捉瞬间

上面的例子并不是最糟糕的，但是我们可以使用元编程和闭包来做出更好的解决方案。使用我们现有的 KeyMap 对象，我们可以生成一些有用的函数：

for (var key in KeyMap) {

	//access object with array accessor to set "dyanamic" function name
	KeyMap["is" + key] = (function(compare) {
		return function(ev) {
			var code = ev.keyCode || ev.which;
			return code === compare;
		}
	})(KeyMap[key]);

}

登入後複製

闭包非常强大，因为它们可以捕获定义它们的函数的局部变量和参数绑定。

此循环为 KeyMap 中的每个键生成一个 is 函数，并且我们的 txtInput.onkeypress 函数变得更具可读性：

var txtInput = document.getElementById('myTextInput');
txtInput.onkeypress = function(e) {
	if(KeyMap.isEnter(e)) {
		console.log(txtInput.value);
	}
}

登入後複製

魔法从这里开始：

KeyMap["is" + key] = (function(compare){
	
})(KeyMap[key]); //invoke immediately and pass the current value at KeyMap[key]

登入後複製

当我们循环 KeyMap 中的键时，我们将该键引用的值传递给匿名外部函数并立即调用它。这将该值绑定到该函数的 compare 参数。

我们感兴趣的闭包是我们从匿名函数内部返回的闭包：

return function(ev) {
	var code = ev.keyCode || ev.which;
	return code === compare;
}

登入後複製

请记住，函数是在定义函数时的作用域内执行的。 compare 参数绑定到循环迭代期间到位的 KeyMap 值，因此我们的嵌套闭包能够捕获它。我们及时拍摄当时有效范围的快照。

我们创建的函数允许我们在每次想要检查关键代码时跳过设置 code 变量，现在我们可以使用方便、可读的函数。

使用闭包扩展语言

至此，应该相对容易看出闭包对于编写一流的 JavaScript 至关重要。让我们应用我们对闭包的了解来增强 JavaScript 的一种原生类型（惊呼！）。我们将重点放在函数对象上，让我们增强本机 Function 类型：

Function.prototype.cached = function() {
	var self = this, //"this" refers to the original function
		cache = {}; //our local, lexically scoped cache storage
	return function(args) {
		if(args in cache) return cache[args];
		return cache[args] = self(args);
	};
};

登入後複製

这个小宝石允许任何函数创建其自身的缓存版本。您可以看到该函数返回一个函数本身，因此可以像这样应用和使用此增强功能：

Math.sin = Math.sin.cached();
Math.sin(1) // => 0.8414709848078965
Math.sin(1) // => 0.8414709848078965 this time pulled from cache

登入後複製

注意发挥作用的结束技巧。我们有一个本地 cache 变量，该变量保持私有并与外界屏蔽。这将防止任何可能使我们的缓存失效的篡改。

返回的闭包可以访问外部函数的绑定，这意味着我们能够返回一个可以完全访问内部缓存以及原始函数的函数！这个小函数可以为性能带来奇迹。这个特定的扩展被设置为处理一个参数，但我很想看到您对多参数缓存函数的尝试。

野外关闭

作为额外的好处，让我们看一下闭包的一些实际用途。

jQuery

有时，著名的 jQuery $ 工厂不可用（例如 WordPress），而我们希望以通常的方式使用它。我们可以使用闭包来允许内部函数访问我们的 $ 参数绑定，而不是使用 jQuery.noConflict。

(function($){
	$(document).ready(function(){
		//business as usual....
	});
})(jQuery);

登入後複製

骨干.js

在大型 Backbone.js 项目中，将应用程序模型设为私有，然后在主应用程序视图上公开一个公共 API 可能会更有利。使用闭包，您可以轻松实现此隐私。

(function(exports){

var Product = Backbone.Model.extend({
    urlRoot: '/products',
});

var ProductList = Backbone.Collection.extend({
    url: '/products',
    model: Product
});

var Products = new ProductList;

var ShoppingCartView = Backbone.View.extend({

    addProduct: function (product, opts) {
        return CartItems.create(product, opts);
    },

    removeProduct: function (product, opts) {
        Products.remove(product, opts);
    },

    getProduct: function (productId) {
        return Products.get(productId);
    },

    getProducts: function () {
        return Products.models;
    }
});

//export the main application view only
exports.ShoppingCart = new ShoppingCartView;

})(window);

登入後複製