Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah hubungan antara kelas dalam JavaScript?

Apakah hubungan antara kelas dalam JavaScript?

王林
Lepaskan: 2023-05-21 10:04:36
asal
697 orang telah melayarinya

JavaScript ialah bahasa pengaturcaraan berorientasikan objek yang menggunakan kelas untuk melaksanakan ciri pengaturcaraan berorientasikan objek seperti enkapsulasi, warisan dan polimorfisme. Dalam JavaScript, kelas boleh mempunyai hubungan yang berbeza, termasuk warisan, pelaksanaan, komposisi, dsb. Artikel ini akan memberikan penerokaan yang mendalam tentang hubungan antara kelas dalam JavaScript.

1. Hubungan warisan

Hubungan yang paling biasa antara kelas ialah hubungan warisan. Dalam JavaScript, kelas boleh mewarisi sifat dan kaedah kelas lain, dengan itu memanjangkan atau mengatasi sifat dan kaedah ini. Perhubungan warisan boleh dilaksanakan menggunakan kata kunci extends. Contohnya:

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }
  
  speak() {
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog('Rufus');
dog.speak(); // Output: "Rufus barks."
Salin selepas log masuk

Dalam kod di atas, kelas Anjing mewarisi kaedah pembina dan pertuturan kelas Haiwan, dan mengatasi kaedah pertuturan. Ini adalah contoh hubungan warisan.

2. Hubungan pelaksanaan

Terdapat juga hubungan pelaksanaan antara kelas biasanya digunakan untuk melaksanakan antara muka. Untuk kelas melaksanakan antara muka, ia mesti melaksanakan semua kaedah yang ditakrifkan dalam antara muka. Tiada konsep antara muka dalam JavaScript, tetapi antara muka boleh disimulasikan dengan mentakrifkannya sebagai kelas kosong. Contohnya:

class Interface {
  constructor() {
    if (new.target === Interface) {
      throw new TypeError("Cannot construct Interface instances directly");
    }
  }
  
  foo() {}
  bar() {}
}

class MyClass extends Interface {
  foo() {
    console.log("MyClass.foo");
  }
  
  bar() {
    console.log("MyClass.bar");
  }
}

let obj = new MyClass();
obj.foo(); // Output: "MyClass.foo"
obj.bar(); // Output: "MyClass.bar"
Salin selepas log masuk

Dalam kod di atas, kelas Antara Muka mentakrifkan dua kaedah kosong foo dan bar Mana-mana kelas yang mewarisi daripada Antara Muka mesti melaksanakan kedua-dua kaedah ini. Kelas MyClass mewarisi kelas Antaramuka dan melaksanakan kaedah foo dan bar.

3. Hubungan gabungan

Selain hubungan pewarisan dan pelaksanaan, kelas juga boleh mempunyai hubungan gabungan. Perhubungan gubahan bermakna kelas mengandungi satu atau lebih contoh kelas lain sebagai ahlinya. Contohnya:

class Engine {
  constructor() {
    this.type = 'gasoline';
  }
  
  start() {
    console.log("Engine started.");
  }
}

class Car {
  constructor() {
    this.engine = new Engine();
  }
  
  start() {
    console.log("Car started.");
    this.engine.start();
  }
}

let car = new Car();
car.start(); // Output: "Car started." "Engine started."
Salin selepas log masuk

Dalam kod di atas, kelas Kereta mengandungi tika kelas Enjin, yang merupakan contoh perhubungan gubahan. Kaedah permulaan kelas Kereta akan memanggil kaedah mula kelas Enjin.

Kesimpulan

Kelas JavaScript mempunyai hubungan yang berbeza seperti warisan, pelaksanaan dan gabungan. Memahami hubungan antara kelas boleh membantu kami melaksanakan pengaturcaraan berorientasikan objek dengan lebih baik. Dalam aplikasi praktikal, kita boleh memilih perhubungan yang berbeza mengikut situasi tertentu untuk mereka bentuk kod yang lebih cekap dan mantap.

Atas ialah kandungan terperinci Apakah hubungan antara kelas dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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