Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah cara untuk melaksanakan warisan dalam es6

Apakah cara untuk melaksanakan warisan dalam es6

青灯夜游
Lepaskan: 2022-04-11 16:43:19
asal
2686 orang telah melayarinya

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.

Apakah cara untuk melaksanakan warisan dalam es6

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 { };
Salin selepas log masuk

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()
    }
}
Salin selepas log masuk

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);
  }
}
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan