前から後ろへの開閉-jsチュートリアル-php.cn

JavaScript の分野では、クロージャは神秘的な芸術とみなされます。これらをマスターすれば、本当に素晴らしい JavaScript を作成できるようになります。この記事では、JavaScript クロージャの魅力を簡単に紹介します。

クロージャとは何ですか?

JavaScript の重要な事実の 1 つは、everything がオブジェクトであるということです。もちろんこれには機能性も含まれます。

クロージャは、関数の変数が解決される関連スコープを持つ関数オブジェクトにすぎません。

クロージャは、内容によって 閉じられる方法に基づいて名前が付けられます。次の JavaScript コードを考えてみましょう: リーリー

お気に入りのコンソールを起動して、あの悪役を実行すると、「このピザはすべてペパロニです...ただし、ハムを 3 枚のスライスに乗せてください。」という旨のおいしいメッセージが表示されます。この例では、いくつかの重要な概念を示しています。クロージャを使いこなすには欠かせないJavaScript。

クロージャは関数オブジェクトです

上記のコードには関数オブジェクトがいくつありますか?そうですね...

pizzaParty 関数があり、その関数内に innerFunction がネストされています。数学は必ずしも私の得意分野ではありませんが、私の本では 1 1 = 2 です。各関数オブジェクトには独自の変数セットがあり、各関数の スコープ で解決されます。

クロージャには独自のスコープがあります

クロージャは、範囲内のしっかりした基礎がなければ完全に理解することはできません。 JavaScript のスコープメカニズムにより、各関数が独自の

topping 変数を持つことができます。これがないと、ピザパーティーでペパロニが多すぎたり、ハムが少なすぎたり、「息を呑んだり」する可能性があります。このアイデアをわかりやすく説明するために、簡単な例を使用してみましょう。

前から後ろへの開閉

関数は、関数が定義されたときに有効なスコープを使用して実行されます。関数が呼び出されるときの有効なスコープとは関係ありません。

変数ヘルパー関数は外部から動作します

緑色の矢印は、外側から内側へのアクセス可能性を示します。関数の外側のスコープで定義された変数には、関数内からアクセスできます。

pizzaParty 関数で topping 変数を省略すると、「このピザはアンチョビがすべてです」のようなメッセージが表示されますが、pizzaParty は独自のスコープ内に topping 変数があります。塩辛い愚か者は決して私たちのピザパーティーに近づきません。

同様に、

numSlices パラメーターは、上記のスコープ (この場合は pizzaParty のスコープ) で定義されているため、innerFunction の内部からアクセスできます。

可変アクセシビリティは内部からは機能しません

赤い矢印は、関数のスコープ内の変数がその関数の外部からアクセスできないことを示します。これは、変数が次の条件のいずれかを満たしている場合にのみ発生します:

var キーワードを使用しています。

変数を設定するときに

var キーワードを省略すると、JavaScript はグローバルスコープに至るまで、外部関数内で最も近い名前付き変数を設定します。したがって、この例を使用すると、innerFunction の ham topping には pizzaParty からアクセスできず、anchovi が存在するグローバルスコープでは pizzaParty# にアクセスできません。 トッピングのペパロニ。 JavaScript は字句スコープを使用します

字句スコープとは、関数が定義されたときに有効だった変数スコープを使用して関数が実行されることを意味します。関数が呼び出されるときの有効なスコープとは関係ありません。この事実は、クロージャの力を解き放つために非常に重要です。

クロージャとは何か、クロージャのスコープが何を意味するのかを理解したところで、いくつかの古典的な使用例を見てみましょう。

プライバシーを保護するためにクロージャを使用する

クロージャはコードを公開しないようにする

方法です。クロージャを使用すると、外部の世界から隔離されたプライベートメンバーを簡単に作成できます: リーリー

クロージャを使用すると、外部の世界から隔離されたプライベートメンバーを簡単に作成できるようになります。

分解してみましょう。最上位の関数オブジェクトは匿名関数です:

リーリー

この匿名関数をすぐに呼び出します。これにグローバルコンテキスト (この場合は

window

) を渡します。これにより、パブリック関数を「エクスポート」し、他の関数はすべて非表示にできます。関数 myPrivateMultiplyFunction はネストされた関数であるため、クロージャスコープ内にのみ存在し、このスコープ内のどこでも、このスコープ内でのみ使用できます。 JavaScript は乗算関数内で使用するためにプライベート関数への参照を保持しますが、クロージャ

myPrivateMultiplyFunction

の外側からはアクセスできません。これを試してみましょう: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;"> multiply(2,6) // => 12 myPrivateMultiplyFunction(2,6) // => ReferenceError: myPrivateMultiplyFunction is not defined </pre><div class="contentsignin">ログイン後にコピー</div></div> <p> 闭包允许我们定义一个供私人使用的函数，同时仍然允许我们控制世界其他地方所看到的内容。闭包还能做什么？</p> <hr> <h2>使用闭包进行元编程</h2> <p> 在生成代码时，闭包非常方便。厌倦了记住键盘事件的所有那些烦人的键代码？一种常见的技术是使用键映射：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;"> var KeyMap = { "Enter":13, "Shift":16, "Tab":9, "LeftArrow":37 }; </pre><div class="contentsignin">ログイン後にコピー</div></div> <p> 然后，在键盘事件中，我们要检查是否按下了某个键：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;"> 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); } } </pre><div class="contentsignin">ログイン後にコピー</div></div> <h3>捕捉瞬间</h3> <p> 上面的例子并不是最糟糕的，但是我们可以使用元编程和闭包来做出更好的解决方案。使用我们现有的 <code>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);

ログイン後にコピー