从前到后的闭包

在 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 的范围。

变量可访问性无法从内到外发挥作用

红色箭头表明函数范围内的变量永远无法在该函数之外访问。仅当变量满足以下条件之一时才会出现这种情况：

1. 正在使用 var 关键字。
2. 变量是函数或外部函数的参数。
3. 该变量是一个嵌套函数。

设置变量时省略 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);

---

结论

快速回顾一下我们所学到的知识：

• 闭包只不过是一个具有作用域的函数对象。
• 闭包因其“关闭”其内容的方式而得名。
• 闭包在 JavaScript 的词法范围上带来了巨大的收益。
• 闭包是 JavaScript 中实现隐私的方式。
• 闭包能够捕获外部函数的局部变量和参数绑定。
• JavaScript 可以通过一些闭包魔法进行强大的扩展。
• 闭包可以与许多您喜爱的库一起使用，让它们变得更酷！

非常感谢您的阅读！随意问任何问题。现在让我们享受披萨派对吧！

以上就是从前到后的闭包的详细内容，更多请关注编程之家其它相关文章！