자바스크립트 this 의 개념과 바인딩 설명

자바스크립트 this란 대체 무엇일까요? 그리고 this를 이해하는 일은 유독 어려운 것일까요? 이번 포스팅에서는this의 정의와 바인딩에 대해 살펴보도록 하겠습니다.

this의 정의

this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. <모던 자바스크립트> 이웅모 저

정의를 자세히 살펴보면 중간에 '또는'이라는 표현이 사용된 것을 볼 수 있습니다. 이는 this가 고정된 값에 바인딩되지 않기 떄문입니다. this는 '함수가 호출되는 방식'에 따라 '동적'으로 결정됩니다. this라는 대명사를 키워드로 사용한 것도 이러한 맥락에서 이해해볼 수 있습니다.

this 의 이해

그렇다면 이러한 this의 값은 어떻게 변화할까요? 우리는 this 바인딩을 통해 this가 어떤 값과 연결되는지 확인해볼 수 있습니다. 바인딩이란 this의 호출 방식에 따라 this가 특정 '객체'에 연결되는 것입니다. this 바인딩은 1. 일반 함수 내부 2. 메서드 내부 3. 생성자 함수 내부 4. Call, Apply, Bind를 통한 '호출 방식'으로 나눠서 살펴볼 수 있습니다.

 

1. 일반 함수 내부의 this는 전역 객체와 바인딩됩니다.
2. 메서드 내부의 this는 메서드를 호출한 객체와 바인딩됩니다.
3. 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스와 바인딩됩니다.
4. Call, Apply, Bind 메소드 사용시 메서드에 첫 번째 인수로 전달하는 객체에 바인딩됩니다.

1. 일반 함수 호출시 this는 전역 객체에 바인딩

console.log(this === window); // true

a = 30;
console.log(window.a); // 30

function x(){
  return this;
}

x() === window; // true

2. 메서드 호출시 this는 호출한 객체에 바인딩

let john = {
    firstName: "John",
    lastName: "Doe",
    driveCar() {
        console.log(this.firstName + " drives a car.")
    }
}

john.driveCar(); // John drives a car

3. 생성자 함수로 호출시 생성자 함수가 생성할 객체에 바인딩

function person() {
    this.firstName = "John",
    this.lastName = "Doe",
    this.start = function() {
        console.log(this.firstName + "drives a car.")
    }
}

let person1 = new person();

console.log(person1); // { firstName: 'John', lastName: 'Doe', start: [Function] }

4. Call, Apply, Bind 메소드 사용시 메서드에 첫 번째 인수로 전달하는 객체에 바인딩

*이 부분은 별도의 포스팅을 확인해주시기 바랍니다.

this 정리

이처럼 this는 함수 호출 방식에 따라 동적으로 결정됩니다. 예시에서 살펴본 것처럼 함수를 일반 함수로 호출할 경우 this는 전역 객체를, 메서드로 호출할 경우 이를 호출한 객체를, 생성자 함수를 호출할 경우 생성자 함수가 생성할 인스턴스를 가리키게 됩니다. Call, Apply, Bind 메소드 사용시 메서드에 첫 번째 인수로 전달하는 객체에 바인딩됩니다.

 

 

참고자료

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this
• https://blueshw.github.io/2018/03/12/this/
• Learn Javascript, Brad Schiff
• 모던 자바스크립트, 이웅모 저, 22장 this