Rumah > hujung hadapan web > tutorial js > Warisan bukan pembina JavaScript

Warisan bukan pembina JavaScript

PHPz
Lepaskan: 2018-10-15 15:32:47
asal
1165 orang telah melayarinya

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

Kodnya adalah seperti berikut:

 var Chinese = { 
    nation:'中国' 
  };
Salin selepas log masuk

Terdapat juga objek yang dipanggil "Doktor".

Kodnya adalah seperti berikut:

var Doctor ={ 
    career:'医生' 
  }
Salin selepas log masuk

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(); 
  }
Salin selepas log masuk

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; 
  }
Salin selepas log masuk

Apabila menggunakannya, tulis seperti ini:

Kod adalah seperti berikut:

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

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; 
  }
Salin selepas log masuk
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('厦门');
Salin selepas log masuk


Kodnya adalah seperti berikut:


Pada masa ini, pustaka jQuery menggunakan kaedah pewarisan ini.
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门 
alert(Chinese.birthPlaces); //北京, 上海, 香港
Salin selepas log masuk


【Tutorial berkaitan yang disyorkan】

1

Tutorial video JavaScript

2 Manual dalam talian JavaScript
3. tutorial bootstrap

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan