【JavaScript】thisが指すオブジェクトがわけわからなくなるので書いておく

はじめに

JavaScriptを始めた時に、一番最初につまづくポイントってthisば気がします。
自分も訳わかりませんでした。
そんな時のためにチラッと確認できるようここにまとめておきます。

開眼!JavaScriptを参考にしています。

結論

関数が実行された時に、thisは設定されています。
その呼び出された関数をプロパティかメソッドとして保持しているオブジェクトがthisに設定されています。

コードにしてみる

const people = {
  name: 'java男',
  age: 23,
  greet: function () {
    console.log(`I am ${this.name}`)
  }
}

people.greet()
// 出力 : I am java男

ここでいうプロパティかメソッドとして保持しているオブジェクトとは、peopleオブジェクトとなります。
つまり、this.nameが指すのは、peopleオブジェクトのnameプロパティとなります。

const testObj = {
  test: 'test'
}

const thisTest = function () {
  console.log(`${this}`)
}

testObj.thisTest = thisTest

// (1) [object Object]
testObj.thisTest()

// (2) [object global]
thisTest()

(1)のthisはtestObjオブジェクトを指しています。なぜなら、thisTestをtestObjのメソッドとして定義したからです。
対して(2)のthisはグローバルオブジェクトを指しています。なぜなら、ここで実行されているthisTestを保持しているのはグローバルオブジェクトであるためです。

終わり

アロー関数ではthisをグローバルに束縛するとか他にもありますが、とりあえずごちゃつくのでここで終わります。
ややこしくなりがちがthis、きっちり学んでいきましょう。