Memahami warisan objek javascript

Pertama -tama mari kita pelajari pertanyaan secara mendalam. Apa itu warisan objek JavaScript?

Misalnya, kami memiliki konstruktor objek "hewan".

 fungsi hewan () {this.type = 'hewan'; }

Ada juga konstruktor untuk objek "kucing".

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

Kita tahu bahwa kucing juga milik hewan. Jika objek kucing ini ingin mewarisi sifat -sifat objek hewan, apa yang harus kita lakukan?

Pengikatan konstruktor

Menggunakan pengikatan konstruktor adalah cara termudah, cukup gunakan panggilan atau berlaku untuk mengikat objek induk ke objek sendiri.

 function cat (name, color) {Animal.Apply (ini, argumen); this.name = name; this.color = warna; } var cat1 = kucing baru ("haha", 'merah'); console.log (cat1.type); // Hewan

Namun, metode ini relatif jarang.

Salin warisan

Jika semua sifat dan metode objek induk disalin ke dalam objek anak, warisan juga dapat dicapai.

 fungsi perluasan (anak, induk) {var p = parent.prototype; var c = child.prototype; untuk (var i di p) {c [i] = p [i]; } c.uber = p; // fungsi jembatan}

Bagaimana menggunakan:

 memperluas (kucing, hewan); var cat1 = kucing baru ("haha", "merah"); peringatan (cat1.type); // hewan

Prototipe warisan (prototipe)

Dibandingkan dengan ikatan langsung di atas, metode pewarisan prototipe lebih umum. Saya telah merangkum prototipe itu sendiri.

Setiap fungsi memiliki atribut prototipe, yang merupakan referensi ke suatu objek. Saat membuat instance baru menggunakan kata kunci baru, objek instan ini akan mewarisi atribut dan metode dari objek prototipe.

Artinya, jika atribut prototipe dari konstruktor "CAT" diarahkan ke instance "hewan", maka ketika instance objek "kucing" dibuat, sifat dan metode objek "hewan" diwariskan.

Contoh warisan

 cat.prototype = hewan baru (); cat.prototype.constructor = cat; var cat1 = kucing baru ("haha", "merah"); console.log (cat1.constructor == cat); // true console.log (cat1.type); //Hewan

1. Dalam baris pertama kode, kami mengarahkan objek prototipe fungsi CAT ke instance objek hewan (yang berisi atribut jenis hewan).

2. Apa arti baris kedua kode?

1) Pertama, jika kita tidak menambahkan baris kode ini, jalankan

cat.prototype = hewan baru ();

console.log (cat.prototype.constructor == hewan); //BENAR

Dengan kata lain, pada kenyataannya, setiap objek prototipe memiliki atribut konstruktor yang menunjuk ke fungsi konstruktornya.

2) Mari kita lihat kode berikut

 cat.prototype = hewan baru (); var cat1 = kucing baru ("haha", 'merah'); console.log (cat1.constructor == hewan); //BENAR

Dari hal di atas kita melihat bahwa konstruktor instance cat1 adalah hewan, jadi jelas salah. . . Cat1 jelas dihasilkan oleh kucing baru (), jadi kita harus memperbaikinya secara manual. Nilai konstruktor objek CAT.Prototype diubah menjadi CAT.

3) Jadi ini juga merupakan poin yang harus kita perhatikan. Jika kita mengganti objek prototipe, kita harus secara manual memperbaiki atribut konstruktor dari objek prototipe.

o.prototype = {};

o.prototype.constructor = o;

Prototipe mewarisi langsung

Karena pada benda -benda hewan, sifat yang tidak berubah dapat ditulis secara langsung dalam hewan. Prototipe. Kemudian biarkan cat.prototype menunjuk ke hewan.prototype, yang mewujudkan warisan.

Sekarang mari kita tulis ulang objek hewan terlebih dahulu sebagai:

 function hewan () {} hewan.prototype.type = 'hewan';

Kemudian terapkan warisan:

 cat.prototype = animal.prototype; cat.prototype.constructor = cat; var cat1 = kucing baru ("haha", "merah"); console.log (cat1.type); // Hewan

Dibandingkan dengan metode sebelumnya, metode ini tampaknya lebih efisien (tidak ada instance hewan yang dibuat), menghemat ruang. Tapi apakah ini benar? Jawabannya salah, mari kita lanjutkan membaca.

cat.prototype = animal.prototype;

Baris kode ini memungkinkan cat.prototype dan hewan. Prototipe untuk menunjuk ke objek yang sama, jadi jika properti tertentu dari Cat.prototype diubah, itu akan tercermin pada hewan. Prototipe, yang jelas bukan yang ingin kita lihat.

Misalnya, kami menjalankan:

console.log (animal.prototype.constructor == hewan) // false

Ternyata salah, mengapa? cat.prototype.constructor = cat; Baris ini juga akan mengubah properti konstruktor hewan. Prototipe.

Gunakan benda kosong sebagai perantara

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

Menggabungkan dua metode di atas, karena F adalah objek kosong, hampir tidak menempati memori. Memodifikasi objek prototipe CAT pada saat ini tidak akan mempengaruhi objek prototipe hewan.

console.log (animal.prototype.constructor == hewan); // BENAR

Kemudian kami merangkum metode di atas:

 function extend (anak, induk) {var f = function () {}; F.prototype = parent.prototype; Child.prototype = baru f (); Child.prototype.constructor = anak; Child.uber = Parent.prototype; }

Saat menggunakannya, metode ini adalah sebagai berikut:

 memperluas (kucing, hewan); var cat1 = kucing baru ("haha", "merah"); console.log (cat1.type); // hewan

Child.uber = Parent.prototype; Baris kode ini adalah fungsi jembatan, yang memungkinkan atribut uber dari objek anak untuk menunjuk langsung ke atribut prototipe objek induk, yang setara dengan membuka saluran yang disebut Uber pada objek sendiri, sehingga instance objek anak dapat menggunakan semua properti dan metode objek induk.

Di atas adalah pemahaman saya tentang mewarisi objek JavaScript. Saya harap ini dapat membantu Anda lebih atau kurang. Terima kasih atas bacaan Anda.