Chapter 1: this Or That? - hochan222/Everything-in-JavaScript GitHub Wiki

흐,,자바스크립트에서 두렵고 두려운 this 키워드다.
우리 모두 이번 기회에 두려움을 날려버려보자.

this 정리

Why this?

this는 자바스크립트 개발자에게 많은 혼란스러움을 준다. 그럼에도 불구하고 this는 왜 가치있을까?

function identify() {
	return this.name.toUpperCase();
}

function speak() {
	var greeting = "Hello, I'm " + identify.call( this );
	console.log( greeting );
}

var me = {
	name: "Kyle"
};

var you = {
	name: "Reader"
};

identify.call( me ); // KYLE
identify.call( you ); // READER

speak.call( me ); // Hello, I'm KYLE
speak.call( you ); // Hello, I'm READER

위의 code snippet을 사용하면 각각 객체에 따른 별도의 함수를 만들지 않더라도 재사용해서 쓸 수 있다. 만약 this를 사용하지 않는다면 다음과 같이 사용해야 한다.

function identify(context) {
	return context.name.toUpperCase();
}

function speak(context) {
	var greeting = "Hello, I'm " + identify( context );
	console.log( greeting );
}

identify( you ); // READER
speak( me ); // Hello, I'm KYLE

사용 패턴이 복잡할수록 재사용하기 쉽고, API 디자인을 깔끔하게 이끈다.

Confusions

this의 정확한 작동 방식을 알아보기전에 정확한 의미를 알아보자. 종종 개발자들은 this를 2가지로 분류해서 생각하는데 두개 다 옳지 못하다.

Itself

this가 함수에서 문법적으로 자기 자신을 참조한다고 생각한다.
자바스크립트의 메커니즘을 처음 접하는 개발자는 함수를 객체(JavaScript의 모든 함수가 객체이다.)로 참조하면 함수 호출 사이에 상태 (속성 값)를 저장할 수 있다고 생각한다.
(이것도 나쁘지 않은 방법이지만 뒷장에서 더 좋은 방법을 알려줄 것이다.)

예제를 보자.

function foo(num) {
	console.log( "foo: " + num );

	// keep track of how many times `foo` is called
	this.count++;
}

foo.count = 0;

var i;

for (i=0; i<10; i++) {
	if (i > 5) {
		foo( i );
	}
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9

// how many times was `foo` called?
console.log( foo.count ); // 0 -- WTF?

오.. 대박... foo.count = 0가 실행 될때, 사실 foo 함수 객체에 count가 추가된다. 그러나 this.count는 함수 객체를 가르키지 않는다.

따라오는 당연한 질문은 우리는 this.count로 전역 변수를 만들었고, NAN이 들어가 있을것이다. 왜냐면 undefined를 ++ 해주었으니까. (2장에서 배움)

내부에서 함수 객체를 참조하려면 lexical identifier 가 필요하다.

function foo() {
	foo.count = 4; // `foo` refers to itself
}

setTimeout( function(){
	// anonymous function (no name), cannot
	// refer to itself
}, 10 );

첫번째 함수는 name identifier 가 있으므로 자기 자신에 참조 가능하다.
두번째 함수는 익명함수로 참조 할 적절한 방법이 없다.

arguments.callee는 익명함수에서 자기 자신을 참조할 유일한 방법이었지만 deprecated되었다.

다음은 개선된 솔루션이다.

function foo(num) {
	console.log( "foo: " + num );

	// keep track of how many times `foo` is called
	foo.count++;
}

foo.count = 0;

var i;

for (i=0; i<10; i++) {
	if (i > 5) {
		foo( i );
	}
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9

// how many times was `foo` called?
console.log( foo.count ); // 4

그러나 this에 대한 근본적인 이해는 피하고 있다. 다음을 보자.

function foo(num) {
	console.log( "foo: " + num );

	// keep track of how many times `foo` is called
	// Note: `this` IS actually `foo` now, based on
	// how `foo` is called (see below)
	this.count++;
}

foo.count = 0;

var i;

for (i=0; i<10; i++) {
	if (i > 5) {
		// using `call(..)`, we ensure the `this`
		// points at the function object (`foo`) itself
		foo.call( foo, i );
	}
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9

// how many times was `foo` called?
console.log( foo.count ); // 4

this를 피하지말고 포용하자!

Its Scope

그 다음 가장 일반적인 잘못된 생각은 this가 어떻게든 함수 범위를 참조한다는 것이다. this는 어떻게든 함수의 lexical scope를 참조 할 수 없다. object의 scope는 엔진의 내부 구현중 하나이기 때문이다.

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

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

foo(); //undefined

실제 JS forum에서 나온 질문 예제다. 이 snippet에는 더 많이 잘못된게 있다.

우선 bar를 this로 참조하는게 잘못됐다. 조금 더 일반적인 방법은 식별자로 lexical 참조를 하는것이다. 두번째로 뭔가 foo함수 내부에 bar함수의 lexical 식별자를 둠으로써 참조하는데 this를 통한 어떤한 연결고리고 생길 수 없다.

What's this?

우선 this는 런타임 바인딩이고, 함수 선언 위치와는 관련없지만 함수 호출 방식과는 관련이 있다.

함수가 호출되면 실행 컨텍스트(execution context)로 알려져 있는 activation record가 만들어진다. 이 레코드에는 함수가 호출 된 위치 (호출 스택), 함수가 호출 된 방법, 전달 된 매개 변수 등에 대한 정보가 포함된다. 레코드 요소 중 함수 실행 중 사용될 this 참조에 관한 요소도 있다.

다음 장에서는 함수의 call-site를 통해 어떻게 this가 바인딩하는지 방법을 결정할 것이다.

Review (TL;DR)

우리는 this의 원리를 정확히 알려하는데 시간을 투자하지않고 기타 사이트들에서 트릭만 배워서 여러 혼란들을 유발했다.

우리는 this를 배워야한다. 함수 자체도아니고 함수의 lexical scope도 아니다.

this는 실제로 함수가 호출될 때 만들어지는 바인딩이며 this가 참조하는 것은 전적으로 call-site에 의존한다.