this, binding

this

this는 상위 객체를 가르키는 변수이다.

예를 들면 콘솔에 this를 써보자

이 때 this는 바로 본인의 상위인 windows를 불러오게 된다.

그렇다면 클래스에서의 this는 어떨까?
this는 실행 위치에 binding 방식에 따라 다른 값을 참조하기 때문에
아래 binding 부분에서 설명을 통해 알아보도록하자.

binding

바인딩(Binding)이란 함수 호출과 실제 함수를 연결하는 방법이다. 즉 함수를 호출하는 부분에 함수가 위치한 메모리 번지를 연결시켜 주는 것이다. 자바스크립트에서 함수를 호출 할 때는 암묵적으로 arguments 객체 및 this 변수가 함수 내부로 전달된다.

기본 바인딩

가장 기본적인 binding 방법으로 this가 전역 객체에 바인딩된다.

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

foo(); // undefined

위와 같은 경우 this는 전역객체에 바인딩되고 전역객체에는 a라는 프로퍼티가 없기 때문에 undefined가 출력된 상황이다.

window.a = 10;

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

foo(); // 10

위는 전역객체 window.a = 10이 foo에 바인딩 되며 값 10이 할당된 모습이다.
이처럼 기본 바인딩상태에선 this가 전역에 바인딩 됨을 알 수 있다.

암시적 바인딩

암시적 바인딩이란, 함수가 객체의 메서드로서 호출되는 상황에서 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

new 바인딩

new 바인딩 (new Binding)
자바스크립트의 new 키워드는 함수를 호출할 때 앞에 new 키워드를 사용하는 것으로 객체를 초기화할 때 사용하는데, 이때 사용되는 함수를 생성자 함수라고 한다.(컨벤션으로 생성자 함수는 대문자로 시작한다)

그리고 생성자 함수에서는 this키워드를 해당 생성자를 이용해 생성할 객체에 대한 참조로 사용한다.

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

const foo = new Foo();

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