JavaScript の this キーワードは、通常の関数とアロー関数で動作が異なるため、混乱を招く可能性があります。このブログ投稿では、これが両方のタイプの関数でどのように機能するかを説明し、これらの違いが存在する理由を探り、JavaScript でこれを理解するために必要な基本知識を提供します。

通常の関数

JavaScript の通常の関数は、function キーワードを使用して定義されます。これらの関数の this の値は、関数の呼び出し方法によって異なります。以下にいくつかの例を示します:

1. グローバルコンテキスト

• 非厳密モード:

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

  regularFunction(); // Logs the global object (window in browsers)

• 説明: 非厳密モードでは、関数がグローバル コンテキスト (オブジェクトのメソッドとしてではなく) で呼び出される場合、これはグローバル オブジェクト (ブラウザーのウィンドウまたはノードのグローバル) を参照します。 .js).

  • 厳密モード:

  'use strict';

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

  regularFunction(); // Logs undefined

• 説明: 厳密モードでは、関数がグローバル コンテキストで呼び出されるとき、これは未定義のままであり、グローバル オブジェクトへの偶発的な変更を防ぐことでより安全な環境を提供します。

2. メソッド呼び出し

関数がオブジェクトのメソッドとして呼び出された場合、これはそのオブジェクトを参照します。

• 例：

  const obj = {
      method: function() {
          console.log(this);
      }
  };

  obj.method(); // Logs obj

• 説明: この場合、関数は obj のメソッドとして呼び出されるため、これは obj を指します。

  • 厳密モード: 動作は厳密モードでも同じです。

3. コンストラクター呼び出し

関数がコンストラクターとして使用される場合 (new キーワードで呼び出される)、これは新しく作成されたインスタンスを参照します。

• 例：

  function Person(name) {
      this.name = name;
      this.sayHello = function() {
          console.log(`Hello, my name is ${this.name}`);
      };
  }

  const person1 = new Person('Alice');
  person1.sayHello(); // Logs "Hello, my name is Alice"

  const person2 = new Person('Bob');
  person2.sayHello(); // Logs "Hello, my name is Bob"

• 説明: new で呼び出された場合、Person コンストラクター関数内の this は、作成される新しいインスタンスを参照します。新しいインスタンス (person1 と person2) はそれぞれ、独自の name プロパティと SayHello メソッドを取得します。

  • 厳密モード: 動作は厳密モードでも同じです。

4. 明示的なバインディング

呼び出し、適用、またはバインドを使用してこれを明示的にバインドできます。

• 例：

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

  const obj = { value: 42 };

  regularFunction.call(obj);  // Logs obj
  regularFunction.apply(obj); // Logs obj

  const boundFunction = regularFunction.bind(obj);
  boundFunction();            // Logs obj

• 説明: call and apply は、この関数を obj に設定して即座に呼び出しますが、bind はこれを obj に永続的にバインドした新しい関数を作成します。

  • 厳密モード: 動作は厳密モードでも同じです。

アロー関数

アロー関数には、独自の this コンテキストがありません。代わりに、周囲の (語彙) スコープからこれを継承します。これにより、特定の状況で矢印関数が便利になります。

1. 語彙的これ

アロー関数は、定義されているスコープからこれを継承します。

• 非厳密モード:

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs the global object (window in browsers)

• 説明: アロー関数には独自の this がありません。彼らはこれを周囲のスコープから使用します。ここでは、関数がグローバル スコープで定義されているため、グローバル オブジェクトを参照します。

  • 厳密モード:

  'use strict';

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs undefined

• 説明: 厳密モードでは、周囲のスコープがグローバルの場合、これは周囲のスコープから継承されたものとして未定義のままになります。

2. メソッド呼び出し

通常の関数とは異なり、アロー関数はメソッドとして呼び出されたときに独自の this を取得しません。これらは、これを囲んでいるスコープから継承します。

• 例：

  const obj = {
      method: () => {
          console.log(this);
      }
  };

  obj.method(); // Logs the global object (window in browsers) or undefined in strict mode

• 説明: アロー関数は独自の this をバインドしませんが、字句スコープから継承します。この例では、これは、obj.

  ではなく、グローバル オブジェクト、または厳密モードの未定義を参照します。
  • 厳密モード: obj ではなく、未定義のログを記録します。

3. 別の関数内のアロー関数

アロー関数が別の関数内で定義されている場合、その関数は外側の関数からこれを継承します。

• 例：

  function outerFunction() {
      const arrowFunction = () => {
          console.log(this);
      };

      arrowFunction();
  }

  const obj = { value: 42, outerFunction: outerFunction };

  obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction

• 説明: この場合、アロー関数内の this は、outerFunction と同じ this (obj.

  ) を参照します。
  • 厳密モード: 動作は厳密モードでも同じです。

4. イベントハンドラーのアロー関数

イベント ハンドラーのアロー関数は、イベントをトリガーする要素ではなく、周囲の字句スコープからこれを継承します。

• 例：

  const button = document.querySelector('button');

  button.addEventListener('click', () => {
      console.log(this);
  }); // Logs the global object (window in browsers) or undefined in strict mode

• 説明: アロー関数はこれをボタン要素にバインドしません。周囲のスコープ (グローバル スコープ、または厳密モードでは未定義) から継承します。

  • 厳密モード: ボタン要素ではなく、未定義のログを記録します。

なぜこのような違いがあるのでしょうか?

通常の関数とアロー関数の違いは、これをどのように処理するかにあります。

• 通常の関数: この値は動的であり、呼び出しサイト (関数の呼び出し方法) によって決定されます。
• アロー関数: this の値は字句であり、関数の定義時に、周囲の実行コンテキストの this 値に基づいて設定されます。

理解すべき重要な概念

JavaScript での this の動作を理解するには、次の概念を理解する必要があります:

1. 実行コンテキスト: コードが実行されるコンテキスト。これがどのように決定されるかに影響します。
2. Call-site: 関数が呼び出されるコード内の場所。通常の関数での this の値に影響します。
3. 字句スコープ: これが周囲のスコープからアロー関数でどのように継承されるか。
4. 厳密モード: 厳密モードが特定のコンテキストでのデフォルトの動作をどのように変更するか。

まとめ

• 通常の関数: これは動的であり、呼び出しサイトによって決定されます。
• アロー関数: これは字句的であり、関数の定義時に周囲のスコープによって決定されます。

これらの違いを理解すると、より予測可能で保守しやすい JavaScript コードを作成するのに役立ちます。通常の関数を使用しているかアロー関数を使用しているかに関係なく、これがどのように機能するかを知ることは、効果的な JavaScript 開発にとって非常に重要です。