Apakah cara untuk melaksanakan warisan dalam es6

Dalam es6, pewarisan boleh dicapai menggunakan kata kunci kelas dan kata kunci lanjutan. Kata kunci kelas diperkenalkan dalam ES6 untuk mengisytiharkan kelas, dan kelas (kelas) boleh mewarisi sifat dan kaedah kelas induk melalui extends.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Dalam es6, anda boleh menggunakan kata kunci kelas dengan kata kunci lanjutan untuk melaksanakan warisan

Dalam ES6, kelas (kelas) diperkenalkan sebagai templat untuk objek, dan anda boleh menggunakan kata kunci kelas menentukan kelas.

es6 warisan

Kelas boleh diwarisi melalui kata kunci lanjutan

class Animal {}
class Cat extends Animal { };

ditakrifkan di atas kod Kelas Cat dicipta, yang mewarisi semua sifat dan kaedah kelas Haiwan melalui kata kunci lanjutan. Tetapi oleh kerana tiada kod digunakan, kedua-dua kelas adalah sama, yang setara dengan menyalin kelas Haiwan. Seterusnya, kami menambah kod di dalam 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()
    }
}

Kata kunci super muncul dalam kedua-dua kaedah pembina dan kaedah toString Ia mewakili pembina kelas induk di sini dan digunakan untuk mencipta objek baharu ini bagi kelas induk.

Perlu diambil perhatian bahawa kata kunci kelas hanyalah gula sintaks untuk prototaip, dan pewarisan JavaScript masih dilaksanakan berdasarkan prototaip.

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);
  }
}

Kelebihan:

• Jelas dan mudah
  

Kelemahan:

• Bukan semua pelayar menyokong kelas.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Apakah cara untuk melaksanakan warisan dalam es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!