JavaScriptで「これ」とさまざまなシナリオでのその動作を理解する

JavaScriptの

キーワードに困惑したことはありますか？ あなたは一人ではありません！ そのニュアンスを把握することは、新しいスキルを学ぶようなものです。練習が必要ですが、それを手に入れると、すべてがクリックします。 このブログ投稿は、this>

this

？

​​とは何ですか JavaScriptでは、thisは関数が属するオブジェクトを表すキーワードです。 実行時にその値を決定することにより、再利用可能な動的関数を可能にします。 関数呼び出しのコンテキストは、の値を決定し、それを強力で時々混乱させます。

キーポイント：this this

はキーワードであり、変数ではありません。

。
• に値を直接割り当てることはできません thisその値は、実行時に動的に決定されます。
• this
実世界の類推：

博物館ツアーガイドとして想像してください。 美術館では、ガイドは美術館を表しています。歴史博物館では、歴史博物館を代表しています。 同様に、はそのコンテキストに適応します。 さまざまなシナリオで：

this：this

1。グローバルコンテキスト（デフォルトのバインディング）：this

外部関数、

はグローバルオブジェクトを指します。 これは、環境によって異なります：

ブラウザ（Strictモードなし）：this

は

オブジェクトです。
• node.js（厳密なモードなし）：thiswindowis
（空のオブジェクト）node.jsモジュールには独自のスコープがあるためです。
• 例：this{}

Strict Mode：Strict Modeでは、node.js.では

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

例：this window undefined

2。通常の機能内：

通常の関数では、

の値は関数の呼び出に依存します。

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

Strictモードなし：ブラウザでは、は

オブジェクトです。 node.jsでは、それはグローバルオブジェクトです。

this

厳密なモードで：

• is。 this window
例：
• thisundefined3。内部オブジェクトメソッド（暗黙的な結合）：

関数がオブジェクトのメソッドである場合、はそのオブジェクトを指します。

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

例：

4。矢印関数：this

矢印関数には独自のはありません。彼らは周囲の語彙範囲からそれを継承します

例：

<code class="language-javascript">const book = {
  title: 'JavaScript Mastery',
  showTitle: function() {
    console.log(this.title);
  }
};
book.showTitle(); // Output: JavaScript Mastery</code>

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

5。コンストラクター関数（新しいバインディング）：

newキーワードを使用して、thisは新しく作成されたオブジェクトを参照します。

例：

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

6。クラス：

ES6クラスでは、

コンストラクター関数と同様に動作します。this

例：

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

7。 、call()、apply()（明示的な結合）：bind()

これらの方法では、

。thisの明示的な設定が可能になります

• ：関数をすぐに呼び出し、引数を個別に渡します。call()
• ：apply()に似ていますが、引数を配列として渡します。 call()
：特定のオブジェクトにバインドされた新しい関数を返します。
• bind() this
例：

8。イベントリスナー：

<code class="language-javascript">const book = {
  title: 'JavaScript Mastery',
  showTitle: function() {
    console.log(this.title);
  }
};
book.showTitle(); // Output: JavaScript Mastery</code>

イベントリスナーでは、は通常、イベントをトリガーした要素を指します。

例：

this

優先順位の順序：

<code class="language-javascript">const techBook = {
  title: 'Advanced JavaScript',
  showTitle: function() {
    const arrowFunc = () => {
      console.log(this.title);
    };
    arrowFunc();
  }
};
techBook.showTitle(); // Output: Advanced JavaScript</code>

新しいバインディング 明示的なバインディング

暗黙的な結合
デフォルトのバインディング
3. 結論：

マスタリング

は、きれいでコンテキスト認識のJavaScriptを書くために重要です。 当初は挑戦的ですが、さまざまなシナリオでその動作を理解することで、より効果的で保守可能なコードを書くことができます。 練習が重要です！ 以下のコメント！で、であなたの経験を共有してください

以上がJavaScriptで「これ」とさまざまなシナリオでのその動作を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。