[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는 어떻게 결정되는가?

this는 어떤 object가 이것을 불렀는지에 따라 결정된다.

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

test(); // window object

위 경우에는 분명 test안에서 this를 print 했는데 window가 나온다.
그 이유는 test를 call한 것이 어떤 object이느냐를 보면 알 수 있다.

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

test의 왼쪽에는 window가 숨어있었다. 즉 window에서 부른것이므로 window가 출력되는 것이었다.

object내에서의 this

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

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

printName을 call한 것은 obj이므로, this 결과값은 window가 아닌 obj자체임을 알 수 있다.

this 사용의 benefits

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

자신의 object값에 접근할 수 있다.

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를 사용하여 dry하게 작성할 수 있다. printName을 부른 object의 각각의 this를 활용할 수 있는 것이다.