> 웹 프론트엔드 > 프런트엔드 Q&A > es6에서 super의 사용법은 무엇입니까?

es6에서 super의 사용법은 무엇입니까?

WBOY
풀어 주다: 2022-05-05 18:40:49
원래의
2360명이 탐색했습니다.

super의 사용법: 1. super가 함수로 사용될 때, 구문은 "constructor(){super();}"입니다. 객체는 일반 메서드에서 가리키는 데 사용됩니다. 부모 클래스의 프로토타입 개체는 정적 메서드에서 부모 클래스를 가리키는 데 사용됩니다.

es6에서 super의 사용법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6에서 super의 사용법은 무엇입니까

첫 번째 경우: super가 함수로 사용되면 상위 클래스의 생성자를 나타냅니다.

ES6에서는 하위 클래스의 생성자가 super 함수를 한 번 실행해야 합니다.

class A {}
class B extends A {
  constructor() {
    super();//子类的构造函数,必须执行一次super函数,代表父类的构造函数
  }
}
로그인 후 복사

참고: super는 상위 클래스의 생성자를 나타내지만 이때 반환되는 것은 B의 인스턴스입니다. 즉, 내부 super는 B의 인스턴스를 참조하므로 super()는 A.prototype과 동일합니다. .constructor.call(this)

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B
로그인 후 복사

위 코드에서 new.target은 현재 실행 중인 함수를 가리키며, super()가 실행되면 상위 클래스 A의 생성자가 아닌 하위 클래스 B의 생성자를 가리킵니다. 즉, super() 내부의 함수는 B를 가리킵니다

super가 함수로 사용될 때 하위 클래스의 생성자에 나타나야 합니다. 그렇지 않으면 오류가 보고됩니다

class A {}
class B extends A {
  m() {
    super(); // 报错
  }
}
로그인 후 복사

두 번째 경우: super가 사용될 때 객체로서 일반 메소드에서는 상위 클래스의 프로토타입 객체를 가리키고, 정적 메소드에서는 상위 클래스를 가리킵니다

class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();//父类的构造函数
    console.log(super.p()); // 2
  }
}
let b = new B();
로그인 후 복사

위 코드에서 super를 함수로 사용하면 다음을 나타냅니다. 상위 클래스의 생성 방법. 객체로 사용되면 상위 클래스의 프로토타입 객체, 즉 A.prototype을 가리키므로 super.p()는 A.prototype.p()

와 동일합니다. super는 상위 클래스의 프로토타입을 가리키므로 상위 클래스 인스턴스의 속성이나 메서드는 super

class A {
  constructor() {
    this.p = 2;
  }
}
class B extends A {
  get m() {
    return super.p;
  }
}
let b = new B();
b.m // undefined
로그인 후 복사

를 통해 호출할 수 없습니다. 위 코드에서 p는 상위 클래스 인스턴스의 속성입니다. A는 super.p에서 참조할 수 없습니다

속성이 상위 클래스의 프로토타입에 정의되어 있으면 super

class A {}
A.prototype.x = 2;
class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2
  }
}
let b = new B();
로그인 후 복사
를 사용하여 액세스할 수 있습니다.

위 코드에서 x 속성은 상위 클래스 객체의 프로토타입에 정의되어 있습니다. 그래서 당신은 슈퍼를 사용할 수 있습니다.

위 내용은 es6에서 super의 사용법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
es6
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