Chapter 2: this All Makes Sense Now! - hochan222/Everything-in-JavaScript GitHub Wiki

이제 우리는 this가 전적으로 call-site에 기반해서 바인딩 된다는 사실을 알았다.

Call-site

this의 바인딩을 이해하려면 call-site(함수가 호출되는 코드의 위치)를 이해해야한다. call-site는 this가 무엇을 참조하고 있는가에 대한 답을 해줄 수 있다. 그러나 자바스크립트에서 특정 호출 패턴이 call-site를 숨길 수 있기 때문에 유심히 봐야한다.

function baz() {
    // call-stack is: `baz`
    // so, our call-site is in the global scope

    console.log( "baz" );
    bar(); // <-- call-site for `bar`
}

function bar() {
    // call-stack is: `baz` -> `bar`
    // so, our call-site is in `baz`

    console.log( "bar" );
    foo(); // <-- call-site for `foo`
}

function foo() {
    // call-stack is: `baz` -> `bar` -> `foo`
    // so, our call-site is in `bar`

    console.log( "foo" );
}

baz(); // <-- call-site for `baz`

Nothing But Rules

call-site가 함수 실행중에 this가 어디를 가르키는가를 어떻게 결정하는가를 알아보자.
4가지 규칙과 각각 경우에 적용되는 우선순위가 있다.

Default Binding

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

var a = 2;

foo(); // 2

우선 var a = 2;같이 전역선언된것은 global-object properties에 같은 이름으로 존재하는 것과 정확히 동치이다. 각각의 복사본이아니고 하나다.

기본 바인딩이 함수 호출에 적용되므로 foo()함수 안의 this는 (global-object) 전역 객체를 가르킨다.

strict mode일 경우 전역 객체는 적합하지 않아 undefined로 설정된다.

function foo() {
	"use strict";

	console.log( this.a );
}

var a = 2;

foo(); // TypeError: `this` is `undefined`

Implicit Binding

callsite가 context object를 가지고 있을 때다.(object와 관련될 때)

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

var obj = {
	a: 2,
	foo: foo
};

obj.foo(); // 2

call-site는 obj context를 함수 참조를 결정하는데 사용한다. 그리고 call-site는 오직 가장 상단/마지막에있는 객체 속성참조 체인만 중요하다.

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

var obj2 = {
	a: 42,
	foo: foo
};

var obj1 = {
	a: 2,
	obj2: obj2
};

obj1.obj2.foo(); // 42

Implicitly Lost

가장 혼란스러울 때는 implicitly 바인딩이 바인딩을 잃을 경우이다.

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

var obj = {
	a: 2,
	foo: foo
};

var bar = obj.foo; // function reference/alias!

var a = "oops, global"; // `a` also property on global object

bar(); // "oops, global"

사실 bar가 obj.foo를 참조하는 것처럼 보이지만, 그저 foo의 다른 참조일 뿐이다. 또한, call-site가 bar()이기 떄문에 기본 바인딩이 적용된다.

이런 예외는 콜백함수를 전달할때 또한 발생한다.

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

function doFoo(fn) {
	// `fn` is just another reference to `foo`

	fn(); // <-- call-site!
}

var obj = {
	a: 2,
	foo: foo
};

var a = "oops, global"; // `a` also property on global object

doFoo( obj.foo ); // "oops, global"

콜백으로 전달하는 함수가 builtin 이라고해도 결과는 똑같다.

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

var obj = {
	a: 2,
	foo: foo
};

var a = "oops, global"; // `a` also property on global object

setTimeout( obj.foo, 100 ); // "oops, global"

보통 자바스크립트 라이브러리들은 이 콜백의 바인딩을 강제하는 것을 좋아하기 때문에 우리의 혼란은 가중된다.

Explicit Binding

우리는 또한 명시적으로 call()과 apply()등을 통해 바인딩 할 수 있다.
몇몇 자바스크립트 환경에서는 제공되지 않을 수 있는데 대부분 제공된다.

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

var obj = {
	a: 2
};

foo.call( obj ); // 2

만약 call()안에 primitive value가 오면 그것의 object-form(new String(), new Boolean() ...)등을 바인딩한다. 우리는 이걸 흔히 "boxing"이라고 한다.

아쉽게도 명시적 바인딩이 앞의 문제들을 해결해주지는 못한다.

Hard Binding

