this
| 함수 호출 방식 | this 바인딩 |
|---|---|
| 일반 함수 호출 | 전역 객체 |
| 메소드 호출 | 메소드를 호출한 객체 |
| 생성자 함수 호출 | 생성자 함수가(미래에) 생성할 인스턴스 |
| Function.prototype.apply/call/bind 메소드에 의한 간접 호출 | Function.prototype.apply/call/bind 메소드에 인자로 전달한 객체 |
바인딩 - 식별자와 값을 연결하는 과정 ex) 변수는 할당에 의해 값이 바인딩된다.
1. this 키워드
동작을 나타내는 메소드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야한다. 이 때 메소드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야한다.
생성자 함수 내부에서는 프로퍼티 또는 메소드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야 한다.
생성자 함수로 인스턴스를 생성하려면 먼저 생성자 함수가 존재해야 한다.
생성자 함수를 정의하는 시점에서는 아직 인스턴스를 생성하기 이저이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다.
따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요한데 이를 위해 자바스크립트는 this라는 특수한 식별자를 제공한다.
this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.
this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다.자바스크립트 엔진에 의해 암묵적으로 생성되며 코드 어디에서든지 참조할 수 있다.
this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
2. 함수 호출 방식과 this 바인딩
렉시컬 스코프와 this 바인딩은 결정 시기가 다르다.
- 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정한다.
- this에 바인딩될 객체는 함수 호출 시점에 결정된다.
2.1 일반 함수 호출
기본적으로 this는 전역객체가 바인딩된다.
- 전역 함수는 물론, 중첩함수를 일반함수로 호출하면 함수 내부의 this에 전역 객체가 바인딩된다. (중첩함수, 콜백함수 포함)
- this는 객체의 프로퍼티나 메소드를 참조하기 위한 자기 참조 변수이므로 객체를 생성하지 않는 일반 함수에서는 의미가 없다.
2.2 메소드 호출
- 메소드 내부의 this는 메소드를 호출한 객체, 즉 메소드 이름 앞의 마침표 연산자 앞에 기술한 객체에 바인딩된다.
- 메소드 내부의 this는 메소드를 소유한 객체가 아닌 메소드를 호출한 객체에 바인딩된다는 것
- 메소드는 프로퍼티에 바인딩된 함수이다.
2.3 생성자 함수 호출
- 생성자 함수 내부의 this에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩된다.
2.4 Function.prototype.apply/call/bind 메소드에 의한 간접 호출
Function.prototype.apply/call/bind 메소드는 인수로 this와 인수 리스트를 전달받아 함수를 호출한다.
apply, call 메소드는 Function.prototype의 메소드, 따라서 Function 생성자 함수를 constructor 프로퍼티로 가리키는 모든 함수가 상속받아 사용할 수 있다.
apply와 call 메소드의 본질적인 기능은 함수를 호출하는 것, apply와 call 메소드는 함수를 호출하면서 첫번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.
Function.prototype.bind 메소드는 함수를 호출하지 않고 this로 사용할 객체만을 전달한다.
bind 메소드는 메소드의 this와 메소드의 내부의 중첩함수 또는 콜백함수의 this가 불일치하는 문제를 해결하기 위해 유용하게 사용된다.