Rumah hujung hadapan web tutorial js Pembelajaran Corak Reka Bentuk JavaScript 'Pewarisan Kelas'_kemahiran javascript

Pembelajaran Corak Reka Bentuk JavaScript 'Pewarisan Kelas'_kemahiran javascript

May 16, 2016 pm 04:10 PM
javascript corak reka bentuk

Sebelum melakukan sesuatu, anda mesti faham dahulu kebaikan melakukannya Saya percaya tiada siapa yang sanggup melakukan sesuatu tanpa sebab. Secara umumnya, apabila kami mereka bentuk kelas, kami sebenarnya berharap untuk mengurangkan kod berulang Menggunakan warisan boleh melakukan ini dengan sempurna Dengan mekanisme pewarisan, anda boleh mereka bentuk semula berdasarkan kelas sedia ada dan Pengubahsuaian sepenuhnya kepada reka bentuk menjadi lebih mudah dengan mengambil kesempatan. daripada kaedah yang telah mereka miliki. Tanpa berlengah lagi, berikut adalah beberapa contoh:

Salin kod Kod adalah seperti berikut:

fungsi Orang(nama){
This.name = nama;
}
Person.prototype.getname = function(){
Kembalikan nama ini;
}

fungsi Blogger(nama,blog){
Person.call(ini,nama);
This.blog = blog;
}
var blogger = Bloger baharu("zhenn","http://www.jb51.net");
alert(bloger.name=="zhenn"); /*return true*/
alert(bloger.blog) /*Amaran http://www.jb51.net*/
alert(bloger.getname()=="zhenn"); /*Prompt "bloger.getname is not a function"*/

Seperti yang anda lihat daripada contoh di atas, Blogger secara dinamik memanggil sifat asli dan kaedah kelas induknya Orang melalui panggilan secara dalaman (untuk penjelasan tentang panggilan, sila rujuk http://www.jb51.net/article/ 62086.htm ), yang boleh difahami sebagai Bloger mewarisi Person dan menjadi subkelasnya, tetapi pelajar yang berhati-hati akan mendapati bahawa kaedah dalam objek prototaip Person tidak boleh diwarisi hanya dengan bergantung pada panggilan, yang bermaksud "bloger. getname is not fungsi" adalah sebabnya. Tetapi jangan risau, anda boleh menyelesaikan masalah ini dengan sedikit pemprosesan kod di atas!

Salin kod Kod adalah seperti berikut:

fungsi Orang(nama){
This.name = nama;
}
Person.prototype.getname = function(){
Kembalikan nama ini;
}

fungsi Blogger(nama,blog){
Person.call(ini,nama);
This.blog = blog;
}
/*Sila beri perhatian kepada dua baris kod berikut*/
Bloger.prototype = new Person();
Bloger.prototype.constructor = Bloger;

var blogger = Bloger baharu("zhenn","http://www.jb51.net");
alert(bloger.name=="zhenn"); /*return true*/
alert(bloger.blog) /*Amaran http://www.jb51.net*/
alert(bloger.getname()=="zhenn"); /*Prompt true*/

Di sini kita perlu menerangkan kedua-dua baris kod ini objek Sifat dan kaedah yang ditakrifkan boleh dikongsi oleh semua objek contoh Ia boleh disimpulkan bahawa tujuan menambah dua baris kod adalah untuk menetapkan objek prototaip subkelas untuk menunjuk kepada objek instantiated kelas induk, dan instantiated. objek kelas induk Semua kaedah atribut prototaip kelas induk akan diwarisi, dengan itu mencapai matlamat kami Prototaip subkelas mewarisi semua sifat dan kaedah objek contoh kelas induk.

Tetapi anda juga harus memberi perhatian kepada baris kod Bloger.prototype.constructor = Bloger kerana apabila anda menetapkan prototaip subkelas kepada contoh kelas induk, atribut pembinanya akan menunjuk ke kelas induk, jadi anda perlu menetapkan semula pembina prototaip subkelas tersebut.

Untuk memudahkan pengisytiharan subkelas, keseluruhan proses melanjutkan subkelas boleh ditulis dalam fungsi yang dipanggil extend Fungsinya adalah untuk mencipta kelas baharu berdasarkan struktur kelas yang diberikan:

Salin kod Kod adalah seperti berikut:

fungsi extend(childClass,parentClass){
var F = Fungsi baharu();
F.prototype = parentClass.prototype;
childClass.prototype = new F();
childClass.prototype.constructor = childClass;
}

Dengan fungsi extend ini, anda boleh dengan mudah memanjangkan subkelas. Hanya panggil fungsi ini Dua baris kod yang ditambahkan di atas boleh ditukar kepada extend(Bloger,Person), dan warisan penuh juga boleh dicapai!

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

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Perbezaan antara corak reka bentuk dan corak seni bina dalam rangka kerja Java Perbezaan antara corak reka bentuk dan corak seni bina dalam rangka kerja Java Jun 02, 2024 pm 12:59 PM

Perbezaan antara corak reka bentuk dan corak seni bina dalam rangka kerja Java

Penggunaan indah corak penyesuai dalam corak reka bentuk Java Penggunaan indah corak penyesuai dalam corak reka bentuk Java May 09, 2024 pm 12:54 PM

Penggunaan indah corak penyesuai dalam corak reka bentuk Java

Analisis Corak Penghias dalam Corak Reka Bentuk Java Analisis Corak Penghias dalam Corak Reka Bentuk Java May 09, 2024 pm 03:12 PM

Analisis Corak Penghias dalam Corak Reka Bentuk Java

Analisis kes praktikal corak reka bentuk PHP Analisis kes praktikal corak reka bentuk PHP May 08, 2024 am 08:09 AM

Analisis kes praktikal corak reka bentuk PHP

Apakah kelebihan dan kekurangan menggunakan corak reka bentuk dalam rangka kerja java? Apakah kelebihan dan kekurangan menggunakan corak reka bentuk dalam rangka kerja java? Jun 01, 2024 pm 02:13 PM

Apakah kelebihan dan kekurangan menggunakan corak reka bentuk dalam rangka kerja java?

Bagaimana corak reka bentuk menangani cabaran penyelenggaraan kod Bagaimana corak reka bentuk menangani cabaran penyelenggaraan kod May 09, 2024 pm 12:45 PM

Bagaimana corak reka bentuk menangani cabaran penyelenggaraan kod

Aplikasi corak reka bentuk dalam rangka kerja Guice Aplikasi corak reka bentuk dalam rangka kerja Guice Jun 02, 2024 pm 10:49 PM

Aplikasi corak reka bentuk dalam rangka kerja Guice

Corak Reka Bentuk PHP: Pembangunan Dipacu Ujian dalam Amalan Corak Reka Bentuk PHP: Pembangunan Dipacu Ujian dalam Amalan Jun 03, 2024 pm 02:14 PM

Corak Reka Bentuk PHP: Pembangunan Dipacu Ujian dalam Amalan

See all articles