자바스크립트에서의 this

자바스크립트의 함수 파트를 공부하던 중 this와 bind 부분이 잘 이해가 가지 않아 추가적인 공부를 마치고 정리를 해보려한다.

this란?

해석 그대로 이것을 말한다.
다만, javascript에서 this는 다른 언어와 조금 다르게 동작하기 때문에 헷갈리는 개념이다.

가장 중요한 핵심은 자바스크립트에서 this는 호출하는 방법에 의해 결정된다는 것이다.
.
.
예시를 통해 자세히 알아보도록 하자!
.
.

브라우저에서의 this

우선, 브라우저 콘솔에서 console.log(this);를 찍으면 Window 객체가 나온다.

console.log(this);을 호출한 함수는 전역(Global)이고 브라우저에서 Global은 Window 객체를 의미하기 때문이다.
.
.

예제

본격적으로 예제를 살펴보자.
다음과 같은 코드를 입력했을때 실행결과는 어떻게 될까?

var people = {
    name: 'gildong',
    say: function(){
        console.log(this);
    }
}

people.say();	

var sayPeople = people.say;
sayPeople();

우선, people.say();의 실행 결과를 보면 다음과 같은 결과가 나온다.

people.say()에서는 people 객체가 say()를 호출했으므로 this는 people 객체가 되는 것이다. 그래서 결과가 '나'인 gildong이 호출되는 것이다.

.

다음으로 호출방법을 달리하여 실행한 결과를 보자.
sayPeople에 people.say를 넣고 sayPeople을 호출한다면?

people.say()에서 호출한 say()와 sayPeople()은 결국 같은 아이이니 결과가 똑같을까?

여기서 this는 호출하는 방법에 의해 결정된다는 것을 다시 되새기고 sayPeople();의 실행 결과를 보자.

결과를 보면 people.say();로 호출한 것과 달리 객체가 global인 것을 볼 수 있다.

sayPeople 변수에 people.say를 넣고 호출한 경우는 전역변수 즉, 전역(Global)이 호출한 주체가 되므로 this는 전역(Global) 객체가 된다.

bind

bind함수는 this를 객체로 고정하고 싶을 때 사용한다.
bind(this로 고정시킬 객체)

var people = {
    name: 'gildong',
    say: function(){
        console.log(this);
    }
}

people.say();	

var sayPeople = people.say.bind(people);
sayPeople();

위 예제와 같이 bind함수를 사용해 객체를 people로 고정시키고 실행을 시켜본다면 전 예제에서 나온 결과와 달리 people.say();와 sayPeople();의 결과가 동일하게 this는 people 객체가 된 것을 확인할 수 있다.

정리

자바스크립트에서의 this는 호출하는 방법에 의해 결정된다.