[JS] this binding

this binding은 동적으로 결정된다!

글로벌 context에서

this

브라우저 : window 객체

노드 : module

globalThis

브라우저 : window 객체

노드 : 글로벌 객체

함수 내부에서 this는

일반 모드에서는 노드에서는 globalThis 브라우저에서는 window객체

strict모드에서는 undefined

생성자 함수 or 클래스 내부에서 this는

생성될 인스턴스 자체를 가리킨다

다음과 같이 caller에 따라 동적으로 this가 결정이 된다.

function Apple(color){
  this.color=color;
  this.print = function(){
    console.log(`사과의 색깔은 ${this.color}입니다.`)
  }
}

function Banana(color){
  this.color=color;
  this.print = function(){
    console.log(`바나나의 색깔은 ${this.color}입니다.`)
  }
}

const redApple = new Apple('red');
const yellowBanana = new Banana('yellow');
redApple.print(); // 사과의 색깔은 red입니다.
yellowBanana.print(); // 바나나의 색깔은 yellow입니다.

yellowBanana.print = redApple.print;
yellowBanana.print() // 사과의 색깔은 yellow입니다.

arrow function을 사용하여 정적으로 binding할 수 있다.

function Apple(color){
  this.color=color;
  this.print = ()=>{
    console.log(`사과의 색깔은 ${this.color}입니다.`)
  }
}

function Banana(color){
  this.color=color;
  this.print = ()=> {
    console.log(`바나나의 색깔은 ${this.color}입니다.`)
  }
}

const redApple = new Apple('red');
const yellowBanana = new Banana('yellow');
redApple.print();
yellowBanana.print();

yellowBanana.print = redApple.print;
yellowBanana.print() // 사과의 색깔은 red입니다.