집 > 기사 > 웹 프론트엔드 > ES6 클래스의 슈퍼 키워드에 대한 자세한 설명

ES6 클래스의 슈퍼 키워드에 대한 자세한 설명

小云云원래의: 2018-01-04 13:19:265329검색

ES6 클래스의 슈퍼 키워드를 모아 정리했습니다. 이 글은 매우 훌륭하고 참고할 가치가 있습니다. 모두에게 도움이 되기를 바랍니다.

다음은 개인 학습 노트입니다.

키워드 super는 함수나 객체로 사용될 수 있습니다. 두 경우 모두 사용법이 완전히 다릅니다.

1. 함수로 사용하세요

class A {}
class B extends A {
 constructor() {
  super(); //ES6 要求，子类的构造函数必须执行一次super函数。
 }
}

super는 상위 클래스 A의 생성자를 나타내지만 하위 클래스 B의 인스턴스를 반환합니다. 즉, super 내부는 B를 참조하므로 super( )는 여기에서 A.prototype.constructor.call(this)과 동일합니다.

class A {
 constructor() {
  console.log(new.target.name); //new.target指向当前正在执行的函数
 }
}
class B extends A {
 constructor() {
  super();
 }
}
new A() // A
new B() // B

super()가 실행되면 상위 클래스 A의 생성자가 아닌 하위 클래스 B의 생성자를 가리키는 것을 볼 수 있습니다. 즉, super() 내부의 이 내용은 B를 가리킵니다.

2. 객체로 사용하세요

일반적인 메소드에서는 상위 클래스의 프로토타입 객체를 가리키고, 정적 메소드에서는 상위 클래스를 가리킵니다.

class A {
 c() {
  return 2;
 }
}
class B extends A {
 constructor() {
  super();
  console.log(super.c()); // 2
 }
}
let b = new B();

위 코드에서 서브클래스 B의 super.c()는 super를 객체로 사용합니다. 이때 super는 일반적인 방법으로 A.prototype을 가리키므로 super.c()는 A.prototype.c()와 동일합니다.

super를 통해 상위 클래스의 메서드를 호출하면 super는 하위 클래스의 메서드를 바인딩합니다.

class A {
 constructor() {
  this.x = 1;
 }
 s() {
  console.log(this.x);
 }
}
class B extends A {
 constructor() {
  super();
  this.x = 2;
 }
 m() {
  super.s();
 }
}
let b = new B();
b.m() // 2

위 코드에서 super.s()가 A.prototype.s()를 호출하더라도 A.prototype.s()는 하위 클래스 B의 이를 바인딩하여 출력이 1이 아닌 2가 되도록 합니다. . 즉 실제로 실행되는 것은 super.s.call(this)이다.

이것은 서브클래스에 바인딩되므로 속성에 super를 통해 값이 할당되면 super는 이것이고 할당된 속성은 서브클래스 인스턴스의 속성이 됩니다.

class A {
 constructor() {
  this.x = 1;
 }
}
class B extends A {
 constructor() {
  super();
  this.x = 2;
  super.x = 3;
  console.log(super.x); // undefined
  console.log(this.x); // 3
 }
}
let b = new B();

위 코드에서 super.x에는 3이라는 값이 할당되어 있는데, 이는 this.x에 3이라는 값을 할당하는 것과 같습니다. super.x를 읽으면 A.prototype.x를 읽으므로 undefound가 반환됩니다.

super를 사용할 때 함수로 사용할지 객체로 사용할지 명시적으로 지정해야 합니다. 그렇지 않으면 오류가 보고됩니다.

class A {}
class B extends A {
 constructor() {
  super();
  console.log(super); // 报错
 }
}

위 코드에서 console.log(super)의 super는 함수로 사용되는지, 객체로 사용되는지 확인할 수 없으므로 JavaScript 엔진은 코드를 파싱할 때 오류를 보고합니다. 이때, super의 데이터 타입을 명확히 명시할 수 있으면 에러는 발생하지 않는다.

마지막으로 개체는 항상 다른 개체를 상속하므로 모든 개체에서 super 키워드를 사용할 수 있습니다.

ES6 클래스의 슈퍼 키워드에 대한 자세한 설명

관련 기사