Penjelasan warisan Javascript disepakati, tetapi telah ditunda. Tanpa basa -basi lagi, ikuti saja.
Karena Anda ingin memahami warisan, itu membuktikan bahwa Anda sudah memiliki pemahaman tertentu tentang berorientasi objek JavaScript. Jika Anda tidak memahami apa pun, Anda dapat merujuk pada penjelasan dasar JS yang berorientasi objek, mode pabrik, mode konstruktor, mode prototipe, mode campuran, mode prototipe dinamis ". Selanjutnya, mari kita bicara tentang warisan JavaScript yang umumnya melalui metode tersebut.
Rantai prototipe
Cara termudah untuk mengimplementasikan warisan dalam JavaScript adalah dengan menggunakan rantai prototipe dan titik prototipe tipe anak ke instance tipe induk, yaitu, "subtipe.prototype = tipe induk baru ();". Metode implementasi adalah sebagai berikut:
// Buat fungsi konstruktor supertype () {this.name = ['wuyuchang', 'jack', 'tim']; this.property = true;} // tambahkan metode supertype.prototype.getSuerPerValue = function () {return this.property;} // Buat subtipe fungsi konstruktor () {this.test = ['h1', 'h2', 'h3', 'h4']; this.subproperty = false;} // langkah -langkah kunci untuk mengimplementasikan pewarisan, prototipe titik subtipe ke instance dari tipe induk subtipe.prototype = supertype baru (); // Tambahkan metode ke tipe anak di sini. Itu harus setelah warisan diimplementasikan, jika tidak pointer akan diarahkan ke instance dari jenis induk, dan metode ini kosong. Subtipe.prototype.getSubValue = function () {return this.subproperty;}/* Berikut ini adalah contoh kode uji*/var instance1 = new SubType (); instance1.name.push ('wyc'); instance1.test.push ('h5'); ware (instance1. // truealert (instance1.getSubValue ()); // falsealert (instance1.name); // wuyuchang, jack, tim, wycalert (instance1.test); // h1, h2, h3, h4, h5var instance2 = baru subtipe (); waspada (instance2.name); // wuyuchang, jack, tim, wycalert (instance2.test); // H1, H2, H3, H4Anda dapat melihat bahwa kode di atas adalah warisan sederhana yang diimplementasikan melalui rantai prototipe, tetapi masih ada beberapa masalah dalam contoh kode uji. I believe that after reading my blog post "Basic Explanation of Object-Oriented JS, Factory Mode, Constructor Mode, Prototype Mode, Mixed Mode, Dynamic Prototype Mode", I must know that the first problem with the prototype chain code is that the prototype of the subtype is an instance of the parent type, that is, the attributes of the parent type contained in the prototype of the subtype, which causes the prototype attributes that reference the type value akan dibagikan oleh semua contoh . Instance1.name.push ('wyc'); dari kode di atas dapat membuktikan keberadaan masalah ini. Masalah kedua dengan rantai prototipe adalah bahwa saat membuat instance subtipe, parameter tidak dapat diteruskan ke konstruktor supertype . Oleh karena itu, dalam pengembangan aktual, kami jarang menggunakan rantai prototipe saja.
Pinjam konstruktor
Untuk menyelesaikan dua masalah dalam rantai prototipe, pengembang mulai menggunakan teknik yang disebut konstruktor peminjam untuk memecahkan masalah dalam rantai prototipe. Gagasan implementasi teknologi ini juga cukup sederhana. Anda hanya perlu memanggil konstruktor jenis induk dalam konstruktor subtipe. Jangan lupa bahwa fungsi hanyalah objek yang menjalankan kode di lingkungan tertentu, sehingga konstruktor dapat dieksekusi melalui metode Apply () atau Call () . Kodenya adalah sebagai berikut:
// Buat fungsi konstruktor superType (name) {this.name = name; this.color = ['pink', 'yellow']; this.property = true; this.testfun = function () {alert ('http://tools.vevb.com/'); }} // Tambahkan metode supertype.prototype.getSuerPerValue = function () {return this.property;} // Buat subtipe fungsi konstruktor (name) {supertype.call (this, name); this.test = ['h1', 'h2', 'h3', 'h4']; this.subproperty = false;} // Tambahkan metode ke subtipe di sini. Be sure to implement inheritance, otherwise the pointer will be pointed to an instance of the parent type, and the method is empty SubType.prototype.getSubValue = function() { return this.subproperty;}/* The following is a test code example*/var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']); instance1.name.push ('hello'); instance1.test.push ('h5'); instance1.color.push ('blue'); instance1.testfun (); // http://tools.vevb.com/alert(instance1.name); // Wuyuchang, Jack, Nick, Hello // Alert (instance1.getSuerperValue ()); // peringatan kesalahan (instance1.test); // H1, H2, H3, H4, H5 Alert (instance1.getSubValue ()); // peringatan palsu (instance1.color); // pink, kuning, bluevar instance2 = subtipe baru ('wyc'); instance2.testfun (); // http://tools.vevb.com/alert(instance2.name); // wyc // alert (instance2.getsuerpervalue ()); // peringatan kesalahan (instance2.test); // h1, h2, h3, h4alert (instance2.getsubValue ()); // falsealert (instance2.color); // merah muda, kuningAnda dapat melihat bahwa dalam kode di atas, konstruktor subtipe subtipe dalam kode di atas, warisan atribut direalisasikan dengan memanggil tipe induk "supertype.call (ini, nama);". Anda juga dapat meneruskan parameter ke jenis induk saat subtipe dibuat, tetapi masalah baru akan datang. Anda dapat melihat bahwa saya mendefinisikan metode dalam konstruktor jenis induk: testfun, dan metode dalam prototipe jenis induk: getSupervalue. Namun, setelah instantiasi subtipe, masih tidak mungkin untuk menyebut metode GetSupervalue yang didefinisikan dalam prototipe jenis induk , dan hanya dapat memanggil metode konstruktor dalam jenis induk: testfun. Ini sama dengan hanya menggunakan mode konstruktor dalam membuat objek, sehingga fungsi tidak dapat digunakan kembali. Mempertimbangkan masalah ini, teknik konstruktor pinjaman jarang digunakan sendiri.
Kombinasi warisan (rantai prototipe + konstruktor pinjam)
Seperti namanya, warisan kombinasi adalah pola yang terdiri dari keuntungan menggabungkan penggunaan rantai prototipe dan konstruktor pinjaman. Implementasinya juga sangat sederhana. Karena ini adalah kombinasi, tentu saja menggabungkan keunggulan kedua belah pihak, yaitu metode pewarisan rantai prototipe, dan konstruktor mewarisi atribut . Kode spesifik diimplementasikan sebagai berikut:
// Buat fungsi konstruktor superType (name) {this.name = name; this.color = ['pink', 'yellow']; this.property = true; this.testfun = function () {alert ('http://tools.vevb.com/'); }} // Tambahkan metode supertype.prototype.getSuerPerValue = function () {return this.property;} // Buat subtipe fungsi konstruktor (name) {supertype.call (this, name); this.test = ['h1', 'h2', 'h3', 'h4']; this.subproperty = false;} subtipe.prototype = supertype baru (); // Tambahkan metode ke subtipe di sini. Itu harus setelah warisan diimplementasikan, jika tidak, pointer akan diarahkan ke instance dari jenis induk, dan metode ini kosong subtipe.prototype.getSubValue = function () {return this.subproperty;}/* berikut ini adalah contoh kode uji*/var instance1 = subtipe baru (['wuyuchang', ',', ',', ',', 'wuyuchang', ',', ',' wuyuchang ',', ',' wuyuchang ',', ',' wuyuchang ',', 'wuyuchang', ',' wuyuchang ',', 'wuyuchang', 'wuyuchang' 'Nick']); instance1.name.push ('hello'); instance1.test.push ('h5'); instance1.color.push ('blue'); instance1.testfun (); // http://tools.vevb.com/alert(instance1.name); // wuyuchang, jack, nick, helloalert (instance1.getsuerpervalue ()); // truealert (instance1.test); // H1, H2, H3, H4, H5 Alert (instance1.getSubValue ()); // peringatan palsu (instance1.color); // pink, kuning, bluevar instance2 = subtipe baru ('wyc'); instance2.testfun (); // http://tools.vevb.com/alert(instance2.name); // peringatan WYC (instance2.getSuerPerValue ()); // truealert (instance2.test); // h1, h2, h3, h4alert (instance2.getsubValue ()); // falsealert (instance2.color); // merah muda, kuningKode di atas mewarisi properti tipe induk melalui supertype.call (ini, nama); dan mewarisi metode tipe induk melalui subtipe.prototype = supertype baru ();. Kode di atas dengan mudah memecahkan masalah yang dihadapi oleh rantai prototipe dan konstruktor pinjaman, dan telah menjadi metode warisan instance yang paling umum digunakan dalam JavaScript. Namun, mode campuran bukan tanpa kekurangannya. Dapat dilihat bahwa dalam kode di atas, atribut jenis induk sebenarnya telah diwariskan saat mewarisi metode. Namun, jenis referensi dibagi saat ini. Oleh karena itu, konstruktor tipe induk dipanggil dalam konstruktor jenis anak setelah subtipe, sehingga mewarisi atribut tipe induk untuk menimpa atribut yang diwariskan dalam prototipe. Jelas tidak perlu memanggil konstruktor dua kali, tetapi apakah ada cara untuk menyelesaikannya? Saat menyelesaikan masalah ini, lihat pertama -tama pada dua mode berikut.
Warisan prototipe
Metode implementasi pewarisan prototipe berbeda dari warisan biasa. Prototipe warisan tidak menggunakan konstruktor dalam arti yang ketat, tetapi sebaliknya menggunakan prototipe untuk membuat objek baru berdasarkan objek yang ada, dan tidak perlu membuat tipe khusus sebagai hasilnya. Kode spesifiknya adalah sebagai berikut:
objek fungsi (o) {function f () {} f.prototype = o; mengembalikan f baru ();}Contoh kode:
/* Prototipe warisan*/objek fungsi (o) {function f () {} f.prototype = o; return new f ();} var person = {name: 'wuyuchang', friends: ['wyc', 'nicholas', 'tim']} var anotherPerson = objek (orang); OtherPerson.name = 'Greg'; OtherPerson.Friends.push ('Bob'); var OtherPerson2 = objek (orang); OtherPerson2.name = 'jack'; AnotherPerson2.friends.push ('Rose'); alert (person.friends); // WYC, Nicholas, Tim, Bob, RoseWarisan parasit
/* Pewarisan parasit*/fungsi createanother (asli) {var clone = objek (asli); clone.sayhi = function () {alert ('hai'); } return clone;}Contoh Penggunaan:
/* Prototipe warisan*/objek fungsi (o) {function f () {} f.prototype = o; return new f ();} /* pewarisan parasit* /function createanother (asli) {var clone = objek (asli); clone.sayhi = function () {alert ('hai'); } return clone;} var person = {name: 'wuyuchang', friends: ['wyc', 'nicholas', 'rose']} var anotherPerson = createanother (orang); OtherPerson.sayhi ();Warisan kombinasi parasit
Saya menyebutkan sebelumnya kerugian dari implementasi pola kombinasi dari warisan dalam JavaScript. Sekarang mari kita selesaikan kekurangannya. Gagasan implementasi adalah untuk mewarisi atribut untuk konstruktor, dan metode warisan bentuk campuran dari rantai prototipe tidak perlu membuat instantiasi konstruktor jenis induk saat mewarisi metode. Kodenya adalah sebagai berikut:
objek fungsi (o) {function f () {} f.prototype = o; mengembalikan f baru ();}/* Parasitic Combination Warisan*/function inheritprototype (subtipe, supertype) {var prototipe = objek (supertype.prototype); prototipe.constructor = subtipe; subtype.prototype = prototipe;}Saat menggunakannya, Anda hanya perlu mengganti baris kode "subtype.prototype = supertype baru ();" Dalam mode kombinasi dengan whereitprototype (subtipe, supertype);. Efisiensi pewarisan kombinatorial parasit tercermin karena itu menyebut konstruktor tipe induk hanya sekali, menghindari penciptaan sifat yang tidak perlu atau berlebihan. Pada saat yang sama, rantai prototipe dapat tetap tidak berubah, jadi instanceof dan isPrototipeof () juga dapat digunakan secara normal. Ini juga merupakan metode warisan paling ideal saat ini, dan saat ini berubah menjadi model ini. (Yui juga menggunakan mode ini.)
Posting blog ini mengacu pada "JavaScript Lanjutan Pemrograman ke -3 Edisi". Kode ini ditulis ulang dan lebih spesifik, dan berkomentar untuk memudahkan semua orang untuk dipahami. Jika Anda memiliki wawasan unik tentang warisan JS, jangan pelit. Balas pendapat Anda untuk referensi Anda!