jsクロージャの使い方を詳しく解説_基礎知識

クロージャの使用法を見てみましょう。実際、クロージャを使用すると、さまざまなことができます。たとえば、オブジェクト指向のコーディング スタイルをシミュレートし、コードをよりエレガントかつ簡潔に表現し、いくつかの側面でコードの実行効率を向上させることができます。

1 匿名の自己実行関数

変数はすべてわかっています。var キーワードを追加しない場合、それらはデフォルトでグローバル オブジェクトのプロパティに追加されます。このような一時変数をグローバル オブジェクトに追加すると、多くの欠点があります。 たとえば、他の関数がこれらの変数を誤用する可能性があり、グローバル オブジェクトが大きすぎてアクセス速度に影響を与える可能性があります (変数の値をプロトタイプ チェーンからトラバースする必要があるため)。
変数を使用するたびに var キーワードを使用することに加えて、実際の状況ではこのような状況によく遭遇します。つまり、一部の関数は一度実行するだけでよく、その内部変数は維持する必要がありません。 たとえば、UI の初期化にはクロージャを使用できます:

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

var datamodel = {

テーブル: []、
ツリー: {}
};

(関数(dm){
for(var i = 0; i < dm.table.rows; i ){
var row = dm.table.rows[i]; for(var j = 0; j drawCell(i, j);                                                                     }

// dm.tree を構築
})(データモデル);



内部の変数は外部から参照できないため、匿名関数を作成し、すぐに実行します。 したがって、重要なのは、このメカニズムがグローバル オブジェクトを汚染しないことです。

2 キャッシュ

別の例を見てみましょう。各呼び出しの処理に非常に時間がかかる関数オブジェクトがあるとします。

次に、この関数を呼び出すときに、計算された値を保存する必要があります。見つからない場合は、次に計算します。
次に、キャッシュを更新し、値が見つかった場合は、見つかった値を直接返します。クロージャは外部参照を解放しないため、まさにこれを行います。

したがって、関数内の値を保存できます。

コードをコピー

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

var CachedSearchBox = (function(){
var キャッシュ = {}、
カウント = []; リターン {
AttachSearchBox: function(dsid){
if（dsid in cache）{//結果がキャッシュにある場合 キャッシュを返す [dsid] // キャッシュ内のオブジェクトに直接戻ります
                                                                        var fsb = new uikit.webctrl.SearchBox(dsid);//New
cache[dsid] = fsb;//キャッシュを更新 If (count.length & gt; 100) {// キャッシュのサイズ = 100
cache [count.shift（）]を削除します。                                                                         return fsb; }、
Clearsearchbox: 関数 (DSID) {
If(キャッシュ内の DSID){
キャッシュ[dsid].clearSelection();                                                                                                                                               };
})();

CachedSearchBox.attachSearchBox("input1");


このようにして、CachedSearchBox.attachSerachBox("input1") を 2 回目に呼び出すと、
新しい検索ボックス オブジェクトを作成せずに、キャッシュからオブジェクトを取得できます。

3 カプセル化を実装する

まず、カプセル化の例を見てみましょう。内部変数には外部からアクセスできませんが、クロージャを提供することでアクセスできます。

コードをコピーします

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

var person = function(){

//変数スコープは関数内にあり、外部からはアクセスできません

変数名 = "デフォルト" 変数名

; リターン { getName : function(){ 名前を返す; }、 setName : function(newName){ name = newName;                                                                     } }(); print(person.name);//直接アクセス、結果は未定義 print(person.getName()); person.setName("アブルッツィ"); print(person.getName());

結果は次のようになります:

未定義
デフォルト
アブルッツィ

4 クロージャのもう 1 つの重要な用途は、オブジェクト指向でオブジェクトを実装することです。従来のオブジェクト言語は、クラス テンプレート メカニズム
を提供します。 このように、異なるオブジェクト (クラスのインスタンス) は独立したメンバーと状態を持ち、互いに干渉しません。 JavaScriptにはクラスのような仕組みはありませんが、クロージャを利用することで
このようなメカニズムをシミュレーションすることができます。上の例を見てみましょう:





コードをコピー


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

関数 人(){
変数名 = "デフォルト" 変数名
;
リターン {
getName : function(){ 名前を返す; }、 setName : function(newName){ name = newName;                                                                        }
};


var john = 人()
print(john.getName()); john.setName("ジョン"); print(john.getName());
var jack = 人(); print(jack.getName()); jack.setName("ジャック"); print(jack.getName());


実行結果は次のとおりです:

デフォルト
ジョン
デフォルト
ジャック
このコードから、john と jack の両方を Person クラスのインスタンスと呼ぶことができることがわかります。これは、2 つのインスタンスが name メンバーに独立してアクセスでき、相互に影響を与えないためです。

上記は js クロージャーの機能です。非常にシンプルでわかりやすいので、友達に役立つと幸いです。