Javascript | This Binding

바인딩이란?

바인딩(Binding)이란 함수 호출과 실제 함수를 연결하는 방법이다. 즉 함수를 호출하는 부분에 함수가 위치한 메모리 번지를 연결시켜 주는 것이다. 자바스크립트에서 함수를 호출 할 때는 암묵적으로 arguments 객체 및 this 변수가 함수 내부로 전달된다. 이에 따라 this에 할당되는 값이 달라지게 되어 많은 개발자들이 혼돈을 겪게 된다. 지금부터 하나씩 알아보자

This Binding Rule

1. 객체의 메서드 호출 할 때 this 바인딩

객체 내부의 함수를 메소드라고 부른다. 메소드 내부 코드에서 사용된 this는 해당 메소드를 호출한 객체로 바인딩 된다.

let myObject = {
      name: 'foo',
      sayName: () => {
        console.log(this.name);
      }
}
let otherObject = {
      name: 'bar'
}
    
otherObject.sayName = myObject.sayName;

myObject.sayName(); // foo
otherObject.sayName(); // bar

2. 함수를 호출 할 때 this 바인딩

함수를 호출할 경우는, 해당 함수 내부 코드에서 사용된 this는 전역 객체에 바인딩 된다. 브라우저에서 자바스크립트를 실행하는 경우 전역 객체는 window 객체다.

let test = 'This is test';
console.log(window.test); // 'This is test'

let sayFoo = () => {
  console.log(this.test);
}

sayFoo(); // 'This is test'

3. 생성자 함수를 호출 할 때 this 바인딩

• 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. 생성자 함수에서의 this는 생성자 함수를 통해 새로 생성되어 반환되는 개체에 바인딩된다.

#### 4. call과 apply 메소드를 이용한 명시적인 바인딩 Function.prototype 객체의 메서드인 call() 과 apply()를 통해 명시적으로 this를 바인딩 가능하다. 기본 문법은 아래와 같다.