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

php是最好的语言
リリース: 2018-08-10 16:35:09
オリジナル
2026 人が閲覧しました

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クロージャとプロトタイプのアプリケーションコードを詳しく解説

関連する推奨事項:

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

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!