【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、きっちり学んでいきましょう。
Author And Source
この問題について(【JavaScript】thisが指すオブジェクトがわけわからなくなるので書いておく), 我々は、より多くの情報をここで見つけました https://qiita.com/hcr1s/items/37d502088483eaa05152著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .