[javascript] this keyword

In most cases, the value of this is determined by how a function is called (runtime binding). It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind() method to set the value of a function's this regardless of how it's called, and ES2015 introduced arrow functions which don't provide their own this binding (it retains the this value of the enclosing lexical context). - MDN

this

どうやって決めたの?

thisは、これが呼び出されたオブジェクトによって異なります.

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

test(); // window object

上記の場合、testにはthisが印刷されており、出てきたのはwindowである.
その理由は、呼び出しtestがどのようなオブジェクトであるかから判断することができる.

window.test() === test() // true

testの左側にはwindowが隠れています.すなわちwindowが歌うので、windowが出力される.

objectのthis

const obj = {
    name: 'cho',
    printName() {
        console.log(this);
    }
}

obj.printName() // {name: 'cho', printName: ƒ}

printNameが呼び出されたのはobjであるため、thisの結果値はwindowではなく、obj자体である.

この機能を使用するメリット

1. gives methods access to their object

const obj = {
    name: 'cho',
    printName() {
        console.log('My name is', this.name);
    }
}

obj.printName() // My name is cho

独自のオブジェクト値にアクセスできます.

2. execute same code for multiple objects

function printName() {
    console.log('My name is', this.name);
}

const obj1 = {
    name: 'cho',
    printName
}

const obj2 = {
    name: 'stefan',
    printName
}

obj1.printName() // My name is cho
obj2.printName() // My name is stefan

thisを使用して乾燥して書くことができます.すなわち、printNameを歌う対象のそれぞれthisを利用することができる.