ES6 의 슈퍼 는 도대체 무엇 입 니까?

원본 주소:https://www.web-tinker.com/article/21291.html ES6 의 계승 과 슈퍼 의 용법 에 대해 서 는 낯 설 지 않 지만 슈퍼 가 무엇 인지 묻 자 많은 사람들 이 우물 거 렸 다.다른 프로 그래 밍 언어 에서 슈퍼 는 this 와 마찬가지 로 포인터 일 수도 있 습 니 다. 일반 변수 처럼 사용 할 수 있 습 니 다.그러나 ES6 에서 슈퍼 는 특수 한 문법 이 고 this 보다 더 특수 하 며 용법 상의 제한 이 많다.첫째, 슈퍼 가 호출 할 수 있 는 물건 인 이상 함수 입 니까?둘째, extends 의 class 에 대해 서 는 constructor 에 슈퍼 가 없 을 수 있 습 니까?첫 번 째 문제 의 답 은 쉽게 찾 을 수 있 습 니 다. 슈퍼 를 다른 변수 에 할당 해 보면 문법 적 오 류 를 얻 을 수 있 습 니 다.　　

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">A</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Object</span> {</span>
  constructor() {
    <span class="hljs-keyword">const</span> a = super;
    a();
  }
};

Uncaught SyntaxError: 'super' keyword unexpected here

슈퍼 의 품사 정 의 는 뒤에 있 는 괄호 와 함께 this 와 다 르 기 때문이다.this 의 정 의 는 this 라 는 키 워드 는 인용 으로 바 뀌 고 슈퍼 는 슈퍼 (...) 가 호출 으로 바 뀌 는 것 입 니 다.또한 슈퍼 는 constructor 에서 직접 호출 하 는 것 외 에 슈퍼 xxx (...) 를 사용 하여 부모 류 의 특정한 원형 방법 을 호출 할 수 있 습 니 다. 이것 은 역시 한정 문법 입 니 다.

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">A</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Array</span> {</span>
  push(...args) {
    args.<span class="hljs-keyword">forEach</span>(item => super.push(item + <span class="hljs-number">1</span>));
  }
}

let a = <span class="hljs-keyword">new</span> A();

a.push(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>);

console.log(a); <span class="hljs-comment">// [2, 3, 4]</span>

그래서 슈퍼 가 뭔 지 물 어보 면 키워드 일 뿐 이에 요.용법 은 슈퍼 (...) 나 슈퍼 xxx (...) 여야 한다.두 번 째 문 제 는 실제로 슈퍼 (...) 가 무엇 을 했 는 지 물 어 보 는 것 이다.사실 슈퍼 (...) 가 하 는 일 은 this 를 만 드 는 것 이다.원형 계승 에서 한 가지 유형 이 다른 유형 에서 계승 하려 면 먼저 그의 부 류 를 하위 유형의 원형 으로 예화 해 야 하기 때문이다.이 일 을 하지 않 으 면 하위 클래스 의 원형 이 확실 하지 않 고 물론 this 를 만 들 수 없습니다.그래서 constructor 에 슈퍼 (...) 가 없 으 면 this 를 가 져 오 려 고 하면 오류 가 발생 합 니 다.　　

Uncaught ReferenceError: this is not defined

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">A</span> {</span>}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">B</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">A</span> {</span>
  constructor() {}
}
<span class="hljs-keyword">new</span> B(); <span class="hljs-comment">// throw</span>

사실 constructor 에는 슈퍼 (...) 가 없 을 수 있 습 니 다. 이것 은 this 를 만 드 는 데 사 용 될 뿐 입 니 다.원형 만 계승 하고 부모 류 의 구조 기 를 전혀 관리 하지 않 으 려 면 this 를 완전히 피 할 수 있 습 니 다. constructor 에서 수 동 으로 대상 을 되 돌려 줍 니 다. 예 를 들 어:

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">A</span> {</span>
  get one() { <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>; }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">B</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">A</span> {</span>
  constructor() {
    <span class="hljs-keyword">return</span> Object.create(<span class="hljs-keyword">new</span>.target.prototype);
  }
  get two() { <span class="hljs-keyword">return</span> <span class="hljs-number">2</span>; }
};

let b = <span class="hljs-keyword">new</span> B();
console.log(b.one, b.two); <span class="hljs-comment">// 1 2</span>