jsクロージャとプロトタイプのアプリケーションコードを詳しく解説

1. クロージャ

js におけるクロージャは関数 (閉じたパッケージ構造または外界に開かれていない空間) です

1. クロージャが解決する必要がある問題

• は関数外では関数内のデータにアクセスできない

• 解決すべき問題は関数内のデータに外部から間接的にアクセスする必要があるということ

2. 基本構造

 function outer(){
        var data = "数据";        return function(){
            return data;
        }
    }

rreee

3.クロージャ

1) クロージャを使用してタイマーの問題を解決します

 function outer(){
    var data = "数据";     return {
         getData:function(){
             return data;
         },
         setData:function(value){
             data = value;             return data;
         }
     }
 }

例:

由于js是单线程执行的，会先执行主任务，然后执行次要任务(包括setTimeOut和setInterval中的回调函数中的代码)

は期待どおりに 1 ～ 10 を出力しませんが、for ループの実行後に setTimeout コールバック関数が実行されるため、10 10 を出力します。時間が経過すると実行されます

解決策:

for(var i = 0 ; i < 10; i++){
    setTimeout(function(){
         console.log(i);
     },0);
 }

出力は 1 2 3 です

2) クロージャを使用して環境を保存します

クロージャは同じ関数定義を共有しますが、異なる字句環境を保存します

 for(var i = 0; i< 3; i++){   function foo(j){
        return function(){
            console.log(j);
        };
    }    var f = foo(i);
    setTimeout(f, 0);
}

クリックするとテキストが12、14、16に変わります

ただし、書き方を変えると、

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}var size12 = makeSizer(12);var size14 = makeSizer(14);var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

このように書くと、最初の文字列以降は同じ語彙環境を共有するため、テキストのサイズは12になります。 1 つが実行され、後続と前のものが同じ語彙環境を共有します

3) オブジェクトまたはクラスを作成するときにクロージャを使用します

新しいオブジェクトまたはクラスを作成するとき、メソッドは通常、オブジェクトのプロトタイプではなく、オブジェクトのプロトタイプに関連付けられる必要があります。オブジェクトのコンストラクターで定義されています。その理由は、これにより、コンストラクターが呼び出されるたびに (つまり、すべてのオブジェクトが作成されるたびに) メソッドが再割り当てされるためです。

たとえば、次のように書くことができます:

function makeSizer(size) {
    document.body.style.fontSize = size + 'px';
}

2. プロトタイプ

関連する推奨事項:

js クロージャーの使用方法の詳細な説明 - js チュートリアル

詳細な紹介Javascript クロージャーの分析とコード実装メソッド

以上がjsクロージャとプロトタイプのアプリケーションコードを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。