this와 바인딩

이동현·2023년 5월 7일

코드 캠프 블로그

목록 보기

50/50

인스턴스 자기 자신을 가리키는 키워드이며, this를 통해 클래스 메소드 및 생성자에서 자기 자신의 데이터를 업데이트하거나 조작할 수 있게 된다.

하지만 자바스크립트에 this가 참조하는 것은 함수가 호출되는 방식에 따라 결정되는데, 이것이 this binding이다.

그에 따른 5가지의 규칙이 존재한다.

기본 바인딩이 적용된 경우 this는 전역 객체에 바인딩된다.

window.a = 10;

function foo() {
  console.log(this.a);
}

foo(); // 10

하지만 엄격모드인 'use strict'에서는 기본 바인딩 대상에서 전역개체는 제외된다.

암시적 바인딩이란, 함수가 객체의 메서드로서 호출되는 상황에서 this가 바인딩되는 것을 말한다. 이때 this는 해당 함수를 호출한 객체, 즉 콘텍스트 객체에 바인딩된다.

const foo = {
  a: 20,
  bar: function () {
    console.log(this.a);
  }
}

foo.bar(); // 20

자바스크림트의 모든 function은 call(), apply(), bind()라는 프로토타입 메소드를 가지고있다.
이 3가지 메서드로 호출하여 this 바인딩을 코드에 명시하는 것이며, 이떄 this는 내가 명시한 객체에 바인딩된다.

// call(), apply()

const foo = {
  a: 20,
}

function bar() {
  console.log(this.a);
}

bar.call(foo); // 20
bar.apply(foo); // 20

// bind()

  const foo = {
  a: 20,
}

function bar() {
  console.log(this.a);
}

const bound = bar.bind(foo)

bound(); // 20

bind 메서드는 매개변수로 전달받은 오브젝트로 this가 바인딩된 함수를 반환한다. 이것을 하드 바인딩이라고 하는데 하드 바인딩된 함수는 이후 호출될 때마다 처음 정해진 this 바인딩을 가지고 호출된다.

new 키워드를 함수를 호출할 때 앞에 사용하는 것으로 객체를 초기화 한다. 이떄 사용되는 함수는 생성자 함수이다.

function Foo() {
  this.a = 20;
}

const foo = new Foo();

console.log(foo.a); // 20

화살표 함수를 정의하는 시점의 컨텍스트 객체가 this에 바인딩된다.

const foo = {
  a: 20,
  bar: function () {
    setTimeout(() => {
      console.log(this.a);
    }, 1);
  }
}

foo.bar(); // 20

setTimeout의 콜백인 화살표 함수의 선언시에 this는 foo 객체를 가리키고 있기 때문에(렉시컬 스코프), 콜백이 실행될 때 this는 foo를 가리키게 된다.