JavaScript で「var self = this」を使用する理由

JavaScript イディオム: 「var self = this」を理解する

「var self = this;」イディオムは、JavaScript コード、特にイベント ハンドラーでよく見られます。これにより、ネストされた関数内またはイベント ハンドラー クロージャ内で元の "this" オブジェクトへの参照を維持できます。

コンストラクターまたはオブジェクト内で関数を定義すると、実行コンテキストが変更され、"this" が参照されます。非厳密モードでグローバル オブジェクト (ウィンドウ) に送信します。 strict モードでは、「this」は未定義になります。これを回避するために、開発者は「var self = this」を使用して元のオブジェクトへの参照を保持します。

「var self = this」を使用する理由

WebKit の HTML5 SQL Storage Notes デモの次の例:

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

このコードでは、「self」がコンストラクター内の「this」。これにより、イベント ハンドラーが呼び出されたとき (たとえば、「note」 div をクリックしたとき)、「this」は引き続き元の Note オブジェクトを参照し、「onMouseDown」のようなメソッドを正しく呼び出すことができるようになります。

「var self = this」は一般的ですか?

はい、このイディオムは、特に次の場合に JavaScript アプリケーションで広く使用されています。クロージャとイベントハンドラを扱います。これにより、開発者はネストされた関数内で元のコンテキストへの参照を維持できます。

代替アプローチ

「var self = this」は効果的ですが、混乱を招く可能性があります。読む。別のアプローチは、周囲のコンテキストの「this」バインディングを保持するアロー関数 (ES6 で導入) を使用することです。

例:

function Note() {
  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', (e) => { this.onMouseDown(e) });
  note.addEventListener('click', () => { this.onNoteClick() });
  this.note = note;
  // ...
}

注:

「var self = this」の使用は現在非推奨です。これは、次のものが存在するためにエラーが発生する可能性があるためです。 「ウィンドウ.セルフ」。 「この」バインディングを維持するには、アロー関数または他の代替手段を使用することをお勧めします。

以上がJavaScript で「var self = this」を使用する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。