LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-04

はじめに

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、きっちり学んでいきましょう。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1