모던 자바스크립트, 메서드 정의 문법과 super, [[HomeObject]]

메서드 정의와 super, [[HomeObject]]

• 메서드 정의 문법은 function 키워드 없이 객체 내에서 메서드를 선언하는 것이다.
• [[HomeObject]] 에 접근할 수 있도록 해준다.
  • super 에 접근이 가능하다.

const obj = {
  functionProperty: function() {
    // 함수 프로퍼티 문법 (function 키워드 사용)
  }
  method() {
    // 메서드 정의 (function 키워드와 ':' 이 없음)
  },
};

super 접근 예제코드

정말 메서드 문법에서만 super 에 접근 가능한지 확인해보자.

메서드 문법을 사용하지 않는 경우

const obj1 = {
  name: "Joe",
  toString: function () {
    return super.toString();
  },
};

console.log(obj1.toString()); // Uncaught SyntaxError: 'super' keyword unexpected here

• toString() 의 결과로 문법 에러 메세지가 출력되었다.
• 우리 눈엔 보이지 않지만, [[HomeObject]] 가 null 을 가리키고 있다.
  • 자바스크립트 엔진에서 처리된다.

메서드 문법을 사용하는 경우

const obj1 = {
  name: "Joe",
  toString() {
    return super.toString();
  },
};

console.log(obj1.toString()); // [object Object]

• toString() 의 결과로 Object.prototype.toString() 이 호출되었다.
• [[HomeObject]] 가 상위 객체인 Object 를 가리키고 있어서, super 키워드를 통해 상위 객체의 메서드를 불러올 수 있었다.
  • 메서드 내부 함수 스코프에서 super([[HomeObject]]) 접근이 가능하다.

super 는 메서드가 실행되는 시점에 평가된다.

const obj = {
  toString() {
    return super.toString().toUpperCase();
  },
};

Object.setPrototypeOf(obj, {
  toString() {
    return "a different string";
  },
});

console.log(obj.toString()); // "A DIFFERENT STRING"

• super([[HomeObject]]) 는 미리 설정되어 있는 것이 아니라 메서드가 실행되는 시점에 평가된다.
  • 선언 시의 super.toString() 은 Object.toString() 이었으나 console.log() 를 수행하는 시점엔 Object.setPrototypeOf() 를 통해 프로토타입에 적용된 객체의 toString() 이 super.toString() 이 된다.
  • 이러한 이유로 A DIFFERENT STRING 이 출력된다.
• [[HomeObject]] 링크는 메서드가 super 를 사용하는지 여부와 관계없이 존재하지만, super 를 사용하지 않는 경우 자바스크립트 엔진은 링크를 최적화할 확률이 높다.