JavaScriptの「この」キーワードをマスターするための最終的な手順

javascriptの基本的な使用thisキーワードは、前の記事で説明されています。 thisポインティングの鍵はランタイムコンテキストです。ただし、コンテキストが期待を超えて変化すると、問題が発生します。この記事では、この状況とそれを解決する方法に焦点を当てます。

コアポイント

JavaScriptのキーワードは、現在の実行コンテキストを指しており、特にオブジェクト指向のプログラミングや
• に大きく依存しているフレームワークとライブラリを使用する場合、オブジェクトを操作および相互作用するためには不可欠です。 this this
キーワードの一般的な問題には、抽出された方法での使用、コールバック関数、閉鎖が含まれます。これらの問題は、
• メソッドを使用して正しいオブジェクトにthisキーワードを明示的にバインドすることで解決できます。 bind() thisecmascript 6は、直接囲まれた範囲から
値を取得する矢印関数を導入します。矢印関数の語彙結合を上書きすることはできないため、正しいコンテキストを維持するためのよりエレガントなソリューションになります。
• thisthisの値は、関数がどのように呼び出されるかに依存します。この方法では、
は、それが属するオブジェクトを指します。新しく作成されたオブジェクトを指します。
• this thisthisFAQを解くnewこのセクションでは、thisキーワードを使用するときに発生する最も一般的な問題のいくつかを調査し、それらを解決する方法を学びます。 this call() apply() 1 bind()this抽出方法を使用します 最も一般的な間違いの1つは、オブジェクトのメソッドを変数に割り当て、
が元のオブジェクトを指すことを期待することです。次の例に示すように、これは機能しません。

が

への参照であると思われていても、実際には

それ自体への別の参照にすぎません。コールの場所がコンテキストを決定することをすでに知っています。ここでは、コールの場所はthisであり、これは単純な関数呼び出しです。ベースのない関数（特定のオブジェクトに結合していない関数）を指していることを証明するには、コードの下部に

を追加するだけで、次の出力が表示されます。

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var getCarBrand = car.getBrand;

getCarBrand(); // 输出：undefined

getCarBrandには、1つの通常の関数のみが含まれていますが、これはもはやcarオブジェクトのメンバーメソッドではありません。したがって、この場合、this.brandは実際にはwindow.brandに変換されます。もちろん、未定義です。オブジェクトからメソッドを抽出すると、再び通常の関数になります。オブジェクトへの接続は遮断されており、予想どおりに機能しなくなりました。言い換えれば、抽出された関数は、それがとるオブジェクトに結合していません。では、どのようにそれを改善するのでしょうか？元のオブジェクトへの参照を保持したい場合は、getBrand()関数をgetCarBrand変数に割り当てるときに、getBrand()オブジェクトにcarオブジェクトに明示的にバインドする必要があります。 bind()メソッドを使用して実現できます。

function(){
  console.log(this.brand);
}

これで、正しい出力を取得します。これは、コンテキストがどのように見えるかについてのコンテキストを正常に再定義したためです。

コールバック関数で

を使用します this次の問題は、コールバック関数としてメソッド（引数としてを使用）を渡すときに発生します。たとえば、

this

var getCarBrand = car.getBrand.bind(car);
getCarBrand(); // 输出：Nissan

を使用しても、実際にボタンオブジェクトに添付された関数のみを取得します。パラメーターを関数に渡すことは暗黙の割り当てであるため、ここで起こることは、前の例とほぼ同じです。違いは、現在

が明示的な割り当てではなく、暗黙の割り当てであることです。結果はほぼ同じです - 私たちが得るのは、ボタンオブジェクトにバインドされた通常の関数です。言い換えれば、オブジェクト上でメソッドを実行すると、オブジェクトは元々メソッドを定義したオブジェクトとは異なり、car.getBrandキーワードは元のオブジェクトではなく、メソッドと呼ばれるオブジェクトを指します。この例を参照してください。getBrand()（ボタン要素）でcar.getBrand（ボタン要素）で実行します。したがって、thisはもはやelを指​​していませんが、car.getBrandを指​​します。元のオブジェクトへの参照を変更せずに保持する場合は、carメソッドを使用してthis関数をcarオブジェクトに明示的にバインドする必要があります。 el bind() getBrand()今、すべてが期待どおりに機能します。 car

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var el = document.getElementById("btn");
el.addEventListener("click", car.getBrand);

