Penjelasan terperinci tentang mekanisme pewarisan javascript examples_javascript kemahiran

Contoh dalam artikel ini menerangkan mekanisme pewarisan JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Secara umumnya sukar bagi pemula untuk memahami mekanisme warisan bahasa Javascript Tiada konsep "subkelas" dan "kelas induk", dan tidak ada perbezaan antara "kelas" dan "contoh". satu Model "rantai prototaip" yang sangat pelik untuk melaksanakan pewarisan.

Saya menghabiskan banyak masa untuk mengkaji bahagian ini dan mengambil banyak nota. Tetapi semuanya adalah kenangan yang terpaksa dan tidak dapat difahami secara asas.

1. Cara membuat kelas

Andaikan terdapat kelas yang dipanggil Person seperti berikut:

Salin kod Kod adalah seperti berikut:

var Orang = fungsi(nama, umur) {
This.name = nama;
This.age = umur;
}
Person.prototype.getName = function() {
Kembalikan nama ini;
}

Seperti di atas: Orang mewakili semua orang di bumi, dan setiap orang mempunyai dua sifat asas ini: nama dan umur sekarang kita perlu melaksanakan kelas pelajar, dan kemudian kita tahu seorang pelajar juga seorang, dan pelajar juga mempunyai sifat sedemikian; sebagai nama dan umur ;Persoalannya sekarang ialah bagaimana untuk mewujudkan hubungan ini?
Mari kita lihat dahulu cara bahasa berorientasikan objek tulen melakukannya (seperti: Actionscrpt3)

Salin kod Kod adalah seperti berikut:

kelas Pelajar melanjutkan Orang {} //Sangat mudah, satu baris kod; lebih tepat Katakan ia adalah perkataan--panjangkan

2. Bagaimana untuk melakukannya dengan menukar kepada js

Sebelum menerangkan pelaksanaan mekanisme pewarisan js, mari kita fahami rantai prototaip js dahulu:

Salin kod Kod adalah seperti berikut:

var person = new Person('Poised-flw', 21);
person.getName(); // "Poised-flw"

Bagi kaedah getName() di atas, bagaimanakah ia dilaksanakan? Mula-mula, saya akan mencari kaedah getName() dalam fungsi Person dan mendapati bahawa tiada; kemudian saya akan pergi ke Person.prototype untuk mencari dan mendapati bahawa ada! Kemudian panggilnya, bagaimana jika tidak? Teruskan mencari di sepanjang prototaip dengan cara yang sama sehingga anda menemui kaedah atau mencapai bahagian atas rantaian prototaip!

Sebagai contoh, kini terdapat pembina yang dipanggil DOG, yang mewakili prototaip objek anjing.

Salin kod Kod adalah seperti berikut:

Fungsi DOG(nama){
　　nama.ini = nama;
}

Menggunakan baharu pada pembina ini akan menjana contoh objek anjing.

Salin kod Kodnya adalah seperti berikut:

　var dogA = new DOG('Big Hair');
alert(dogA.name); // Da Mao

Beri perhatian kepada kata kunci ini dalam pembina, yang mewakili objek contoh yang baru dibuat.

3. Kelemahan pengendali baharu

Menggunakan pembina untuk menjana objek contoh mempunyai kelemahan, iaitu sifat dan kaedah tidak boleh dikongsi.
Sebagai contoh, dalam pembina objek DOG, tetapkan spesies atribut biasa bagi objek contoh.

Salin kod Kod adalah seperti berikut:

Fungsi DOG(nama){
　　nama.ini = nama;
　　this.species = 'Canidae';
}

Kemudian, hasilkan dua objek contoh:

Salin kod Kodnya adalah seperti berikut:

　var dogA = new DOG('Big Hair');
var dogB = ANJING baharu('二毛');

Atribut spesies kedua-dua objek ini adalah bebas Mengubah suai salah satu daripadanya tidak akan menjejaskan yang lain.

Salin kod Kod adalah seperti berikut:

dogA.species = 'Feline';
alert(dogB.species); // Paparkan "canine", tidak terjejas oleh dogA

Setiap objek contoh mempunyai salinan sifat dan kaedahnya sendiri. Ini bukan sahaja gagal mencapai perkongsian data, tetapi juga pembaziran sumber yang besar.

Jadi: Idea pewarisan: Laksanakan mekanisme pewarisan melalui rantai prototaip unik js!

4. Pewarisan berdasarkan rantaian prototaip

1. Pelaksanaan pewarisan langsung

Salin kod Kod adalah seperti berikut:

var Pelajar = fungsi(nama, umur, sid) {
Person.call(ini, nama, umur);
This.sid = sid;
}
Students.prototype = new Person(); //Letakkan Person pada rantaian prototaip Pelajar untuk melaksanakan mekanisme pewarisan
Students.prototype.constructor = Pelajar;
Students.prototype.getResults = function() {
// Dapatkan markah pelajar
}

Pastikan anda tidak terlepas baris Students.prototype.constructor = Students! , apabila mentakrifkan pembina, prototaip lalainya ialah contoh Objek, dan kemudian sifat pembina prototaip secara automatik ditetapkan kepada fungsi itu sendiri! ! ! Jika prototaip ditetapkan secara manual kepada objek lain, objek baharu secara semula jadi tidak akan mempunyai nilai pembina objek asal, jadi sifat pembinanya perlu ditetapkan semula. Seperti:

Salin kod Kod adalah seperti berikut:

var Test = function() {
This.time = "sekarang";
}
console.log(Test.prototype); // Objek {} objek kosong
console.log(Test.prototype.constructor); // function() {this.time = "now";}, dan fungsi itu sendiri
// Jika anda menukar atribut prototaip Test
secara manual Test.prototype = {
SomeFunc: function() {
console.log('hello world!');
}
};
console.log(Test.prototype.constructor); // fungsi Objek() { [kod asli] }
// Kemudian anda akan mendapati bahawa anda telah menunjukkannya secara salah, jadi apabila anda menukar atribut prototaip secara manual, anda perlu menukar penunjuk pembinanya

Selepas ujian di atas, anda akan tahu mengapa nilai pembina perlu diubah suai.

2. Merangkumkan fungsi yang diwarisi memanjangkan

Salin kod Kod adalah seperti berikut:

fungsi extend(subClass, superClass) {
var F = function() {};
F.prototaip = superClass.prototype;
subClass.prototype = new F();
​ subClass.prototype.constructor = subClass;
}

Sebenarnya, fungsi fungsi ini hanyalah enkapsulasi proses pewarisan di atas Ia hanya mewarisi atribut prototaip superClass dan tidak mewarisi atribut dalam pembina superClass;
Kelebihan ini ialah ia mengurangkan kos mencipta pembina baharu!
Sudah tentu, masalah seterusnya ialah subClass tidak boleh mewarisi semua atribut superClass melalui fungsi ini sahaja
Penambahbaikan:

Salin kod Kod adalah seperti berikut:

// Teruskan menambah baris kod dalam pembina Pelajar:

Person.call(ini, nama, umur);

5. Ringkasan

Menggunakan prinsip rantaian prototaip js, kami boleh melaksanakan mekanisme pewarisan js dengan mudah Walaupun ia tidak begitu ketat, matlamat saya telah dicapai: kod berulang harus muncul sekali sebanyak mungkin.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.