Memahami kemahiran javascript object inheritance_javascript

Mari kita mulakan dengan kajian yang lebih mendalam: Apakah pewarisan objek JavaScript?

Sebagai contoh, kami mempunyai pembina untuk objek "haiwan".

  function animal() {
    this.type = '动物';
  }

Terdapat juga pembina untuk objek "kucing".

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

Kita tahu kucing juga haiwan Jika objek kucing ini ingin mewarisi sifat-sifat objek haiwan, apa yang perlu kita lakukan?

Pengikat Pembina
Menggunakan pengikatan pembina ialah kaedah paling mudah Hanya gunakan panggilan atau gunakan untuk mengikat objek induk ke objek diri.

 function cat(name,color) {
    animal.apply(this,arguments);
    this.name = name;
    this.color = color;
  }
  var cat1 = new cat("haha", 'red');
  console.log(cat1.type); //动物

Bagaimanapun, kaedah ini agak jarang berlaku.

Salin warisan
Jika anda menyalin semua sifat dan kaedah objek induk ke dalam objek anak, pewarisan juga boleh dicapai.

  function extend(Child, Parent) {
　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　　　}
　　　　c.uber = p;   //桥梁作用
　　}

Cara menggunakan:

 extend(cat, animal);
  var cat1 = new cat("haha","red");
  alert(cat1.type);   // 动物

Warisan prototaip (prototaip)
Berbanding dengan pengikatan langsung di atas, kaedah pewarisan prototaip adalah lebih biasa mengenai prototaip, saya ringkaskan sendiri.

Setiap fungsi mempunyai atribut prototaip, yang merupakan rujukan kepada objek Apabila menggunakan kata kunci baharu untuk mencipta tika baharu, objek contoh akan mewarisi sifat dan kaedah daripada objek prototaip.

Dalam erti kata lain, jika atribut prototaip pembina "kucing" menunjuk kepada contoh "haiwan", maka apabila tika objek "kucing" dicipta, sifat dan kaedah objek "haiwan" akan diwarisi.

Instance yang diwarisi

 cat.prototype = new animal();
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.constructor == cat);  //true
  console.log(cat1.type); // 动物

1. Dalam baris pertama kod, kami menghalakan objek prototaip fungsi kucing ke contoh objek haiwan (yang mengandungi atribut jenis haiwan).

2. Apakah maksud baris kedua kod?

1), pertama, jika kami tidak menambah baris kod ini, jalankan

cat.prototaip = haiwan baharu();
console.log(cat.prototype.constructor == haiwan); //true
Dalam erti kata lain, setiap objek prototaip sebenarnya mempunyai atribut pembina yang menunjuk kepada pembinanya.

2), mari lihat kod di bawah

 cat.prototype = new animal();
  var cat1 = new cat("haha", 'red');
  console.log(cat1.constructor == animal);  //true

Daripada perkara di atas kita melihat bahawa pembina contoh cat1 adalah haiwan, jadi ia jelas salah. . . cat1 jelas dijana oleh new cat(), jadi kita harus membetulkannya secara manual. Nilai pembina objek cat.prototaip ditukar kepada kucing.

3), Jadi ini adalah sesuatu yang perlu kita perhatikan Jika kita menggantikan objek prototaip, kita harus membetulkan atribut pembina objek prototaip secara manual.

o.prototaip = {};
o.prototype.constructor = o;
Warisi prototaip terus
Memandangkan dalam objek haiwan, atribut tidak berubah boleh ditulis terus dalam animal.prototype. Kemudian terus biarkan kucing.prototaip menghala ke haiwan.prototaip untuk mencapai warisan.

Sekarang kita mula-mula menulis semula objek haiwan sebagai:

  function animal() {
  }
  animal.prototype.type = '动物';

Kemudian laksanakan pewarisan:

 cat.prototype = animal.prototype;
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

Berbanding dengan kaedah sebelumnya, kaedah ini lebih cekap (tiada instance haiwan dibuat) dan menjimatkan ruang. Tetapi adakah ini perkara yang betul untuk dilakukan? Jawapannya tidak betul, mari kita teruskan mencari.

kucing.prototaip = haiwan.prototaip;
Barisan kod ini menjadikan cat.prototype dan animal.prototype menghala ke objek yang sama, jadi jika atribut tertentu cat.prototype ditukar, ia akan dicerminkan dalam animal.prototype, yang jelas bukan yang kita mahu lihat.

Sebagai contoh, jika kita menjalankan:

console.log(animal.prototype.constructor == haiwan) //false
Hasilnya palsu, kenapa? cat.prototype.constructor = cat; Baris ini juga akan menukar atribut pembina haiwan.prototaip.

Gunakan objek kosong sebagai perantara

  var F = function(){};
  F.prototype = animal.prototype;
  cat.prototype = new F();
  cat.prototype.constructor = cat;

Menggabungkan dua kaedah di atas, kerana F ialah objek kosong, ia hampir tidak mengambil memori. Pada masa ini, mengubah suai objek prototaip kucing tidak akan menjejaskan objek prototaip haiwan.

console.log(animal.prototype.constructor == haiwan); // true
Kemudian kita merangkum kaedah di atas:

  function extend(Child, Parent) {
　　　　var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
　　　　Child.uber = Parent.prototype;
　　}

Apabila menggunakannya, kaedahnya adalah seperti berikut:

 extend(cat,animal);
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

Child.uber = Parent.prototype; Baris kod ini bertindak sebagai jambatan, membenarkan atribut uber objek anak untuk terus menunjuk ke atribut prototaip objek induk Ini bersamaan dengan membuka saluran yang dipanggil uber on objek diri, membenarkan contoh objek anak kepada Keupayaan untuk menggunakan semua sifat dan kaedah objek induk.

Di atas adalah pemahaman saya tentang pewarisan objek JavaScript. Saya harap ia dapat membantu anda lebih kurang Terima kasih kerana membaca.