This의 유형

This는 총 6 가지의 유형이 있다

퀴즈를 통해 잘 이해했는지를 확인해보자.

퀴즈

누구나 계획이 있다. 틀리기 전까진

1번 문제

var value = 0
var obj = {
    value: 1,
    setValue: function () {
        this.value = 2
        (function () {
            this.value = 3
        })()
    }
}
obj.setValue();
console.log(value);
console.log(obj.value);

정답은 3, 2이다.
처음에 이 문제를 풀 때에는 0, 3 이 나올줄 알았다. IIFE에서의 this가 window라는 것을 알아차리는 것이 정답을 도출하는 관건이었다.

2번 문제

var value = 0;
var obj = {
    value: 1,
    setValue: function() {
        var self = this;
        self.value = 2;
        (function(){
            self.value = 3;
        })()
    }
}
obj.setValue();
console.log(value);
console.log(obj.value);

정답은 0, 3이다. es6 이전에는 함수 내에서 this가 객체 밖을 가리키는 문제를 해결하기 위해 this 바인딩을 하거나 문제에 나오는 것 처럼 self에 this를 매핑해주었다고 들었다.

3번 문제

var value = 0;
var obj = {
    value: 1,
    setValue: function() {
        this.value = 2;
        (function(){
            this.value = 3;
        }).call(this);
    }
}
obj.setValue();
console.log(value);
console.log(obj.value);

정답은 0, 3이다.

4번 문제

var value = 0;
var obj = {
    value: 1,
    setValue: function() {
        let a = 20;
        this.value = 2;
        {
            let a = 10;
            this.value = 3;
        }
    }
}
obj.setValue();
console.log(value);
console.log(obj.value);

정답은 0, 3이다. function을 할당해주면서 this의 범위를 한정해주고 있다.

참고자료

인프런의 Javascript ES6+ 제대로 알아보기(초급), 자바스크립트 Deep-dive, javascript-quiz.com