this

책을 사둔지는 오래인데.. 아직 반도 못읽어서.. 처음부터 다시 정리하면서 읽어야 겠다..ㅎㅎ

 

You don't know JS - this와 객체 프로토타입, 비동기와 성능 1장

 

자기 자신??

 

function foo(num) {
	console.log(`foo: ${num}`);
    this.count++;
}

foo.count = 0;

var i;

for(i=0; i<10; i++) {
	if(i > 5) {
    	foo(i);
    }
}

console.log(foo.count) // 0

 

this는 함수 그 자체를 가리킨다?? 이건 많이 하는 오해이다.

위 예시 코드를 보면 foo 함수가 실행 될 때 마다 함수 안에 this.count를 증가시킨다.

그리고 나서 몇 번 호출하고 난 결과는 0이다.

foo.count 와 foo 함수 안에 this.count는 다르다.

foo.count는 foo함수 객체에 count라는 프로퍼티가 추가된 것이고

this.count는 함수가 실행 될 때의 컨텍스트 안의 count라는 프로퍼티의 값을 가리킨다.

 

function foo(num) {
	console.log(`foo: ${num}`);
    this.count++;
}

foo.count = 0;
var i;
for (i=0; i<10; i++) {
	if(i > 5) {
    	foo.call(foo, i)
    }
}

console.log(foo.count); // 4

 

call을 사용하여 foo.call에 foo 객체를 넘겨주면 이 때 foo 함수 안에 this가 진짜 자기 자기 자신을 가리킨다.

 

 

자신의 스코프??

 

this가 바로 함수의 스코프를 가리킨다는 말은 오해이다.

this는 어떤 식으로도 함수의 렉시컬 스코프를 참조하지 않는다.

 

function foo() {
	var a = 2;
    this.bar();
}

function bar() {
	console.log(this.a);
}

foo(); // undefined (책에서는 a가 정의되지 않았다는 레퍼런스 에러가 발생한다고 되어 있음)

 

브라우저 콘솔에서 bar 안의 this를 찍어보면 window 객체를 가리키고 있다.

bar()함수를 this.bar로 참조하려고 한 것 도 문제이다. 앞의  this를 빼고 식별자 어휘적으로 참조하는 것이 가장 자연스럽다고 한다.

의도한 것은 foo함수 안의 a를 찍는 걸 의도 한 것 같은데 렉시컬 스코프 안에 있는 뭔가를 this레퍼런스로 참조할 수 없다.

 

 

this 란??

this는 작성 시점이 아닌 런타임 시점에 바인딩 되며 함수 호출 당시 상황에 따라 콘텍스트가 결정된다.

함수 선언 위치와 상관없이 this바인딩은 오로지 어떻게 함수를 호출했는냐에 따라 정해진다.

 

어떤 함수를 호출 하면 실행 콘텍스트가 만들어진다. 여기엔 함수가 호출된 근원(콜스택)과 호출방법, 전달된 인자 등의 정보가 담겨있다.

this 레퍼런스는 그중 하나로 함수가 실행되는 동안 이용할 수 있다.