JavaScript の this キーワードは、新しい開発者にとって最もわかりにくい概念の 1 つである可能性があります。その値は使用される場所に応じて変化する可能性があるため、さまざまなコンテキストでの動作を理解することが重要になります。この記事では、さまざまなシナリオでの this キーワードの使用法を調査することで、このキーワードの謎を解き明かします。

これは何ですか？

JavaScript では、関数が実行されるコンテキストを指します。これは、オブジェクト自体の内部からオブジェクトのプロパティとメソッドにアクセスする方法を提供します。

グローバルコンテキスト

グローバル コンテキスト (関数またはオブジェクトの外側) で使用される場合、これはグローバル オブジェクトを指します。 Web ブラウザでは、グローバル オブジェクトは window.
です。

console.log(this); // In a browser, this will log the window object

関数コンテキスト

関数内で使用する場合、これは関数の呼び出し方法によって異なります。

通常の関数呼び出し

通常の関数呼び出しでは、これはグローバル オブジェクト (厳密モードでは未定義) を参照します。

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

showThis(); // Logs window (or undefined in strict mode)

メソッド呼び出し

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

const person = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

person.greet(); // Logs "Alice"

コンストラクターコンテキスト

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

function Person(name) {
  this.name = name;
}

const bob = new Person('Bob');
console.log(bob.name); // Logs "Bob"

アロー関数

アロー関数の動作は異なります。彼らは独自の this コンテキストを持っていません。代わりに、周囲の語彙コンテキストからこれを継承します。

const obj = {
  name: 'Carol',
  regularFunction: function() {
    console.log(this.name);
  },
  arrowFunction: () => {
    console.log(this.name);
  }
};

obj.regularFunction(); // Logs "Carol"
obj.arrowFunction();   // Logs undefined (or the global object in non-strict mode)

イベントハンドラ

イベント ハンドラーでは、イベントを受信した要素を指します。

document.getElementById('myButton').addEventListener('click', function() {
  console.log(this); // Logs the button element
});

明示的なバインディング

JavaScript は、call、apply、bind を使用して this の値を明示的に設定するメソッドを提供します。

電話して申し込む

call メソッドと apply メソッドを使用すると、この値を指定して関数を呼び出すことができます。

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

const person = { name: 'Dave' };

introduce.call(person); // Logs "Hello, my name is Dave"
introduce.apply(person); // Logs "Hello, my name is Dave"

call と apply の違いは、引数の処理方法です。 call は引数を個別に受け取りますが、apply は引数を配列として受け取ります。

練る

バインド メソッドは、呼び出されたときに this 値が指定された値に設定される新しい関数を作成します。

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

const person = { name: 'Eve' };

const boundIntroduce = introduce.bind(person);
boundIntroduce(); // Logs "Hello, my name is Eve"

結論

JavaScript をマスターするには、this キーワードを理解することが不可欠です。これがさまざまなコンテキストでどのように動作するかを認識することで、より予測可能で保守しやすいコードを作成できます。メソッド、コンストラクター、またはアロー関数を使用しているかどうかに関係なく、これがどのように動作するかを知っていれば、よくある落とし穴を回避し、その能力を効果的に利用するのに役立ちます。