Analisis mendalam dari pemrograman berorientasi objek JavaScript

2. Pemrograman Berorientasi Objek Javascript: Warisan Konstruktor

Bagian ini terutama memperkenalkan cara menghasilkan instance yang "mewarisi" beberapa objek.

Misalnya, sekarang ada konstruktor untuk objek "hewan".

 fungsi hewan () {this.species = "hewan"; }

Ada juga konstruktor objek "kucing",

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

Bagaimana bisa "kucing" mewarisi "hewan"?

1. Binding konstruktor

Cara termudah adalah menggunakan metode panggilan atau terapkan untuk mengikat konstruktor objek induk ke objek anak, yaitu, tambahkan baris ke konstruktor objek anak:

 function cat (name, color) {Animal.Apply (ini, argumen); this.name = name; this.color = warna; } var cat1 = kucing baru ("rambut besar", "kuning"); peringatan (cat1.species); // hewan

2. Mode prototipe

Pendekatan yang lebih umum adalah menggunakan atribut prototipe.

Jika objek prototipe "kucing" menunjuk ke instance hewan, maka semua contoh "kucing" dapat mewarisi hewan.

 Cat.prototype = hewan baru (); Cat.prototype.constructor = cat; var cat1 = kucing baru ("rambut besar", "kuning"); peringatan (cat1.species); // hewan

Di baris pertama kode, kami mengarahkan objek prototipe CAT ke instance hewan.

1.cat.prototype = hewan baru ();

Ini setara dengan menghapus nilai asli dari objek prototipe dan kemudian menetapkan nilai baru. Tapi, apa arti baris kedua?

1.cat.prototype.constructor = Cat;

Ternyata objek prototipe apa pun memiliki atribut konstruktor yang menunjuk ke fungsi konstruktornya. Dengan kata lain, properti konstruktor dari objek Cat.Prototype menunjuk ke CAT.

Kami telah menghapus nilai asli dari objek prototipe ini pada langkah sebelumnya, sehingga objek prototipe baru tidak memiliki atribut konstruktor, jadi kami harus menambahkannya secara manual, jika tidak akan ada masalah dengan "rantai warisan" berikutnya. Inilah yang dimaksud dengan baris kedua.

Singkatnya, ini adalah poin yang sangat penting, dan Anda harus mengikutinya saat pemrograman. Semua yang berikut berikut: Jika objek prototipe diganti,

1.o.prototype = {};

Kemudian, langkah selanjutnya harus menambahkan atribut konstruktor ke objek prototipe baru dan merujuk atribut ini kembali ke fungsi konstruktor asli.

1.o.prototype.constructor = o;

3. Langsung mewarisi prototipe

Karena pada objek hewan, sifat yang tidak berubah dapat ditulis langsung ke hewan. Prototipe. Oleh karena itu, kita juga dapat membiarkan kucing () melompati hewan () dan secara langsung mewarisi hewan. Prototipe.

Sekarang, mari kita tulis ulang objek hewan terlebih dahulu:

1.Function Animal () {}

2.animal.prototype.species = "hewan";

Kemudian, arahkan objek prototipe kucing dan arahkan ke objek prototipe hewan, sehingga warisan selesai.

 Cat.prototype = animal.prototype; Catcat.prototype.constructor = cat; var cat1 = kucing baru ("rambut besar", "kuning"); peringatan (cat1.species); // Hewan

Dibandingkan dengan metode sebelumnya, keuntungan dari ini adalah bahwa ia relatif efisien (tidak perlu mengeksekusi dan membuat instance hewan) dan lebih menghemat memori. Kerugiannya adalah bahwa cat.prototype dan hewan.Prototipe sekarang menunjuk ke objek yang sama, sehingga setiap modifikasi pada CAT.Prototype akan tercermin dalam hewan. Prototipe.

Jadi, kode di atas sebenarnya bermasalah. Silakan lihat baris kedua

1.cat.prototype.constructor = Cat;

Kalimat ini benar -benar mengubah atribut konstruktor dari objek hewan. Prototipe!

1.Alert (animal.prototype.constructor); // Kucing

4. Gunakan benda kosong sebagai perantara

Karena "warisan prototipe langsung" memiliki kelemahan di atas, objek kosong dapat digunakan sebagai perantara.

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

F adalah objek kosong, sehingga hampir tidak menempati memori. Pada saat ini, memodifikasi objek prototipe CAT tidak akan mempengaruhi objek prototipe hewan.

1.Alert (animal.prototype.constructor); // hewan

5. Fungsi enkapsulasi mode prototipe

Kami merangkum metode di atas ke dalam fungsi agar mudah digunakan.

 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 ("rambut besar", "kuning"); peringatan (cat1.species); // hewan

Fungsi perpanjangan ini adalah metode bagaimana perpustakaan YUI mengimplementasikan warisan.

Juga, izinkan saya menjelaskannya. Baris terakhir dari tubuh fungsi

1.Child.uber = Parent.Prototype;

Ini berarti mengatur atribut Uber untuk objek anak, yang secara langsung menunjuk ke atribut prototipe objek induk. Ini setara dengan membuka saluran pada objek anak dan secara langsung memanggil metode objek induk. Baris ini ditempatkan di sini hanya untuk mencapai kelengkapan warisan dan murni properti cadangan.

6. Salin warisan

Di atas adalah menggunakan objek prototipe untuk mengimplementasikan warisan. Kami juga dapat mengubah pemikiran kami dan menggunakan metode "salin" untuk mencapai warisan. Sederhananya, jika semua sifat dan metode objek induk disalin ke dalam objek anak, tidak dapat warisan dicapai?

Pertama -tama, letakkan semua sifat hewan yang tidak berubah pada objek prototipe.

1.Function Animal () {}

2.animal.prototype.species = "hewan";

Kemudian, tulis fungsi lain untuk mencapai tujuan penyalinan properti.

 Function Extend2 (anak, induk) {var p = parent.prototype; var c = child.prototype; untuk (var i di p) {c [i] = p [i]; } c.uber = p; }

Fungsi fungsi ini adalah menyalin properti dalam objek prototipe objek induk ke objek prototipe objek anak satu per satu.

Saat menggunakannya, tulis ini:

 Extend2 (kucing, hewan); var cat1 = kucing baru ("rambut besar", "kuning"); peringatan (cat1.species); // hewan

Artikel di atas analisis mendalam tentang pemrograman berorientasi objek dalam JavaScript adalah semua konten yang saya bagikan dengan Anda. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.