this와 바인딩

this란?

자기 참조 변수(객체를 참조하는 변수)
this에는 기본적으로 전역 객체 window가 바인딩 되어있고, 함수 호출 방식에 의해 바인딩되는 객체가 달라진다.

함수를 호출하는 방식은 많지만 주로 쓰이는 것으로는 일반 함수 호출, 메서드 호출, 생성자 함수 호출이 있다.

함수 호출 방식에 의한 this 바인딩

const result = function () {
  console.dir(this)
}

/**
 * 일반 함수 호출
 * 전역 객체 window 바인딩
 */
result() // window

/**
 * 메서드 호출
 * 메서드를 호출한 object 객체 바인딩
 */
const object = { method: result2 }
object.method() // { method: [Function: result] }

/**
 * 생성자 함수 호출
 * 생성자 함수가 생성할 객체(인스턴스) 바인딩
 */
new result() // result {}

일반 함수 호출

함수가 일반 함수로 호출될 경우 this에는 항상 전역 객체 window가 바인딩 된다.
메서드 내 중첩 함수일 경우에도 동일하다.

const object = {
  method: function () {

    function bar() {
      console.dir(this)
    }

    bar() // 메서드 내 중첩 함수를 일반 함수로 호출
  }
}

object.method() // window

bar() 함수는 메서드 내 중첩 함수로 선언되어 일반 함수로 호출되었다.

함수는 어디에서 호출되던지 일반 함수로 호출되면, this에는 무조건 window 객체가 바인딩 된다.

메서드 호출

함수가 메서드로 호출될 경우 this에는 메서드를 호출한 객체가 바인딩 된다.

const objectA = {
  name: 'A',
  method: function () {
    return this.name
  }
}

console.log(objectA.method()) // A

const objectB = {
  name: 'B'
}

objectB.method = objectA.method // 메서드 할당
console.log(objectB.method()) // B

누가 생성했든지 간에 this에는 메서드를 호출한 객체가 바인딩된다.

생성자 함수 호출

함수가 생성자 함수로 호출될 경우 this에는 생성자 함수가 생성하게 될 객체(인스턴스)가 바인딩 된다.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.introduce = function () {
        return `안녕하세요. 제 이름은 ${this.name}이고, 나이는 ${this.age}살 입니다.`;
    };

    console.dir(this); // Person { name: 'aaron', age: 27, introduce: [Function] }
}

const me = new Person("aaron", 27);

console.log(me.introduce()); // 안녕하세요. 제 이름은 aaron이고, 나이는 27살 입니다.

생성자 함수는 런타임 시점 이전에 암묵적으로 빈 객체를 생성하고 this에 바인딩한다. 이 객체를 인스턴스라고 한다.