우리는 몇가지 트릭으로 앞의 문제들을 해결할 수 있다.

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

var obj = {
	a: 2
};

var bar = function() {
	foo.call( obj );
};

bar(); // 2
setTimeout( bar, 100 ); // 2

// `bar` hard binds `foo`'s `this` to `obj`
// so that it cannot be overriden
bar.call( window ); // 2

다른 예제

function foo(something) {
	console.log( this.a, something );
	return this.a + something;
}

var obj = {
	a: 2
};

var bar = function() {
	return foo.apply( obj, arguments );
};

var b = bar( 3 ); // 2 3
console.log( b ); // 5

재사용 가능 함수를 만들어서 조금 더 깔끔하게 짜보자.

function foo(something) {
	console.log( this.a, something );
	return this.a + something;
}

// simple `bind` helper
function bind(fn, obj) {
	return function() {
		return fn.apply( obj, arguments );
	};
}

var obj = {
	a: 2
};

var bar = bind( foo, obj );

var b = bar( 3 ); // 2 3
console.log( b ); // 5

하드바인딩은 매우 일반적인 패턴이므로 ES5에 Function.prototype.bind로 제공된다.

function foo(something) {
	console.log( this.a, something );
	return this.a + something;
}

var obj = {
	a: 2
};

var bar = foo.bind( obj );

var b = bar( 3 ); // 2 3
console.log( b ); // 5

단, ES6부터 bind()함수에 stack 추적을 위해 bar.name 속성을 추가로 갖는다.

API Call "Contexts"

많은 자바스크립트 내장 라이브러리들이 "context" 라는 선택적 매개변수를 제공한다.

function foo(el) {
	console.log( el, this.id );
}

var obj = {
	id: "awesome"
};

// use `obj` as `this` for `foo(..)` calls
[1, 2, 3].forEach( foo, obj ); // 1 awesome  2 awesome  3 awesome

new Binding

네번째이자 마지막 this 바인딩 규칙은 함수와 객체들의 대한 오해를 다시 생각하게 만든다.
전통적인 클래스 지향 언어에서 생성자는 클래스에 연결된 특수 메서드로, 클래스가 새 연산자로 인스턴스화 될 때 해당 클래스의 생성자가 호출된다.

something = new MyClass(..);

자바스크립트의 new를 같은 동작으로 오해하는데 자바스크립트에서 이에대한 class 지향적 기능은 없다.

자바스크립트에서 생성자는 new 연산자를 앞에두고 호출되는 함수일 뿐이다. 아무 역할도 없다.

예를들어 Number()의 생성자함수는 ES5.1 spec을 인용하면

15.7.2 The Number Constructor

When Number is called as part of a new expression it is a constructor: it initialises the newly created object.

자바스크립트에서 생성자는 그저 먼저 불려지는 함수일 뿐이다.

new 연산이 이뤄지면 다음 과정이 자동적으로 실행된다.

1. 새로 구성된 객체가 생성된다.
2. 새로 구성된 객체인 Prototype에 링크된다.
3. 새로 구성된 객체가 함수 호출자의 this 바인딩을 설정한다.
4. 반환될 다른 대체 객체가없으면 새로 구성된 객체가 반환된다.

2단계는 나중에 5 Chapter에서 다룰것이다.

function foo(a) {
	this.a = a;
}

var bar = new foo( 2 );
console.log( bar.a ); // 2

Everything In Order

이제 우선순위에 대해 알아보자. 차례대로 default binding의 우선순위가 가장 낮다.

먼저 명시적 바인딩이 암시적 바인딩보다 우선순위가 높다.

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

var obj1 = {
	a: 2,
	foo: foo
};

var obj2 = {
	a: 3,
	foo: foo
};

obj1.foo(); // 2
obj2.foo(); // 3

obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

전체를 비교해보자.

function foo(something) {
	this.a = something;
}

var obj1 = {
	foo: foo
};

var obj2 = {};

obj1.foo( 2 );
console.log( obj1.a ); // 2

obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3

var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2
console.log( bar.a ); // 4

function foo(something) {
	this.a = something;
}

var obj1 = {};

var bar = foo.bind( obj1 );
bar( 2 );
console.log( obj1.a ); // 2

var baz = new bar( 3 );
console.log( obj1.a ); // 2
console.log( baz.a ); // 3

