Introduction
이번 포스트에서는 this를 다뤄볼 것이다. this는 코드를 실행할 때 context를 설명해 주는데 상황에 따라 여러가지 의미이기 때문에 중요하다. 바로 시작해보자!
Execution Context
-
코드를 만들어서 자바스크립트 엔진에 실행을 하면 그 즉시 memory 와 execution context를 엔진이 객체로 생성해 만든다.
-
실행을 하기 위해서는 여러가지 정보가 필요한데 다음과 같은 정보를 구분하고 가지고 있기 위해 execution context를 객체 형태로 관리한다.
-
함수가 호출되면 scope에 따라 다음과 같은 정보가 execution context가 만들어 져 call stack에 push 된다. 함수를 벗어나면 call stack 에서 pop된다.
- scope 내 변수: 지역변수, 매개변수, 전역변수, 객체의 프로퍼티 - 호출의 근원 (caller) - 전달의 인지 (arguments) - this
그러므로 변수가 담긴 함수를 선언하면 local memory와 local execution context가 생성된다. 자바스크립트는 lexical scope이기 때문에 어디서 선언 되었는지가 중요하다.
this
this 키워드는 모든 함수 scope에서 자동으로 설정되는 특수한 식별자이다. execution context를 이루는 요소 중 하나로 사용할 수 있다.
this가 상황에 따라 무엇인지 식별하는데, this는 5가지 각기 다른 상황에 따라 무엇을 지칭하는지 알 수 있다. 하나씩 알아보도록 한다.
전역
-
Global: window
-
Function 호출: window
전역 scope에 변수를 한 후 function을 호출할 때 그 변수는 window라는 global scope에 저장이 된다. 그리고 global과 function의 scope 내에서 this는 window를 지칭한다.
Example)
var message = "hello";
function food () {
console.log(this.message); //window에 저장되어 있는 message를 불러온다. function 밖에 message를 정의했으니 window에 저장되는 것이다.
}
foo ();
//"hello"부모 Object
- Method 호출: 부모 object
위 두 case에서 봤듯이 일반적인 함수 호출에서 this는 window를 지칭한다. 하지만 만약 객체에 속한 method일때는 상황이 달라진다.
let price = {
basic : "Your price is";
what : function (price){
console.log(this.basic + " "+price)
}
};
price.what(50);
//"Your price is 50" 이렇게 객체에 속한 method의 this는 그 객체, 즉 부모 object를 지칭한다. 그러므로 this.basic은 결국 price.basic 이라는 말이다.
새로운 Instance / 객체
- Construction mode(new 로 생성된 function 의 this): 새로운 instance/ 객체
function을 새로 만들어 객체 지향적인 프로그래밍을 목적으로 할때의 this는 간단하다.
function car (name, color, brand) {
this.name = name;
this.color = color;
this.brand = brand;
};
let grandeur = new car(dope, white, hyundai);
console.log(granduer.name);
//dope이렇게 새로운 함수로 만들고 객체지향적인 프로그래밍을 할때의 this는 새로 만들어지는 객체를 지칭한다.
영문을 가져오면 좀더 이해가 잘될 것 같다.
Binding Target: object on the left of the CALL TIME dot
What's it for?: So methods run in the context of an object they're found on
.call / .apply
- .call or .apply 호출 할 때 첫번째 인자로 명시된 객체 (first argument)
.call 혹은 .apply를 사용할 때 this가 지칭하는 것은 첫 번째 인자이다. 예시를 보면 이해가 빠르다.
function identify() {
return this.name.toUpperCase();
};
var me = { name: "Joshua"};
identify.call(me); //Joshuacall 안에 인자로 me가 들어가고 identify라는 함수를 호출해 me를 인자로 쓴다. 그러므로 여기서 this는 인자인 me를 지칭한다.
let add = function (x, y) {
this.val = x+y;
}
let obj = {
val: 0
};
add.apply (obj, [2, 8]);
console.log(obj.val); //10
apply에서 볼 수 있듯 this는 인자인 obj를 지칭한다.
call과 apply를 쓰는 이유는 this를 인자값으로 사용하기 때문에 this를 사용할 수도, 변경할 수 도
있게되어서 함수 호출용으로 사용하는 것이다.
call 과 apply의 차이는 call은 인자를 하나로 받는 것이고 apply는 인자를 배열로 받는다.
this를 정리하자면, 5가지 상황 중 무엇인지 확인하고 그거에 맞추어서 this가 무엇을 지칭하는지 보면 된다.
