JavaScript クロージャ パート 3: クロージャの使用法

実際に使用すると、クロージャは非常にエレガントなデザインを作成でき、funarg で定義されたさまざまな計算方法をカスタマイズできます。以下は配列のソートの例です。これはパラメーターとしてソート条件関数を受け入れます:

[1, 2, 3].sort(function (a, b) {
  ... // 排序条件
});

同じ例では、関数で定義された条件に従って、配列のマップ メソッドが元の配列を新しい配列にマップします。

[1, 2, 3].map(function (element) {
  return element * 2;
}); // [2, 4, 6]

関数パラメータを使用すると、検索メソッドを簡単に実装し、無制限の検索条件をサポートできます:

someCollection.find(function (element) {
  return element.someProperty == 'searchCondition';
});

また、関数を各配列要素に適用する一般的な forEach メソッドなどのアプリケーション関数もあります:

[1, 2, 3].forEach(function (element) {
  if (element % 2 != 0) {
    alert(element);
  }
}); // 1, 3

ちなみに、関数オブジェクトの apply メソッドや call メソッドは、関数プログラミングのアプリケーション関数としても使用できます。 ここでは、それらをアプリケーション関数とみなします - パラメータに適用される関数 (apply ではパラメータリスト、call では独立したパラメータです):

(function () {
  alert([].join.call(arguments, ';')); // 1;2;3
}).apply(this, [1, 2, 3]);

クロージャには別の非常に重要なアプリケーションがあります - 遅延呼び出し:

var a = 10;
setTimeout(function () {
  alert(a); // 10, after one second
}, 1000);

そしてコールバック関数:

//...
var x = 10;
// only for example
xmlHttpRequestObject.onreadystatechange = function () {
  // 当数据就绪的时候，才会调用;
  // 这里，不论是在哪个上下文中创建
  // 此时变量“x”的值已经存在了
  alert(x); // 10
};
//...

カプセル化されたスコープを作成してヘルパー オブジェクトを非表示にすることもできます:

var foo = {};
 
// 初始化
(function (object) {
 
  var x = 10;
 
  object.getX = function _getX() {
    return x;
  };
 
})(foo);
 
alert(foo.getX()); // 获得闭包 "x" – 10

概要

この記事では、ECMAScript-262-3 に関するより理論的な知識を紹介します。これらの基本理論は、ECMAScript のクロージャーの概念を理解するのに役立つと思います。 。

上記は JavaScript クロージャ パート 3: クロージャの使用法に関する内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。