Artikel ini menjelaskan mekanisme warisan JavaScript. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Umumnya sulit bagi pemula untuk memahami mekanisme warisan bahasa JavaScript. Itu tidak memiliki konsep "subclass" dan "kelas induk", juga tidak memiliki perbedaan antara "kelas" dan "instance". Ini sepenuhnya bergantung pada model "rantai prototipe" yang sangat aneh untuk mencapai warisan.
Saya menghabiskan banyak waktu mempelajari bagian ini dan membuat banyak catatan. Tetapi mereka semua adalah ingatan yang dipaksakan dan tidak dapat dipahami secara fundamental.
1. Cara membuat kelas
Misalkan ada kelas yang disebut orang sebagai berikut:
Salin kode sebagai berikut: var person = fungsi (nama, usia) {
this.name = name;
this.age = usia;
}
Person.prototype.getName = function () {
kembalikan nama ini;
}
Seperti disebutkan di atas: orang mewakili semua orang di bumi, dan setiap orang memiliki dua atribut dasar ini: nama dan usia; Sekarang kami ingin menerapkan kelas siswa, dan kemudian kami tahu; Siswa juga seseorang, dan siswa juga memiliki atribut seperti nama dan usia; Pertanyaannya sekarang adalah bagaimana kita bisa membangun hubungan ini?
Pertama-tama mari kita lihat bagaimana bahasa yang berorientasi objek murni melakukannya (seperti ActionsScript3)
Salin kode sebagai berikut: kelas siswa memperpanjang orang {}; // Sangat sederhana, satu baris kode; agar lebih tepatnya, satu kata-diperpanjang
2. Bagaimana saya bisa melakukannya jika saya mengubahnya menjadi JS
Sebelum menjelaskan implementasi mekanisme warisan JS, mari kita pahami rantai prototipe JS: terlebih dahulu:
Salinan kode adalah sebagai berikut: var person = orang baru ('flw-flw', 21);
person.getName (); // "Fiised-flw"
Adapun metode getName () di atas, bagaimana cara dieksekusi? Pertama, Anda akan menemukan apakah ada metode getName () dalam fungsi orang dan menemukan tidak; Kemudian pergi ke orang. Prototipe untuk mencari dan menemukan ada! Lalu sebut saja, bagaimana jika tidak? Terus ikuti metode yang sama dan cari sepanjang prototipe sampai Anda menemukan metode atau mencapai bagian atas rantai prototipe!
Misalnya, sekarang ada konstruktor yang disebut anjing yang mewakili prototipe objek anjing.
Salin kode sebagai berikut: function dog (name) {
this.name = name;
}
Menggunakan baru untuk konstruktor ini akan menghasilkan instance dari objek anjing.
Salinan kode adalah sebagai berikut: var doga = anjing baru ('rambut besar');
waspada (Doaga.name); // rambut besar
Perhatikan kata kunci ini dalam konstruktor, yang mewakili objek instance yang baru dibuat.
3. Kerugian operator baru
Ada satu kerugian dalam menggunakan konstruktor untuk menghasilkan objek instan, yaitu kemampuan untuk berbagi atribut dan metode.
Misalnya, dalam konstruktor objek anjing, atur spesies atribut umum dari objek instan.
Salin kode sebagai berikut: function dog (name) {
this.name = name;
this.species = 'canidae';
}
Kemudian, dua objek instance dihasilkan:
Salinan kode adalah sebagai berikut: var doga = anjing baru ('rambut besar');
var dogb = anjing baru ('eimao');
Atribut spesies dari kedua objek ini independen, memodifikasi yang satu tidak akan mempengaruhi yang lain.
Salinan kode adalah sebagai berikut: Doaga.species = 'betina';
peringatan (dogb.species); // Tunjukkan "Keluarga Canine", tidak terpengaruh oleh Doaga
Setiap objek instan memiliki salinannya sendiri dari sifat dan metodenya. Ini tidak hanya gagal untuk berbagi data, tetapi juga pemborosan sumber daya yang sangat besar.
Jadi: Ide Warisan: Menerapkan mekanisme warisan melalui rantai prototipe unik JS!
4. Warisan berdasarkan rantai prototipe
1. Warisan dan implementasi langsung
Salin kode sebagai berikut: var siswa = fungsi (nama, usia, sid) {
Person.call (ini, nama, usia);
this.sid = sid;
}
Student.prototype = orang baru (); // menempatkan orang di rantai prototipe siswa untuk menerapkan mekanisme warisan
Student.prototype.constructor = Siswa;
Student.prototype.getResults = function () {
// Dapatkan nilai siswa
}
Penting untuk tidak melewatkan siswa.prototype.constructor = line siswa! , Saat mendefinisikan konstruktor, prototipe defaultnya adalah instance objek, dan kemudian atribut konstruktor dari prototipe secara otomatis diatur ke fungsi itu sendiri! Lai Lai Jika prototipe diatur secara manual ke objek lain, objek baru secara alami tidak memiliki nilai konstruktor dari objek asli, sehingga atribut konstruktornya perlu diatur ulang. menyukai:
Salin kode sebagai berikut: var test = function () {
this.Time = "Now";
}
console.log (test.prototype); // objek {} objek kosong
console.log (test.prototype.constructor); // function () {this.time = "now";}, dan fungsi itu sendiri
// Jika Anda secara manual mengubah properti prototipe tes
Test.prototype = {
somefunc: function () {
Console.log ('Hello World!');
}
};
console.log (test.prototype.constructor); // objek fungsi () {[kode asli]}
// Maka Anda akan menemukan bahwa penunjuk benar -benar salah, jadi ketika mengubah properti prototipe secara manual, Anda perlu mengubah penunjuk konstruktornya;
Setelah tes di atas, Anda akan tahu mengapa Anda perlu memodifikasi nilai konstruktor.
2. Mengenak fungsi yang diwariskan diperpanjang
Salin kode sebagai berikut: function extend (subclass, superclass) {
var f = function () {};
F.prototype = superclass.prototype;
subclass.prototype = new f ();
subclass.prototype.constructor = subclass;
}
Faktanya, fungsi fungsi ini hanyalah sebuah enkapsulasi dari proses warisan di atas, dan perbedaannya adalah:
Ini hanya mewarisi atribut prototipe superclass, dan tidak mewarisi atribut dalam konstruktor superclass;
Keuntungan dari ini adalah untuk mengurangi overhead konstruktor baru!
Tentu saja, masalah selanjutnya adalah bahwa Anda tidak dapat begitu saja melewati fungsi ini untuk memungkinkan subclass mewarisi semua sifat superclass
memperbaiki:
Salin kode sebagai berikut: // Lanjutkan untuk menambahkan baris kode ke konstruktor siswa:
Person.call (ini, nama, usia);
5. Ringkasan
Dengan menggunakan prinsip rantai prototipe JS, kami dapat dengan mudah menerapkan mekanisme warisan JS. Meskipun tidak terlalu ketat, tujuan saya telah tercapai: cobalah untuk tampil kode berulang sekali!
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.