この記事では、JavaScriptクロージャーの概念と使用法を分析します。参照のためにそれを共有してください。詳細は次のとおりです。
閉鎖に関しては、誰もが聞いたことがあると思います。以下の私の簡単な理解を教えてください。
正直に言うと、毎日の仕事で手動で閉鎖を書くためのシナリオは多くありませんが、プロジェクトで使用されるサードパーティのフレームワークとコンポーネントは多かれ少なかれ閉鎖を使用しています。
したがって、閉鎖を理解することが非常に必要です。 hehe ...
1。閉鎖とは何ですか
要するに、それは他の関数内の変数を読み取ることができる関数です。
JS変数の範囲により、内部変数に外部からアクセスすることはできず、外部変数は外部からなる可能性があります。
2。シナリオを使用します
1.プライベートメンバーを実装します。
2。グローバル変数の汚染を避けるために、名前空間を保護します。
3.キャッシュ変数。
まず、カプセル化の例を見てみましょう。
次のようにコードをコピーします：var person = function（）{
//変数のスコープは関数内にあり、外部でアクセスできません
var name = "default";
戻る {
getName：function（）{
返品名;
}、
setName：function（newName）{
name = newName;
}
}
}（）;
console.log（person.name）; //直接アクセス、結果は次のとおりです
console.log（person.getName（））; //結果は次のとおりです。デフォルト
console.log（person.setname（ "langjt"））;
console.log（person.getName（））; //結果は次のとおりです
ループの一般的な閉鎖を見て、外部変数を参照する問題を解決しましょう。
コードコピーは次のとおりです。varali = document.getElementsByTagname（ 'li'）;
for（var i = 0、len = ali.length; i <len; i ++）{
ali [i] .onclick = function（）{
アラート（i）; //クリックする要素に関係なく、ポップアップ値はレンであり、ここでの私の値と私が印刷した値が同じであることを示しています。
};
}
閉鎖を使用した後：
コードコピーは次のとおりです。varali = document.getElementsByTagname（ 'li'）;
for（var i = 0、len = ali.length; i <len; i ++）{
ali [i] .onclick =（function（i）{
return function（）{
アラート（i）; //この時点で<li>要素をクリックすると、対応する添え字がポップアップします。
}
}）（私）;
}
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）{
return function（num）{
console.log（num）;
}
}
var f = new foo（9）;
f（）; // 未定義
実際、上記の使用法は関数カレーと呼ばれます。これは、複数のパラメーターを受け入れる関数を単一のパラメーター（元の関数の最初のパラメーター）を受け入れる関数に変換し、残りのパラメーターを受け入れて結果を返す関数を返す手法です。本質的に、次のような閉鎖をキャッシュできる機能も利用します。
次のようにコードをコピーします：var adder = function（num）{
return function（y）{
num+yを返します。
};
};
var inc = add（1）;
var dec = add（-1）;
// inc、decは2つの新しい関数になりました。
Alert（Inc（99））; // 100
アラート（12月（101））; // 100
アラート（Adder（100）（2））; // 102
アラート（Adder（2）（100））; // 102
たとえば、Alibaba YuboのSeajsソースコード：
次のようにコードをコピーします：/**
* util -lang.js-最小言語の強化
*/
関数ISTYPE（タイプ）{
return function（obj）{
return {} .toString.call（obj）== "[object" + type + "]"
}
}
var isobject = istype（ "object"）;
var isstring = istype（ "string"）;
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。