우리가 아까 위에 만든 가짜 바인딩으로 돌아가면 놀라운 깨달음을 얻을 수 있다.

function bind(fn, obj) {
	return function() {
		fn.apply( obj, arguments );
	};
}

우리가 방금 위에서한것처럼 하드바인딩을 재정의할 방법이없다. 사실 ES5의 bind()는 생각보다 매우 복잡하다. 아래는 bind()의 pollyfill이다.

if (!Function.prototype.bind) {
	Function.prototype.bind = function(oThis) {
		if (typeof this !== "function") {
			// closest thing possible to the ECMAScript 5
			// internal IsCallable function
			throw new TypeError( "Function.prototype.bind - what " +
				"is trying to be bound is not callable"
			);
		}

		var aArgs = Array.prototype.slice.call( arguments, 1 ),
			fToBind = this,
			fNOP = function(){},
			fBound = function(){
				return fToBind.apply(
					(
						this instanceof fNOP &&
						oThis ? this : oThis
					),
					aArgs.concat( Array.prototype.slice.call( arguments ) )
				);
			}
		;

		fNOP.prototype = this.prototype;
		fBound.prototype = new fNOP();

		return fBound;
	};
}

function foo(p1,p2) {
	this.val = p1 + p2;
}

// using `null` here because we don't care about
// the `this` hard-binding in this scenario, and
// it will be overridden by the `new` call anyway!
var bar = foo.bind( null, "p1" );

var baz = new bar( "p2" );

baz.val; // p1p2

Determining this

1. new 로 새로운 객체가 생성됐는지?
2. call, apply로 명시적 바인딩이 됐는지?
3. 암시적 바인딩이 됐는지?
4. default binding 고려 (strict mode)인지 아닌지.

Binding Exceptions

Ignored this

apply, call, bind의 this 바인딩 매개변수에 null이나 undefined를 전달하면 default binding이 된다.

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

var a = 2;

foo.call( null ); // 2

또한, curry를 사용하면 매우 유용할수있다.

function foo(a,b) {
	console.log( "a:" + a + ", b:" + b );
}

// spreading out array as parameters
foo.apply( null, [2, 3] ); // a:2, b:3

// currying with `bind(..)`
var bar = foo.bind( null, 2 );
bar( 3 ); // a:2, b:3

Safer this

Object.create(null)는 {}와 비슷하게 빈 객체를 생성하지만, Object.prototype에 대한 위임(delegation)이 없으므로 더 비어있다고 할 수 있다.

function foo(a,b) {
	console.log( "a:" + a + ", b:" + b );
}

// our DMZ empty object
var ø = Object.create( null );

// spreading out array as parameters
foo.apply( ø, [2, 3] ); // a:2, b:3

// currying with `bind(..)`
var bar = foo.bind( ø, 2 );
bar( 3 ); // a:2, b:3

Indirection

주의해야할 또 다른 사항은 함수에대한 간접참조를 만드는 경우이다. 이런 경우 함수가 호출되면 default binding이 적용된다.

간접 참조는 일반적으로 할당에서 빈번히 발생한다.

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

var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };

o.foo(); // 3
(p.foo = o.foo)(); // 2

Lexical this

일반적인 함수는 위에서 언급한 4가지 규칙이 적용된다. 하지만 ES6에서 소개하는 화살표함수는 이런 규칙을 사용하지 않는다.

화살표함수는 둘러싸는 범위에서 this를 바인딩한다.

function foo() {
	// return an arrow function
	return (a) => {
		// `this` here is lexically adopted from `foo()`
		console.log( this.a );
	};
}

var obj1 = {
	a: 2
};

var obj2 = {
	a: 3
};

var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, not 3!

일반적 사례는 이벤트 핸들러나 콜백을 사용하는 경우이다.

function foo() {
	setTimeout(() => {
		// `this` here is lexically adopted from `foo()`
		console.log( this.a );
	},100);
}

var obj = {
	a: 2
};

foo.call( obj ); // 2

는 아래와 동치

function foo() {
	var self = this; // lexical capture of `this`
	setTimeout( function(){
		console.log( self.a );
	}, 100 );
}

var obj = {
	a: 2
};

foo.call( obj ); // 2

Review (TL;DR)

바인딩 규칙 4가지.
안전하게 this binding을하려면 ø = Object.create(null)로 생성하자.
ES6의 화살표함수는 이전 레거시 코드의 확실한 대체물이다.