Warisan bukan pembina JavaScript

1. Apakah warisan "bukan pembina"?
Sebagai contoh, terdapat objek yang dipanggil "Cina".

Kodnya adalah seperti berikut:

　var Chinese = { 
　　　　nation:'中国' 
　　};

Terdapat juga objek yang dipanggil "Doktor".

Kodnya adalah seperti berikut:

var Doctor ={ 
　　　　career:'医生' 
　　}

Bagaimana saya boleh membiarkan "doktor" mewarisi "Cina", iaitu bagaimana saya boleh menjana "doktor Cina " "Objek "?
Perlu diingatkan di sini bahawa kedua-dua objek ini adalah objek biasa, bukan pembina, dan "warisan" tidak boleh dilaksanakan menggunakan kaedah pembina.

2. Kaedah Object()

Douglas Crockford, pencipta format json, mencadangkan fungsi object() yang boleh melakukan ini sedikit.

Kodnya adalah seperti berikut:

　function object(o) { 
　　　　function F() {} 
　　　　F.prototype = o; 
　　　　return new F(); 
　　}

Fungsi object() ini sebenarnya hanya melakukan satu perkara, iaitu untuk menghalakan atribut prototaip objek kanak-kanak ke objek induk, dengan itu Sambungkan objek anak ke objek induk.
Apabila menggunakannya, langkah pertama ialah menjana objek kanak-kanak berdasarkan objek induk:
　var Doktor = objek(Cina
Kemudian, tambahkan atribut objek kanak-kanak itu sendiri:
); Doctor.career = 'Doctor';
Pada masa ini, objek kanak-kanak telah mewarisi sifat-sifat objek induk.
　alert(Doctor.nation); //China

3. Salinan cetek

Selain menggunakan "rantai prototaip" , Terdapat satu lagi cara berfikir: menyalin semua sifat objek induk kepada objek anak juga boleh mencapai warisan.
Fungsi berikut sedang menyalin:

Kodnya adalah seperti berikut:

　function extendCopy(p) { 
　　　　var c = {}; 
　　　　for (var i in p) { 
　　　　　　c[i] = p[i]; 
　　　　} 
　　　　c.uber = p; 
　　　　return c; 
　　}

Apabila menggunakannya, tulis seperti ini:

Kod adalah seperti berikut:

var Doctor = extendCopy(Chinese); 
　　Doctor.career = '医生'; 
　　alert(Doctor.nation); // 中国

Walau bagaimanapun, terdapat masalah dengan salinan sedemikian. Iaitu, jika sifat objek induk adalah sama dengan tatasusunan atau objek lain, maka sebenarnya, apa yang diperoleh oleh objek kanak-kanak hanyalah alamat memori, bukan salinan sebenar, jadi ada kemungkinan objek induk telah diusik.
Sila lihat, sekarang tambahkan atribut "tempat lahir" kepada bahasa Cina, nilainya ialah tatasusunan.
Chinese.birthPlaces = ['Beijing','Shanghai','Hong Kong'];
Melalui fungsi extendCopy(), Doktor mewarisi bahasa Cina.
　var Doktor = extendCopy(Cina);
Kemudian, kami menambah bandar untuk "tempat lahir" Doktor:
　Doctor.birthPlaces.push('Xiamen'); "Tempat kelahiran" orang Cina juga telah diubah!
makluman(Doctor.birthPlaces); //Beijing, Shanghai, Hong Kong, Xiamen
makluman(Chinese.birthPlaces); //Beijing, Shanghai, Hong Kong, Xiamen
Jadi, extendCopy() hanya salinan jenis asas data, kami memanggil salinan ini "salinan cetek". Beginilah cara pewarisan dilaksanakan dalam jQuery awal.

4. Salinan dalam

Apa yang dipanggil "salinan dalam" ialah keupayaan untuk menyalin tatasusunan dan objek dalam erti kata sebenar. Pelaksanaannya tidak sukar, cuma panggil "salinan cetek" secara rekursif.

Kodnya adalah seperti berikut:

function deepCopy(p, c) { 
　　　　var c = c || {}; 
　　　　for (var i in p) { 
　　　　　　if (typeof p[i] === 'object') { 
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {}; 
　　　　　　　　deepCopy(p[i], c[i]); 
　　　　　　} else { 
　　　　　　　　　c[i] = p[i]; 
　　　　　　} 
　　　　} 
　　　　return c; 
　　}

Apabila digunakan, tulis seperti ini:

var Doctor = deepCopy(Chinese); tambah Sifat yang nilainya ialah tatasusunan. Kemudian, ubah suai atribut ini pada objek anak:


Kod adalah seperti berikut:

Pada masa ini, objek induk tidak akan terjejas.

Chinese.birthPlaces = ['北京','上海','香港']; 
Doctor.birthPlaces.push('厦门');

Kodnya adalah seperti berikut:

Pada masa ini, pustaka jQuery menggunakan kaedah pewarisan ini.

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门 
alert(Chinese.birthPlaces); //北京, 上海, 香港

【Tutorial berkaitan yang disyorkan】

1

Tutorial video JavaScript

2 Manual dalam talian JavaScript
3. tutorial bootstrap