es6에서 상속을 구현하는 방법은 무엇입니까?

es6에서는 상속을 구현하기 위해 class 키워드와 extends 키워드를 함께 사용할 수 있습니다. class 키워드는 클래스를 선언하기 위해 ES6에서 도입되었으며, 클래스(클래스)는 확장을 통해 상위 클래스의 속성과 메서드를 상속할 수 있습니다. 구문은 "클래스 하위 클래스 이름 확장 상위 클래스 이름 {...};"입니다.

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

es6에서는 class 키워드와 extends 키워드를 함께 사용하여 상속을 구현할 수 있습니다

ES6에서는 객체에 대한 템플릿으로 class(class)를 도입하고, class 키워드를 통해 클래스를 정의할 수 있습니다.

es6 상속

클래스는 확장 키워드를 통해 상속될 수 있습니다

class Animal {}
class Cat extends Animal { };

위 코드는 확장 키워드를 통해 Animal 클래스의 모든 속성과 메서드를 상속하는 Cat 클래스를 정의합니다. 그러나 배포된 코드가 없으므로 두 클래스는 완전히 동일합니다. 이는 Animal 클래스를 복사하는 것과 같습니다. 다음으로 Cat 내부에 코드를 추가합니다.

class Cat extends Animal {
    constructor(name, age, color) {
        // 调用父类的constructor(name, age)
        super(name, age);
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}

super 키워드는 생성자 메소드와 toString 메소드 모두에 나타나며 여기서는 상위 클래스의 생성자를 나타내며 상위 클래스의 새로운 this 객체를 생성하는 데 사용됩니다.

class 키워드는 단지 프로토타입의 구문 설탕일 뿐이며 JavaScript 상속은 여전히 ​​프로토타입을 기반으로 구현된다는 점에 유의해야 합니다.

class Pet {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  showName() {
    console.log("调用父类的方法");
    console.log(this.name, this.age);
  }
}

// 定义一个子类
class Dog extends Pet {
  constructor(name, age, color) {
    super(name, age); // 通过 super 调用父类的构造方法
    this.color = color;
  }

  showName() {
    console.log("调用子类的方法");
    console.log(this.name, this.age, this.color);
  }
}

장점:

• 명확하고 편리함
  

단점:

• 모든 브라우저가 클래스를 지원하는 것은 아닙니다.

【관련 추천: javascript 비디오 튜토리얼, web front-end】

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