this
22.1 this 키워드
- 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다.
- 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.
-
생성자 함수로 인스턴스를 생성하려면 먼저 생성자 함수가 존재햐야 한다.
-
생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다.
따라서 자신이 속한 객체, 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다. 이를 위해 자바스크립트는this라는 특수한 식별자를 제공한다.this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.
this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. -
this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. -
함수를 호출하면 argument객체와
this가 암묵적으로 함수 내부에 전달된다. -
함수 호출시 함수 내부에 암묵적으로 전달된
this는 지역 변수처럼 사용할 수 있다. 단,this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. 따라서 strict mode가 적용된 일반 함수 내부의this에는undefined가 바인딩된다. 일반 함수 내부에서this를 사용할 필요가 없기 때문이다!
❗️ this 바인딩은 실행 문맥(컨텍스트)에 따라 결정된다.
-> 실행 컨텍스트는 함수가 호출될 때 생성된다. 따라서 함수의 호출 방식에 따라 동적으로 this에 바인딩 될 값이 정해진다!
렉시컬 스코프와 this 바인딩은 결정 시기가 다르다.
함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정한다. 하지만 this 바인딩은 함수 호출 시점에 결정된다.
22.2.1 일반 함수 호출
- 기본적으로
this에는 전역객체가 바인딩된다. - 일반 함수로 호출하면 함수 내부의
this에는 전역 객체가 바인딩된다. - 다만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 객체를 생성하지 않는 일반 함수에서 this 는 의미가 없다.
- 메서드 내에서 정의한 중첩 함수도 일반 함수로 호출되면 중첩 함수 내부의
this에는 전역 객체가 바인딩된다. -> p 348 메서드 내의 중첩 함수가 화살표 함수가 아닌 다른 방식으로 암시적 혹은 명시적 으로 호출될 수 있을까? - 콜백 함수가 일반 함수로 호출된다면 콜백 함수 내부의
this에도 전역 객체가 바인딩 된다. 어떠한 함수라도 일반 함수로 호출되면this에 전역객체가 바인딩 된다. -> 일반 함수는 객체를 생성하지 않기에 이것은 중요한 것이 아닐까?
❗️ 일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함) 내부의 this에는 전역객체가 바인딩된다!
외부 함수인 메서드와 중첩 함수 또는 콜백 함수의 this가 일치하지 않다는 것은 중첩 함수 또는 콜백 함수를 헬퍼 함수로 동작하기 어렵게 만든다.
이 때 화살표 함수를 사용해서
this바인딩을 일치시킬 수 있다!
화살표 함수는 한 단계 상위 블록의this를 바인딩한다.!
화살표 함수의 한 단계 상위 블록이 어떠한 함수라면, 화살표 함수의 상위 블록이 호출될 때를 확인하면 된다! -> 호출되는 시점에 생성되는 실행 컨텍스트(문맥)에 따라 결정되는 상위 블록인 함수의this를 화살표 함수 또한this로 바인딩한다.
22.2.2 메서드 호출
- 메서드 내부의
this에는 메서드를 호출한 객체가 바인딩 된다. - 주의할 것은 메서드 내부의
this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩 된다는 것이다. - 메서드는 프로퍼티 라는 식별자에 바인딩된 함수이다.
❗️ 객체의 프로퍼티가 가리키는 함수 객체는 객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체이다.
-> 프로퍼티가 함수 객체의 참조값(주소값)을 가리키고 있었을 뿐이다.따라서 메서드는 다른 객체의 프로퍼티에 할당하는 것으로 다른 객체의 메서드가 될 수도 있고 일반 변수에 할당하여 일반 함수로 호출될 수도 있다.
--> 따라서 메서드 내부의this는 프로퍼티로 메서드(메서드의 주소값(참조값))를 가리키고 있는 객체와는 관계가 없고, 메서드를 호출한 객체에 바인딩 된다.
22.2.3. 생성자 함수 호출
-
생성자 함수 내부의
this에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩 된다.
22.2.4 Function.prototype.apply / call / bind 메서드에 의한 간접 호출
-
apply,call,bind메서드는Function.prototype의 메서드이다. -
즉 이들 메서드는 모든 함수가 상속받아 사용할 수 있다!
Function.prototype.apply / call
-
Function.prototype.apply/call메서드는this로 사용할 객체와 인자 리스트를 인자로 전달받아 함수를 호출한다.apply메서드와call메서드의 본질적인 기능은 함수를 호출하는 것이다. -
apply와call메서드는 함수를 호출하면서 첫 번째 인자로 전달한 특정 객체를 호출한 함수의this에 바인딩한다.
apply메서드는 호출할 함수의 인자를 배열로 묶어 두번째 인자로 전달한다.call메서드는 호출할 함수의 인자를 쉼표로 구분하여 두번째 인자부터 시작하여 전달한다.
Function.prototype.bind
Function.prototype.bind메서드는apply와call과 달리 함수를 호출하지 않고,this로 사용할 객체만을 전달한다!bind메서드를 사용하여 콜백함수this를 외부 함수의this와 일치시킬 수 있다!
