JavaScriptの「この」キーワードをマスターするための最終的な手順-jsチュートリアル-php.cn

The Final Steps to Mastering JavaScript's

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

コアポイント

に大きく依存しているフレームワークとライブラリを使用する場合、オブジェクトを操作および相互作用するためには不可欠です。 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);

ログイン後にコピー

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

を使用することです。次の例を考えてみましょう： 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