Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melaksanakan warisan dalam javascript? Analisis ringkas pelbagai kaedah

Bagaimana untuk melaksanakan warisan dalam javascript? Analisis ringkas pelbagai kaedah

PHPz
PHPzasal
2023-04-24 10:52:43723semak imbas

Sebelum bercakap tentang warisan dalam JavaScript, kita perlu memahami dahulu apa itu kelas. Dalam bahasa pengaturcaraan biasa, seperti Java, C++, C#, dll., kelas ialah struktur atur cara yang digunakan untuk merangkum data dan kaedah Objek boleh dibuat melalui instantiasi untuk mencapai penggunaan semula dan pengabstrakan.

Tetapi dalam JavaScript, kelas ditakrifkan dan digunakan sedikit berbeza daripada dalam bahasa lain. Kelas JavaScript adalah berdasarkan objek, dan objek berada di tengah-tengah bahasa. JavaScript tidak mempunyai sistem pewarisan kelas yang begitu rumit, dan semua kelas boleh diwarisi, kecuali untuk beberapa objek terbina dalam tertentu, seperti Matematik, Tarikh, dsb., kebanyakan objek dalam JavaScript boleh berfungsi sebagai kelas asas. .

Dalam JavaScript, pewarisan mempunyai kaedah berikut:

  1. Pewarisan rantaian prototaip:

Pewarisan rantaian prototaip ialah kaedah pewarisan paling asas dalam JavaScript. Gunakan prototaip untuk melaksanakan fungsi dan warisan harta daripada kelas induk. Ringkasnya, prototaip subkelas menunjukkan contoh kelas induk, dengan itu mencapai warisan. Dengan cara ini, anda boleh melanjutkan kelas induk dan menambah atribut dan kaedah baharu.

Contohnya:

function Animal() {
  this.species = "动物";
}

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype = new Animal();  // 将 Cat 的原型对象指向 Animal 的实例

var cat1 = new Cat('小红', '黑色');
console.log(cat1.species);  // 输出 "动物"
  1. Warisan pembina yang dipinjam:

Warisan pembina yang dipinjam, juga dipanggil warisan klasik atau warisan pembina yang dicuri, adalah Merujuk kepada memanggil pembina kelas induk dalam pembina subkelas untuk mencapai warisan. Kaedah ini berbeza daripada pewarisan rantaian prototaip Ia boleh mewarisi atribut kelas induk dan mencapai kebebasan atribut.

Contohnya:

function Animal(name, color) {
  this.name = name;
  this.color = color;
}

function Cat(name, color) {
  Animal.call(this, name, color);  // 在 Cat 类的构造函数中调用 Animal 类的构造函数
}

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
  1. Warisan gabungan:

Warisan gabungan merujuk kepada menggabungkan warisan rantai prototaip dan warisan pembina yang dipinjam, seperti ini Anda boleh mewarisi sifat dan kaedah kelas induk pada masa yang sama, dan anda boleh menggunakan sifat dan kaedah kelas induk.

Contohnya:

function Animal(name, color) {
  this.name = name;
  this.color = color;
}

Animal.prototype.eat = function() {
  console.log('我是一只动物,我可以吃东西!');
}

function Cat(name, color) {
  Animal.call(this, name, color);
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"
  1. Warisan parasit:

Warisan parasit merujuk kepada mencipta fungsi yang hanya digunakan untuk merangkum proses pewarisan. Fungsi ini meningkatkan objek dalam beberapa cara dan akhirnya mengembalikan objek ini. Objek ini boleh digunakan sebagai objek prototaip untuk subkelas untuk mencapai warisan.

Contohnya:

function Animal(name) {
  var obj = {
    name: name,
    eat: function() {
      console.log('我是一只动物,我可以吃东西!');
    }
  };
  return obj;
}

function Cat(name, color) {
  var animal = Animal.call(this, name);
  animal.color = color;
  return animal;
}

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"
  1. Warisan kombinasi parasit:

Warisan kombinasi parasit merujuk kepada warisan kombinasi parasit berdasarkan warisan gabungan untuk mengoptimumkan prestasi warisan objek. Warisan boleh dicapai dengan mencipta objek baharu yang mewarisi prototaip kelas induk, mengelakkan perangkap untuk memulakan objek apabila memanggil pembina kelas induk.

Contohnya:

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log('我是一只动物,我可以吃东西!');
};

function Cat(name, color) {
  Animal.call(this, name);
  this.color = color;
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"

Ringkasnya, pewarisan JavaScript boleh dilaksanakan dalam pelbagai cara Dalam pembangunan sebenar, anda perlu memilih kaedah yang sesuai berdasarkan senario dan keperluan tertentu.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan warisan dalam javascript? Analisis ringkas pelbagai kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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