this

자바스크립트를 사용하다 보면 this를 이용하는 경우가 많이 있습니다.

 

이번 시간에는 실행 문맥 내에서 this 바인딩이 어떻게 이루어지는지 알아보겠습니다.

 

this란 무엇인가.

 

일반적으로 함수 내에서 사용되는 특정 키워드 변수입니다.

 

자바스크립트는 함수를 실행할 때 몇 가지 단계 거치며 동작하는데요, 그중 한 가지 단계가 this 변수를 만드는 일입니다.

 

그런데 자바스크립트가 this라는 키워드에 어떠한 값을 할당할지는 경우에 따라 조금 다릅니다.

 

당연히 헷갈리겠죠. 이러한 this를 예측 가능하도록 사용하고, 이에 더해 원하는 값을 this 키워드에 할당할 수 있습니다.

 

먼저 우리가 좋아하는 검정 화면입니다.

var test = {
    x: 10,
    fn: function () {
        console.log(this);
        console.log(this.x)
    }
};
 
var test2 = function () {
    console.log(this);
}
 
test.fn();
 
test2();

#6~8 this를 바꾸는 경우는 call, apply, bind 방법으로 바꿀 수 있습니다. this라는 이름의 변수에 할당하는 것이므로 할당 가능한 값은 뭐든지 가능합니다.

 

그렇다면 도대체 어떤 경우에 이런 짓을 하는 걸까요?

하나의 간단한 예를 들자면 리스너 함수 내에서의 this와 호출하고자 하는 this가 의도치 않게 다른 경우가 있지요.

 

var test = {
    addEventListener: function () {
        document.body.addEventListener('click', function () {
            console.log(this);
            console.log(this.onClickBody);
        })
    },
    onClickBody: function () {
        console.log('body를 클릭했군');
    }
}
 
test.addEventListener();

 

#4 이런 코드가 좋은 예는 아니지만 body를 클릭하면 리스너 함수가 실행되고 이때 this에는 body DOM이 할당된 상태입니다.

#5 따라서 this.onClickBody 같은 건 없는 상태죠.

 

이처럼 리스너를 추가하는 문맥의 this와 실제 리스너가 실행될 때의 this가 다른 혼동을 막기 위해 첫 번째 문맥의 this를 _this, _self 같은 변수에 담아 리스너에서 사용하곤 했습니다. 하지만 ES6 시대가 오면서 더 이상 그럴 필요가 없어졌죠. 그냥 this를 실행 문맥의 this 그대로 사용하면 되는 겁니다.

 

var test = {
    addEventListener: function () {
        document.body.addEventListener('click', () => {
            console.log(this);
            console.log(this.onClickBody);
        })
    },
    onClickBody: function () {
        console.log('body를 클릭했군');
    }
}
 
test.addEventListener();

끝났습니다.

화살표 함수를 사용하면 더 이상 화살표 함수만의 this를 바인딩하지 않고 처음 실행 문맥의 this를 사용하게 됩니다.

 

다음은 생성자 함수에서의 this의 사용 예시입니다.

 

function Person(age) {
    this.age = age;
    this.getAge = function () {
        return this.age;
    }
}
var me = new Person(20);
me.getAge();

 

#2~ 3 생성자 함수에서의 this는 해당 인스턴스를 가리키게 됩니다.

 

이 정도로 기본적인 this가 무엇인지, 그리고 어떻게 사용하는지에 대한 기본적인 설명은 끝났습니다.

 

그리고 오늘 잠깐 본 apply, call, bind, 화살표 함수

 

잊지 말고 기억해두세요!