아 다르고 어 다른 자바스크립트의 this 바인딩

동적으로 결정되는 this 바인딩

자바나 C++ 같은 클래스 기반 언어와 다르게 자바스크립트는 함수 호출 방식에 따라 this 바인딩이 결정됩니다. 그렇기 때문에 this 바인딩이 되는 상황을 알기 위해서는 다양한 방식의 함수 호출 방식을 먼저 알아야 합니다. 

아 다르고 어 다르다!

자바스크립트는 다양한 방식으로 함수 호출이 가능합니다. 하지만 주의해야할 점은, 동일한 함수를 다른 방식으로 호출이 가능하다는 것입니다. 즉 같은 함수라도 다르게 호출된다면 하는 역할이 달라지게 됩니다. 같은 말이라도 아 다르고 어 다르게 될 수 있으니 주의하셔야 합니다.

 

김영만 선생님과 구성애 선생님의 같은 말....

함수 호출 방식과 this 바인딩

이제 다양한 자바스크립트의 함수 호출 방식에 대해서 알아보고 이때의 this 는 어떻게 바인딩 되는지에 대해서 알아보겠습니다. 크게 4 가지의 호출 방식에 대해서 알아보고 이때의 this 는 어디로 바인딩 되는지 정리해보자 합니다.

 

1. 일반 함수 호출

만약 함수가 일반 함수로 호출된다면, this 는 전역 객체(global object)가 바인딩 되게 됩니다.

 

 

하지만 strcit mode 가 적용된 함수 내의 this 는 undefined 가 바인딩되게 됩니다.

 

 

그 이유는 사실 this 는 객체의 프로퍼티, 메서드를 참조하기 위한 자기 참조 변수이기 때문입니다. 즉 일반 함수에서의 this 는 아무런 의미가 없다고 볼 수 있습니다.

 

2. 메서드 호출

함수가 메서드로 호출되면 메서드를 호출한 객체, 즉 메서드 호출시 메서드 이름 앞 마침표 연산자 앞의 객체에 this 가 바인딩 됩니다. 

 

 

주의해야 할 점은 메서드는 프로퍼티에 바인딩되어 있는 함수입니다. 즉 독립적으로 존재하는 별도의 객체로서 위 코드의 person 객체가 소유하고 있는, 즉 포함되어 있지 않습니다.

 

날 가질순 없어.....

 

따라서 아래와 같이 다른 객체의 프로퍼티에 할당하는 것이 가능합니다. 이를 통해 다른 객체의 메서드가 되는 것 뿐만 아니라 일반 변수에 할당해 일반 함수로 사용하는 것 또한 가능합니다.

 

3. 생성자 함수 호출

생성자 함수 내부의 this 는 미래 생성될 인스턴스가 바인딩 됩니다. 생성자 함수는 말 그대로 객체를 생성하는 함수입니다. 

너무 간단해서 더 붙일 말이 없네요....

4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출

apply, call, bind 메서드는 모든 함수가 상속받아 사용하는 것이 가능합니다. 이 메서드들은 모두 Function.prototype 의 메서드이기 때문입니다.

 

여기서의 this 바인딩은 각 메서드들에 첫 번째 인수로 전달한 객체를 가리킵니다. 보다 더 자세한 내용은 아래에서 확인 하실 수 있습니다.

 

- 정리 링크 -