Javascript クロージャーの使用例分析_JavaScript スキル

この記事では、JavaScript クロージャーの概念と使用法を例とともに分析します。皆さんの参考に共有してください。詳細は以下の通りです。

クロージャについては、誰もが聞いたことがあるはずです。これが私の簡単な理解です。
正直に言うと、日常業務でクロージャを実際に手動で記述するシナリオはそれほど多くありませんが、プロジェクトで使用されるサードパーティのフレームワークやコンポーネントでは多かれ少なかれクロージャが使用されます。
したがって、クロージャを理解することが非常に必要です。はは…

1. クロージャとは

簡単に言うと、他の関数の内部変数を読み込める関数です。
JSの変数スコープの特性上、内部変数には外部からアクセスできませんが、外部変数には内部からアクセスできます。

2. 使用シナリオ

1. プライベートメンバーを実装します。
2. 名前空間を保護し、グローバル変数の汚染を避けます。
3. 変数をキャッシュします。

まずカプセル化の例を見てみましょう:

コードをコピー コードは次のとおりです。

var person = function () {
//変数のスコープは関数内にあり、外部からはアクセスできません
var name = "デフォルト";

リターン {
getName: function () {
名前を返します;
}、
setName: function (newName) {
name = newName;
}
}
}();

console.log(person.name); // 直接アクセスの場合、結果は次のようになります: unknown
console.log(person.getName()) // 結果は次のようになります:default
console.log(person.setName("langjt"));
console.log(person.getName()); // 結果は次のようになります: langjt

外部変数の参照の問題を解決するには、ループ内で一般的に使用されるクロージャを確認してください。

コードをコピー コードは次のとおりです:

var aLi = document.getElementsByTagName('li');
for (var i=0, len=aLi.length; i aLi[i].onclick = function() {
alert(i); // どの

要素をクリックしても、表示される値は len であり、ここでの i の値が for の後に出力される i の値と同じであることを示します。
};
}

クロージャーを使用した後:

コードをコピーします コードは次のとおりです:

var aLi = document.getElementsByTagName('li');
for (var i=0, len=aLi.length; i aLi[i].onclick = (function(i) {
戻り関数() {
alert(i); // この時点で

要素をクリックすると、対応する添え字がポップアップ表示されます。
}
})(i);
}

3. 注意事項

1. メモリリーク

クロージャを使用すると、関数内のすべての変数がメモリに格納され、大量のメモリを消費するため、クロージャを悪用することはできません。悪用しないと、Web ページでパフォーマンスの問題が発生します。
例:

コードをコピー コードは次のとおりです。

function foo() {
var oDiv = document.getElementById(‘J_DIV’);
var id = oDiv.id;
oDiv.onclick = function() {
//alert(oDiv.id); ここには循環参照があり、IE の低バージョン ページが閉じられた後も oDiv がメモリ内に残っています。したがって、可能な限りオブジェクトではなくプリミティブ型をキャッシュします。
アラート(id);
};
oDiv = null;
}

2. 変数の名前付け

内部関数の変数名と外部関数の変数名が同じ場合、内部関数は外部関数の同じ名前の変数を指すことができなくなります。
例:

コードをコピー コードは次のとおりです。

function foo(num) {
戻り関数(数値) {
コンソール.ログ(番号); }
}
var f = new foo(9);
f(); // 未定義

In fact, the above usage, the professional term is called function currying, is to transform a function that accepts multiple parameters into a function that accepts a single parameter (the first parameter of the original function), and returns the remaining parameters. New function technology that takes parameters and returns a result. Essentially, it also takes advantage of the caching feature of closures, such as:

Copy code The code is as follows:

var adder = function(num) {
Return function(y) {
          return num y;
};
};

var inc = adder(1);
var dec = adder(-1);
//inc, dec are now two new functions, their function is to convert the passed parameter value (/‐)1
alert(inc(99));//100
alert(dec(101));//100
alert(adder(100)(2));//102
alert(adder(2)(100));//102

Another example is Ali Yubo’s seaJS source code:

Copy code The code is as follows:

/**
 * util-lang.js - The minimal language enhancement
 */
function isType(type) {
return function(obj) {
Return {}.toString.call(obj) == "[object " type "]"
}
}

var isObject = isType("Object");
var isString = isType("String");

I hope this article will be helpful to everyone’s JavaScript programming design.