JavaScript の匿名関数と Closures_JavaScript スキルの詳細な説明

1. 匿名関数
関数は JavaScript で最も柔軟なオブジェクトです。ここでは、匿名関数の使用についてのみ説明します。無名関数：関数名のない関数です。

1.1 関数の定義、まず関数の定義を簡単に紹介します。大きく分けて 3 つの方法があります

最初のタイプ: これも最も一般的なタイプです

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

関数 double(x){
2 * x を返します。 }

2 番目の方法: このメソッドは Function コンストラクターを使用し、パラメーター リストと関数本体の両方を文字列として扱います。これは非常に不便なので、お勧めできません。

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

var double = new Function('x', 'return 2 * x;');

3 番目のタイプ:

var double = function(x) { return 2* x }

「=」の右側の関数は無名関数であることに注意してください。関数を作成した後、関数は変数 square に代入されます。

1.2 無名関数の作成

最初の方法は、上で述べたように二乗関数を定義することであり、これも最も一般的に使用される方法の 1 つです。

2 番目の方法:

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

(関数(x, y){
アラート(x y); })(2, 3);

ここ (最初の括弧内) で匿名関数が作成され、2 番目の括弧を使用して匿名関数を呼び出し、パラメーターを渡します。

2. 終了

クロージャを表す英語はクロージャです。クロージャは JavaScript の知識の非常に重要な部分です。クロージャを使用すると、コードの量が大幅に削減され、コードがより明確に見えるなどの効果があるためです。つまり、クロージャは非常に強力です。

クロージャの意味: 端的に言えば、クロージャは関数の入れ子です。たとえ外側の関数が実行されていても、内側の関数は外側の関数のすべての変数を使用できます (これには JavaScript スコープ チェーンが関係します)。

例 1

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

関数 checkClosure(){

var str = 'レインマン';
setTimeout(
function(){alert(str) } //これは匿名関数です
; 、2000);
}
checkClosure();

この例は非常に単純に見えますが、実行プロセスを注意深く分析すると、まだ多くの知識ポイントがあります。checkClosure 関数の実行は瞬時に行われ (おそらく 0.00001 ミリ秒しかかかりません)、変数 str が関数本体に作成されます。 setTimeout の匿名関数が str への参照を持っているため、 checkClosure の実行後に str は解放されません。 2 秒後、関数本体内の匿名関数が実行され、str が解放されます。

例 2、最適化されたコード

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

関数 forTimeout(x, y){

アラート(x y);
}
関数遅延(x, y, 時間){
setTimeout('forTimeout(' x ',' y ')' , 時間); }
/**
* 上記の遅延関数は非常に読みにくく、書くのも簡単ではありませんが、クロージャを使用すると、コードをより明確にすることができます
* 関数遅延(x, y, 時間){
* setTimeout(
* 関数(){
* forTimeout(x, y)
* *、時間);
* }
​*/



3. 例
匿名関数の最大の用途は、クロージャ (JavaScript 言語の機能の 1 つ) を作成することです。また、名前空間を構築してグローバル変数の使用を減らすこともできます。

例 3:

コードをコピー

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

var oEvent = {};
(関数(){
var addEvent = function(){ /*コードの実装は省略*/ };
関数removeEvent(){}

oEvent.addEvent = addEvent;
oEvent.removeEvent = 削除イベント;
})();

このコードでは、addEvent 関数とremoveEvent 関数はローカル変数ですが、グローバル変数 oEvent を通じてそれを使用できます。これにより、グローバル変数の使用が大幅に削減され、Web ページのセキュリティが強化されます。 次のコードを使用します: oEvent.addEvent(document.getElementById('box') , 'click' , function(){});

例 4:

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

var レインマン = (関数(x , y){
x y を返します;
})(2, 3);
/**
最初の括弧は読みやすくするだけなので、* は次の形式で記述することもできますが、次の記述形式は推奨されません。
* var レインマン = function(x, y){
* x y を返します;
* }(2, 3);
​*/

ここでは変数 Rainman を作成し、匿名関数を直接呼び出すことでそれを 5 に初期化します。この小さなトリックは場合によっては非常に実用的です。

例 5:

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

var external = null;
(関数(){
var one = 1;
関数内部 (){
1 = 1;
アラート(1);
}
外側 = 内側;
})();
アウター(); //2
アウター(); //3
アウター(); //4

このコードの変数 1 はローカル変数 (関数内で定義されているため) であるため、外部からアクセスできません。ただし、ここでは変数 one にアクセスできる inner 関数を作成し、グローバル変数 external は inner を参照するため、outer を 3 回呼び出すと増分結果がポップアップされます。

4. 注意
4.1 クロージャにより、内部関数は親関数内の変数を参照できますが、変数は最終値

例 6:

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

/**
 *
 *

 *
• 1

 *
• two

 *
• three

 *
• 1

 *

 */

var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i Lists[ i ].onmouseover = function(){
アラート(i); };
}

マウスを各

解決策 1:

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

var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i (関数(インデックス){
Lists[index].onmouseover = function(){
アラート(インデックス);                                                                      })(i);
}

解決策 2:

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

var lists = document.getElementsByTagName('li');
for(var i = 0, len = lists.length; i Lists[ i ].$$index = i //Dom 要素
に $$index 属性をバインドして添え字を記録します。 Lists[ i ].onmouseover = function(){
アラート(this.$$index); };
}

解決策 3:

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

関数eventListener(リスト, インデックス){
List.onmouseover = function(){
アラート(インデックス);
};
}
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i EventListener(lists[ i ] , i);
}

4.2 メモリリーク

クロージャを使用すると、ブラウザでメモリ リークが発生しやすくなり、深刻な場合にはブラウザがハングします。興味がある場合は、

http://www.jb51.net/article/57404 を参照してください。 html