Baru-baru ini, saya membaca online tentang pengalaman seseorang saat wawancara dengan Taobao, dan kemudian saya menemukan bahwa ada banyak hal yang saya tidak jelas, jadi saya menulis beberapa artikel untuk memperdalam pemahaman saya tentang beberapa masalah.
Pertanyaan yang disebutkan dalam artikel tersebut adalah: Bagaimana cara JavaScript mengimplementasikan pewarisan?
Di bawah ini saya akan menjelaskan beberapa metode dan contoh yang saya temukan online untuk memperdalam kesan saya.
Kita tahu bahwa fungsi dalam JavaScript bersifat serbaguna. Selain digunakan untuk definisi fungsi, fungsi juga dapat digunakan untuk definisi kelas.
Pewarisan dalam JavaScript agak aneh. Tidak seperti C++ dan beberapa bahasa berorientasi objek, JavaScript tidak memiliki modifikasi kontrol akses seperti publik dan privat, dan tidak ada penerapan atau simbol khusus lainnya untuk menunjukkan pewarisan.
Mengenai pewarisan kelas JavaScript, Anda dapat merujuk pada contoh berikut.
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
fungsi Orang() {
//properti
ini.Jenis Kelamin = "perempuan";
ini.Umur = 18;
this.Words = "Diam";
// metode
ini.berteriak = fungsi() {
alert("Senang! Metode kelas induk");
}
}
//Mewarisi
fungsiProgrammer() {
this.base = Orang;
}
Programmer.prototype = Orang baru;
//Tambahkan metode baru ke subkelas
Programmer.prototype.typeCode = fungsi() {
alert("Saya seorang pembuat kode! Pekerja migran IT, sangat tidak senang. Metode subkelas");
}
// Contoh panggilan
fungsi ucapkan Halo() {
var a = Pemrogram baru();
alert(a.Gender); // Memanggil properti kelas induk
a.shouting(); // Panggil metode kelas induk
a.typeCode(); // Panggil metode subkelas
}
sayHalo();
</skrip>
Pada contoh di atas, pertama-tama dideklarasikan kelas person yang berisi beberapa atribut dan metode, kemudian dideklarasikan kelas pemrogram yang memiliki atribut dasar. Atribut ini tidak diperlukan, tetapi demi spesifikasi dan untuk menemukan objek di dalamnya masa depan Semua kelas yang diwarisi perlu ditulis, dan kemudian kelas orang disalin ke objek prototipe pemrogram (prototipe) sehingga pewarisan kelas terwujud.
Simulasikan beberapa prinsip kelas dan pewarisan dalam JavaScript
Dalam bahasa berorientasi objek, kami menggunakan kelas untuk membuat objek khusus. Namun, semua yang ada di JavaScript adalah sebuah objek, jadi bagaimana cara membuat objek khusus?
Ini memerlukan pengenalan konsep lain - prototipe. Kita cukup menganggap prototipe sebagai templat. Objek kustom yang baru dibuat semuanya merupakan salinan dari templat ini (prototipe) (sebenarnya bukan salinan melainkan tautan. Hanya saja tautan semacam ini adalah tautannya. tidak terlihat dan memberikan kesan kepada orang-orang bahwa itu adalah salinan).
Mari kita lihat contoh pembuatan objek kustom melalui prototipe:
Copy kode kodenya sebagai berikut:
//Konstruktor
fungsi Orang(nama, jenis kelamin) {
ini.nama = nama;
ini.seks = seks;
}
//Tentukan prototipe Person. Properti dalam prototipe dapat direferensikan oleh objek khusus.
Orang.prototipe = {
dapatkanNama: fungsi() {
kembalikan nama ini;
},
getSex: fungsi() {
kembalikan ini.seks;
}
}
Di sini kita menyebut fungsi Person sebagai konstruktor, yaitu fungsi yang membuat objek khusus. Terlihat bahwa JavaScript mensimulasikan fungsi kelas melalui konstruktor dan prototipe.
Berikut ini adalah contoh untuk menjelaskan secara rinci pekerjaan spesifik yang dilakukan oleh JavaScript saat membuat objek khusus:
Copy kode kodenya sebagai berikut:
var zhang = Orang baru("ZhangSan", "pria");
konsol.log(zhang.getName()); // "ZhangSan"
var chun = Orang baru("ChunHua", "wanita");
konsol.log(chun.getName()); // "ChunHua"
Ketika kode var zhang = new Person("ZhangSan", "man") dijalankan, hal-hal berikut sebenarnya dilakukan secara internal:
Buat objek kosong (Objek baru()).
Salin atribut (pasangan nilai kunci) di Person.prototype ke objek kosong ini (seperti yang kami sebutkan sebelumnya, implementasi internal bukanlah salinan tetapi tautan tersembunyi).
Berikan objek ini ke konstruktor melalui kata kunci this dan jalankan konstruktor.
Tetapkan objek ini ke variabel zhang.
Semua pekerjaan selesai.
Untuk membuktikan bahwa template prototipe tidak disalin ke objek yang dipakai, tetapi merupakan cara penautan, silakan lihat kode berikut:
Copy kode kodenya sebagai berikut:
fungsi Orang(nama, jenis kelamin) {
ini.nama = nama;
ini.seks = seks;
}
Orang.prototipe.usia = 20;
var zhang = Orang baru("ZhangSan", "pria");
konsol.log(zhang.usia); // 20
// Mengganti atribut age di prototipe
zhang.usia = 19;
konsol.log(zhang.usia); // 19
hapus zhang.age;
// Setelah menghapus atribut instance age, nilai atribut ini diperoleh lagi dari prototype
konsol.log(zhang.usia); // 20
Pada contoh di atas, jika hanya diperoleh dengan menyalin, setelah atribut age dihapus, objek tersebut tidak akan ada, namun atribut age pada contoh masih dapat di-output, atau nilai sebelumnya akan ditimpa, menandakan bahwa kita hanya menghapus atribut dengan nama yang sama di subkelas, dan atribut age di kelas induk masih ada di objek melalui tautan tak kasat mata.
Bagaimana cara menerapkan pewarisan sederhana dalam JavaScript?
Contoh berikut membuat kelas karyawan Karyawan yang mewarisi semua properti dari prototipe prototipe dari Person.
Copy kode kodenya sebagai berikut:
fungsi Karyawan(nama, jenis kelamin, ID karyawan) {
ini.nama = nama;
ini.seks = seks;
this.employeeID = ID karyawan;
}
// Arahkan prototipe Karyawan ke instance Person
// Karena instance Person bisa memanggil metode di prototipe Person, instance Employee juga bisa memanggil semua properti di prototipe Person.
Karyawan.prototipe = Orang baru();
Employee.prototype.getEmployeeID = fungsi() {
kembalikan this.employeeID;
};
var zhang = Karyawan baru("ZhangSan", "man", "1234");
console.log(zhang.getName()); // "ZhangSan
Oke, di atas adalah beberapa proses dan metode khusus untuk mengimplementasikan pewarisan di JavaScript.
Tentu saja, untuk meringkas, mekanisme pewarisan dalam JavaScript hanya didasarkan pada simulasi. Dibandingkan dengan beberapa bahasa berorientasi objek, mekanisme ini kasar dan memiliki beberapa kekurangan. Namun, secara umum, hal ini masih tidak mengurangi efisiensi pengembang front-end .antusiasme.