ホームページ  >  記事  >  ウェブフロントエンド  >  es6で継承を実装する方法は何ですか

es6で継承を実装する方法は何ですか

青灯夜游
青灯夜游オリジナル
2022-04-11 16:43:192677ブラウズ

es6 では、class キーワードと extends キーワードを使用して継承を実現できます。 class キーワードは ES6 でクラスを宣言するために導入され、クラス (クラス) は extends を通じて親クラスのプロパティとメソッドを継承できます。構文は「クラス サブクラス名 extends 親クラス名 {...};」です。

es6で継承を実装する方法は何ですか

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

ES6 では、class キーワードと extends キーワードを併用して継承を実装できます。

ES6 では、class (クラス) がテンプレートとして導入されています。オブジェクトを使用し、クラスを定義するキーワードを使用できます。

es6 継承

クラスは extends キーワードを通じて継承できます

class Animal {}
class Cat extends Animal { };

上記のコードは Cat を定義しますこのクラスは、extends キーワードを通じて Animal クラスのすべてのプロパティとメソッドを継承します。ただし、コードがデプロイされていないため、2 つのクラスはまったく同じであり、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 フロントエンド ]

以上がes6で継承を実装する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。