JSクロージャの特徴分析-jsチュートリアル-php.cn

JSクロージャの特徴分析

小云云

リリース： 2018-03-06 13:55:49

オリジナル

1687 人が閲覧しました

bodyタグ内にidノードを持つuタグを追加し、ulタグの下にliタグが5つあります。別の li タグをクリックしたときに li 添字をポップアップするにはどうすればよいですか?
1) まず、ul ノードを取得する必要があります var node = document.getElementsById('node')
2) ノードの下の子ノードを取得します node var list = node.children
**3) onclick イベントを子に追加しますループ内のノード (クロージャの問題が発生することに注意してください)。 for（var i=0;ilist[i].onclick = function()console.log(i)}} の出力は 7 であることがわかります。時間。 **
4) 出力 7 を分析します。i は var を使用してグローバル変数として宣言されているため、同じアドレスを指します。ループの実行後、i の値は 7 なので、各ループで出力される結果は 7 になります
これを解決するには 2 つの方法を使用します。1) ブロックレベルのスコープ変数を宣言し、渡すたびに let j = i を使用します。私は受け取ります。

let j = i; 
list[i].onclick = function(){console.log(j)}

ログイン後にコピー

function メソッドでは、ブロックレベル変数 j が呼び出されます。この変数はガベージコレクションされません。各 for ループは異なるアドレスを指すため、クリックイベントがトリガーされると、その添え字が正しく出力されます。 2) クロージャを使用して問題を解決します。

list[i].onclick = function(i){ 
return function(){console.log(i)}。 
}

ログイン後にコピー

**クロージャの解釈
クロージャは、他の関数の内部変数を読み取ることができる関数です。 JavaScript 言語では、関数内のサブ関数のみがローカル変数を読み取ることができます。クロージャは、単純に「関数内で定義された関数」として理解できます。基本的に、クロージャは関数の内部と関数の外部を接続するブリッジです。

注: クロージャを使用すると、関数内の変数がメモリに保存され、大量のメモリを消費します。そのため、Web ページでパフォーマンスの問題が発生したり、IE ブラウザでメモリリークが発生したりする可能性があるクロージャを悪用することはできません。。。最後の解決策は、関数を終了する前に未使用のローカル変数をすべて削除することです。

他の人の例を使用します。ご参考までに

var name = "this window";
var object = {
    name :"my object",
    getNameFunc:function () {
        return function () {
            return this.name;
        }
    }
}
alert(object.getNameFunc()());/弹出this window2 。此时this对象指向window对象
var object2 = {
    name: "my object",
    getNameFunc2: function () {
        var that = th is;
        return function () {
            return that.name;
        }
    }
}
alert(‘that’+object2.getNameFunc2()()); ///弹出my object。此时this对象指向object2对象

ログイン後にコピー