JavaScriptのthisって何this?

はじめに

こんにちは。kosukein38です。
JavaScriptでthisを書いて毎回これ何参照してるんだっけ?ってなるので、軽くまとめてみました。

覚えきれないので、主な使用方法のみまとめてあります。アロー関数中でのthisなど他の呼び出し方もあります。

対象者

• thisって何this?な人

内容

JavaScriptにおけるthisは、現在の実行コンテキストに依存する特別なキーワードです。
その値は、関数がどのように呼び出されるかによって異なってきます。

単独関数内のthis

単独関数が呼び出された場合（つまり、オブジェクトのメソッドとしてではなく）、thisはグローバルオブジェクト（ブラウザではwindow）を参照します。
ただし、strictモードではthisはundefinedになります。

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

sayHello();  // Window {...}

オブジェクトのメソッド内のthis

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

let obj = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

obj.sayHello();  // 'Hello, John'

コンストラクタ関数内のthis

JavaScriptにおいて、newキーワードを使って関数オブジェクトのインスタンスを生成する際、その関数をコンストラクタと呼びます。この場合、thisは新しく作成されたオブジェクトを参照します。

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

let john = new Person('John');
console.log(john.name);  // 'John'

イベントハンドラ内のthis

DOMイベントハンドラ内でthisは、イベントを発生させた要素を参照します。

button.addEventListener('click', function() {
  console.log(this);  // <button>...</button>
});

this値を明示的に設定して呼び出す方法

JavaScriptには、関数を呼び出すための特別なメソッドがあり、それらはcall(), apply(), bind()です。
これらのメソッドは、this値を明示的に設定するために使用されます。

call()

call()メソッドは、指定したthis値と個々の引数を使用して関数を呼び出します。

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

let person = { name: 'John' };

greet.call(person, 'Hello', '!');  // 'Hello, John!'

apply()

apply()メソッドもcall()と同様に、指定したthis値で関数を呼び出しますが、引数を配列として渡します。

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

let person = { name: 'John' };

greet.apply(person, ['Hello', '!']);  // 'Hello, John!'

bind()

bind()メソッドは新しい関数を作成し、その関数のthis値を指定した値に設定します。この新しい関数は後で呼び出すことができます。

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

let person = { name: 'John' };

let greetJohn = greet.bind(person, 'Hello', '!');
greetJohn();  // 'Hello, John!'

これらのメソッドは、特にコールバック関数やイベントハンドラで便利です。これらの関数はしばしば異なるコンテキストで呼び出され、thisが期待通りのオブジェクトを指さないことがあります。
call(), apply(), bind()を使用すると、thisが常に正しいオブジェクトを指すように設定できます。

最後に

• 関数の呼ばれ方でthisの指している値が変わる
• 厳密モードとそうでない時とでthisの挙動が変わることに注意

参考

以下の記事が大変分かりやすかったです🙇‍♂️
https://dev-k.hatenablog.com/entry/the-this-in-javascript-keyword-dev-k