[Javascript] this

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열다섯 번째인 this, call, apply and bind 항목을 공부하면서 간단하게 작성한 글이다.

this

자바스크립트에서 this는 현재 실행 컨텍스트를 담고 있는 객체를 의미한다. 여기에서 실행 컨텍스트 (Execution Context) 란 쉽게 말해서 현재 코드가 실행되고 있는 환경이라고 한다. 브라우저의 콘솔에서 this를 확인해보면 Global 실행 컨텍스트인 window가 출력되는 것을 볼 수 있다. 왜냐하면 현재 this가 Global 환경에서 호출되었기 때문이다.

console.log(this); // window

그렇다면 다음과 같이 객체 안에 함수가 있다고 가정해보자

function aWhoIsThis(){
    console.log(this);
}
const me = {
    aWhoIsThis
}

me.aWhoIsThis();
aWhoIsThis();

여기에서 me.aWhoIsThis() 함수를 호출하게 되면 this가 me객체를 반환하는 것을 볼 수 있다. 왜냐하면 aWhoIsThis() 함수는 현재 me라는 객체의 실행 컨텍스트 안에서 실행이 되었기 때문이다.

 

그렇다면 그냥 aWhoIsThis() 함수를 호출하게 되면 어떻게 될까?

함수를 Global에 선언을 하게 되면 window 객체에 포함이 된다. 위 예제에서 그냥 aWhoIsThis()를 다르게 표현하면 window.aWhoIsThis()로 나타낼 수 있다. 그렇기 때문에 aWhoIsThis()는 Global 실행 컨텍스트인 window에서 실행되었기 때문에 this는 window를 출력한다.

 

window 객체를 확인해보면 whoIsThis 함수가 들어있는것을 확인할 수 있다.

그래서 this는 누가 호출을 했냐에 따라 달라진다.

bind

다음과 같이 페이지에 버튼이 있고 버튼에 click 이벤트로 me.aWhoIsThis 함수를 실행시킨다고 해보자.

btn.addEventListener('click', me.aWhoIsThis);

//콘솔에 <button>...</button> 이 출력된다.

그렇다면 여기서 버튼을 클릭했을 때 출력되는 this는 무엇일까? 바로 버튼이 출력된다. 그 이유는 me.aWhoIsThis 함수를 호출하는 것은 버튼을 클릭했을 때이므로 실행 컨텍스트가 버튼이 되기 때문이다. 

 

만약 버튼을 클릭했을 때 this가 me 객체가 되게 하려면 bind 메서드를 사용하면 된다. bind 메서드는 실행되는 함수에서 사용되는 this를 전달해준다. 그리고 그 결과로 변경된 원본 함수의 복제본을 반환한다.

const bindMe = aWhoIsThis.bind(me);
btn.addEventListener('click', bindMe);

//콘솔에 me 객체가 출력된다.

그리고 만약 bind 할 함수에 인자값을 전달해줘야 한다면 this로 전달해 줄 객체 뒤에 , 로 추가해주면 된다.

const bindWithArg = funcWithArg.bind(me, arg1, arg2, ...);

call과 apply

bind 메서드는 함수를 실행하지 않고 반환을 하는 대신 call과 apply는 함수를 바로 실행한다. call과 apply는 동일한 기능을 가지고 있지만 추가 인자값을 받는 방식이 다르다. call은 추가 인자값들을 , 로 나누어서 전달하면 되지만 apply는 배열로 전달해야 한다.

const obj = {
	name: 'JJakDDo'
}

function greeting(age){
	return `hello I'm ${this.name} and ${age} years old`;
}

greeting(10);  // "hello I'm  and 10 years old"
greeting.call(obj, 20); // "hello I'm JJakDDo and 20 years old"
greeting.apply(obj, [30]); // "hello I'm JJakDDo and 30 years old"