Section 12. 자바스크립트 this의 정적 바인딩

객체의 메서드 종류별 비교

const obj = {
  // function 선언 함수
  func1: function () { return true; },

  // 메서드
  func2 () { return true; },

  // 화살표 함수
  func3: () => true
}

console.log(
  obj.func1(),
  obj.func2(),
  obj.func3()
); //true true true

로그로 출력된 형태를 비교하면 다음과 같다

console.log(obj.func1); //ƒ () { return true; }
console.log(obj.func2); //ƒ func2 () { return true; }
console.log(obj.func3); //() => true

생성자 역할 수행 여부

const func1 = new obj.func1(); //생성된다
const func2 = new obj.func2(); //애러
const func3 = new obj.func3(); //애러

function 선언 함수만 생성자로 활용 가능한 것을 볼 수 있다.

기본적으로 function 함수가 더 많은 기능이 있고 무겁다는 의미가 된다.

 

ES6 함수 구분

화살표 함수와 this

• function 함수나 메서드의 동적 바인딩과 다르게 동작한다.
• 함수가 어디서 선언되었는가에 따른다. - 가장 근접한 상위 스코프에 바인딩 고정이다.
• this를 정적으로 바인딩한다.

1. 객체 리터럴에서

const obj = {
  x: 1,
  y: 2,

  func1: function () {
    console.log('1.', this);
  },
  func2 () {
    console.log('2.', this);
  },
  func3: () => {
    console.log('3.', this);
  }
}

// this가 해당 객체를 가리킴
obj.func1(); //{x: 1, y: 2, func1: ƒ, func2: ƒ, func3: ƒ}
obj.func2(); //{x: 1, y: 2, func1: ƒ, func2: ƒ, func3: ƒ}

// 💡 this가 상위 스코프를 가리킴
obj.func3(); //Window 객체

2. 생성자 함수와 클래스에서

• 기본적으로는 가리키는 대상이 동일 하다. (해당 인스턴스)

function Korean () {
  this.favorite = '김치';

  this.makeStew = function (isHot) {
    return `${isHot ? '매운' : '순한'} ${this.favorite}찌개`;
  };
  this.fryRice = (isHot) => {
    return `${isHot ? '매운' : '순한'} ${this.favorite}볶음밥`;
  };
}

function Italian () {
  this.favorite = '피자';
}

const korean = new Korean();
const italian = new Italian();

console.log(korean.makeStew(true)); //매운 김치찌개
console.log(korean.fryRice(true)); //매운 김치볶음밥

italian.makeStew = korean.makeStew;
italian.fryRice = korean.fryRice;

console.log(italian.makeStew(false)); //순한 피자찌개
console.log(italian.fryRice(false)); //순한 김치볶음밥

찌개는 function 선언 함수와 메서드로 선언했고 볶음밥은 화살표 함수로 선언했다.

동적으로 바인딩 했을때 function 함수와 화살표 함수의 동작 방식이 다른 것을 볼 수 있다.

 

call, apply, bind, this 인자가 무시된다.

console.log(
  korean.fryRice.call({favorite: '된장'}, true)
); //매운 김치볶음밥

console.log(
  korean.fryRice.apply({favorite: '된장'}, [true])
); //매운 김치볶음밥

console.log(
  korean.fryRice.bind({favorite: '된장'}, true)()
); //매운 김치볶음밥