3

のコンテキストが間違っている可能性がある別の状況は、閉鎖内で

を使用することです。次の例を考えてみましょう： this ここでの出力は、閉鎖関数（内部関数）が外部関数の変数にアクセスできないためです。最終結果は、内部関数の

がグローバルオブジェクトに結合しているため、

はthisに等しいということです。この問題を解決するには、thisを

関数にバインドする必要があります。

el.addEventListener("click", car.getBrand.bind(car));

undefinedこのバインディングはthisに相当します。閉鎖を修正するもう1つの一般的な方法は、this.brand値を別の変数に割り当てることであり、したがって、予期しない変更を防ぐことです。 window.brand

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var getCarBrand = car.getBrand;

getCarBrand(); // 输出：undefined

ここで、this、_this、that、self、me、my、context、

、

、、に割り当てることができます。 、

、

、this、オブジェクトの仮名、またはあなたに合ったその他の名前。重要なのは、元のオブジェクトへの参照を保持することです。 this function=>ecmascript 6 this newの救助 var self = this;前の例では、いわゆる「語彙法

」が表示されます。

function(){
  console.log(this.brand);
}

値を別の変数に割り当てるときに表示されます。 ECMAScript 6では、新しい矢印関数でこれを実現するために、同様のエレガントなテクニックを使用できます。矢印関数は、

キーワードではなく、いわゆる「ファットアロー」演算子（）によって作成されます。通常の関数とは異なり、矢印関数は、直接囲まれたスコープからthis値を取得します。矢印関数の語彙結合は、演算子であっても上書きできません。次に、矢印関数を使用して

ステートメントを置き換える方法を見てみましょう。

this

• thisについて覚えておくべきこと
  他のメカニズムと同様に、
  • キーワードがいくつかの簡単なルールに従っています。それらをよく理解すれば、より自信を持ってメカニズムを使用できます。それでは、私たちが学んだことを簡単に見てみましょう（この記事と前の記事から）：
  次の場合、
  • グローバルオブジェクトを指します：
  最も外側のコンテキストでは、任意の関数ブロックの外側。
オブジェクトメソッドではない関数では
• 。 this オブジェクトコンストラクターではない関数の
。
• call() apply() bind()関数が親オブジェクトのプロパティと呼ばれる場合、thisは親オブジェクトを指します。 null this関数が呼び出された場合、
または
• またはnewを使用して、これらのメソッドに渡された最初のパラメーターをポイントします。最初のパラメーターがthisまたはオブジェクトではない場合、
はグローバルオブジェクトを指します。
• this
演算子を使用して関数を呼び出すと、

は新しく作成されたオブジェクトを指します。

this矢印関数を使用する場合（ECMAScript 6で導入）、

は語彙スコープに依存し、親オブジェクトを指します。

これらのシンプルで明確なルールを学習し、

が何を指し示すかを簡単に予測できます。それが望むものではない場合、それを修正するためにどのような方法を使用できるかがわかります。

thisthis概要

javascriptのthisキーワードは、マスターするのが難しい概念ですが、練習するだけでマスターすることができます。この記事と私の以前の記事があなたの理解の基礎として役立ち、次に頭痛を与えるときに貴重なリファレンスになることを願っています。

javascript faqs for keywords（faqs）

（FAQの部分は、長すぎて以前のコンテンツと非常に複製されているため、ここでは省略されています。FAQの部分は以前に詳細に説明されています。

以上がJavaScriptの「この」キーワードをマスターするための最終的な手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。