Rantai prototipe agak membingungkan untuk dipahami, dan ada banyak informasi online. Setiap kali saya tidak bisa tidur di malam hari, saya selalu ingin menemukan beberapa rantai prototipe dan penutupan artikel online untuk dibaca, yang sangat efektif.
Jangan khawatir tentang banyak istilah itu, itu benar -benar tidak akan membantu Anda kecuali membuat otak Anda berputar. Lihat saja rantai prototipe secara sederhana dan kasar, dan pikirkan hal -hal yang tidak ada hubungannya dengan kode, seperti manusia, setan dan pria waria.
1) Orang -orang dilahirkan oleh manusia, dan monster dilahirkan oleh setan. Manusia dan setan keduanya adalah contoh objek, sementara manusia dan setan adalah prototipe. Prototipe juga merupakan objek, yang disebut objek prototipe.
2) Ibu seseorang dan ayahnya dapat melahirkan sekelompok bayi, dan seorang ibu setan dan ayahnya dapat melahirkan sekelompok bayi. Istri dan pria pria dapat melahirkan sekelompok bayi. Seorang pria adalah seorang konstruktor, umumnya dikenal sebagai seorang pria.
3) Orang dapat merekam informasi tentang seks, sehingga orang dapat menemukan informasi tentang seks melalui seks, yaitu, mereka dapat menemukan konstruktor melalui objek prototipe.
4) Orang dapat melahirkan banyak bayi di ibu mereka, tetapi bayi -bayi ini hanya memiliki satu ibu, yang merupakan keunikan prototipe.
5) Orang -orang juga dilahirkan oleh orang -orang, mereka menemukan orang melalui orang -orang, dan kemudian menemukan orang melalui orang -orang ... hubungan ini disebut rantai prototipe.
6) Rantai prototipe tidak terbatas. Ketika Anda terus melihat orang -orang, Anda akan menemukan bahwa orang -orang sialan ... bukan manusia, yaitu, rantai prototipe akhirnya menunjuk ke nol.
7) Orang yang lahir dengan seorang ibu akan terlihat seperti manusia, dan monster yang lahir dengan seorang ibu akan jelek. Ini disebut warisan.
8) Anda mewarisi warna kulit ibumu, ibumu mewarisi warna kulit ibumu, ibumu ..., ini adalah warisan rantai prototipe.
9) Jika Anda tidak memiliki rumah, maka rumah Anda mengacu pada rumah ibu Anda; Jika ibu Anda tidak memiliki rumah, maka rumah Anda mengacu pada rumah ibu Anda ... ini adalah pencarian ke atas dari rantai prototipe.
10) Anda akan mewarisi penampilan ibu Anda, tetapi Anda juga dapat mewarnai rambut, sampo, memotong dan meniup, yaitu, atribut objek dapat disesuaikan dan akan mengesampingkan atribut yang diwariskan.
11) Meskipun Anda telah mencuci, memotong, meniup, dan mencelupkan rambut kuning, Anda tidak dapat mengubah penampilan ibumu. Adik laki -laki dan perempuan yang lahir dari ibumu tidak ada hubungannya dengan rambut kuning, memotong, dan meniup rambut kuning, yaitu, contoh objek tidak dapat mengubah sifat prototipe.
12) Tetapi jika rumah Anda dibakar oleh Anda, itu berarti bahwa ibu dan saudara laki -laki Anda dibakar, dan ini adalah berbagi atribut prototipe.
13) Nama panggilan ibumu adalah Azhen, dan bibi tetangganya memanggilmu Azhener, tetapi setelah rambut ibumu beralih dari Piaorou menjadi raja singa emas, bibi di sebelahnya mengubah kata -katanya dan memanggilmu pangeran singa emas. Ini disebut sifat dinamis dari prototipe.
14) Ibumu suka kecantikan dan pergi ke Korea untuk operasi plastik. Dia bahkan tidak bisa mengenali ibunya. Bahkan jika rambut ibumu berubah kembali menjadi kelembutan, tetangga di sebelah masih memanggilmu Pangeran Singa Emas. Karena tidak ada yang mengenali ibumu, ibumu telah kembali ke pabrik setelah operasi plastik. Ini adalah penulisan ulang keseluruhan dari prototipe.
Brengsek! Anda cukup! Jangan BB! Tunjukkan kodenya!
function person (name) {this.name = name; } function mother () {} mother.prototype = {// usia prototipe ibu: 18, rumah: ['beijing', 'shanghai']}; person.prototype = ibu baru (); // Prototipe orang adalah ibu // Gunakan alat debugging chrome untuk melihat prototipe, menyediakan antarmuka __proTo__ untuk melihat prototipe var p1 = orang baru ('jack'); // p1: 'jack'; __proto __: 18, ['beijing', 'shanghai'] var p2 = orang baru ('mark'); // P2: 'Mark'; __Proto __: 18, ['Beijing', 'Shanghai'] p1.age = 20; /* Contohnya tidak dapat mengubah atribut nilai dasar dari prototipe, sama seperti Anda mencuci, memotong, meniup, dan mewarnai rambut kuning tidak ada hubungannya dengan ibu Anda* Operasi biasa menambahkan atribut usia di bawah instance P1 tidak ada hubungannya dengan prototipe. Sama seperti var o {}; o.age = 20. * P1: Ada usia atribut tambahan di bawah ini, dan __proto__ sama dengan ibu. Prototipe, usia = 18. * p2: hanya nama atribut, __proto__ adalah sama dengan ibu.prototype*/p1.home [0] = 'shenzhen'; /* Berbagi atribut jenis referensi dalam prototipe sama seperti Anda membakar rumah Anda, itu membakar rumah seluruh keluarga Anda* Ini sedikit lulus, mari kita cerewet dengan hati -hati di bawah ini? * P1: 'Jack', 20; __proto __: 18, ['shenzhen', 'shanghai']* p2: 'mark'; __proto __: 18, ['shenzhen', 'shanghai']*/p1.home = ['hangzhou', 'guangzhou']; /* Faktanya, operasi yang sama dengan p1.age = 20. Ubah pemahaman ini: var o {}; o.house = ['besar', 'rumah']* p1: 'jack', 20, ['hangzhou', 'guangzhou']; __proto __: 18, ['shenzhen', 'shanghai']* p2: 'mark'; __proto __: 18, ['shenzhen', 'shanghai']*/hapus p1.age; /* Setelah menghapus atribut khusus, nilai prototipe yang semula ditimpa akan diperkirakan kembali. Ini adalah mekanisme pencarian ke atas, jadi ada dinamika berikut* p1: 'jack', ['hangzhou', 'guangzhou']; __proto __: 18, ['shenzhen', 'shanghai']* p2: 'mark'; __proto __: 18, ['shenzhen', 'shanghai']*/person.prototype.lastname = 'jin'; /* Tulis ulang prototipe dan bereaksi secara dinamis terhadap instance. Sama seperti ibumu telah menjadi orang yang trendi, para tetangga mengatakan Anda adalah putra seorang wanita yang trendi ketika mereka menyebutkannya* Perhatikan bahwa kami menulis ulang prototipe orang di sini, yaitu menambahkan atribut nama terakhir ke ibu, yang setara dengan ibu. Lastname = 'jin'* Ini tidak mengubah ibu. Prototipe. Jika Anda mengubah level yang berbeda, efeknya akan sering sangat berbeda. * p1: 'jack', ['hangzhou', 'guangzhou']; __proto __: 'jin'; __ proto __: 18, ['shenzhen', 'shanghai']* p2: 'mark'; __proto __: 'jin'; __ proto __: 18, ['shenzhen', 'shanghai']*/person.prototype = {usia: 28, alamat: {country: 'usa', city: 'washington'}}; var p3 = orang baru ('Obama'); /* Tulis ulang prototipe! Pada saat ini, prototipe seseorang telah sepenuhnya menjadi objek baru, yang berarti orang itu telah mengubah ibunya. * Untuk memahaminya seperti ini: var a = 10; b = a; a = 20; c = a. Jadi B tetap tidak berubah dan menjadi C, jadi P3 berubah dan tidak ada hubungannya dengan ibu. * p1: 'jack', ['hangzhou', 'guangzhou']; __proto __: 'jin'; __ proto __: 18, ['shenzhen', 'shanghai']* p2: 'mark'; __proto __: 'jin'; __ proto __: 18, ['shenzhen', 'shanghai']* p3: 'Obama'; __ proto__: 28 {country: 'usa', city: 'washington'}*/mother.prototype.no = 9527;/* menulis ulang prototype.no secara dynamypeicale = 9527;/* menulis ulang prototype.no secara dynamyping.no = 9527;/* penulisan ulang prototype.no secara dynamypeical.no = 9527;/* menulis ulang prototypeyeypeyey secara prototype. Sama seperti ibumu telah menjadi tren baru, para tetangga mengatakan bahwa Anda benar -benar seorang nenek yang trendi* Perhatikan bahwa kami menulis ulang ibu. Prototipe di sini, P1P2 akan berubah, tetapi P3 di atas tidak ada hubungannya dengan ibu, dan itu tidak akan memengaruhinya. * p1: 'jack', ['hangzhou', 'guangzhou']; __proto __: 'jin'; __ proto __: 18, ['shenzhen', 'shanghai'], 9527* p2: 'mark'; __proto __: 'jin'; __ proto __: 18, ['shenzhen', 'shanghai'], 9527* p3: 'Obama'; __proto__: 28 {country: 'usa', city: 'washington'}*/mother.prototype = {car: 2, hobi: ['run', 'walk']}; var p4 = orang baru ('tony');/* Tulis ulang prototipe prototipe! Pada saat ini, prototipe Ibu telah sepenuhnya menjadi objek baru! * Karena orang dan ibu telah terputus dari atas, perubahan ibu tidak akan lagi mempengaruhi orang. * p4: 'tony'; __ proto__: 28 {country: 'usa', city: 'washington'}*/person.prototype = new mother (); // bind var lagi p5 = orang baru ('luffy'); // Jika Anda perlu menerapkan perubahan ini saat ini, Anda harus mengikat kembali prototipe orang ke ibu // p5: 'luffy'; __ proto__: 2, ['run', 'walk'] p1 .__ proto __ NULL? Ibu .__ Proto __.__ Proto __.__ Proto__ // NULL, apakah Anda pikir titik akhir dari rantai prototipe bukan nol?Pada dasarnya Anda dapat memahami setelah membacanya?
Sekarang mari kita bicara tentang perbedaan antara p1.age = 20, p1.home = ['hangzhou', 'Guangzhou'] dan p1.home [0] = 'shenzhen'. p1.home [0] = 'shenzhen'; Singkatnya, itu adalah bentuk seperti p1.object.method, p1.object.property.
p1.age = 20; p1.home = ['hangzhou', 'Guangzhou']; Kedua kalimat ini mudah dimengerti. Lupakan prototipe terlebih dahulu dan pikirkan bagaimana kita menambahkan atribut ke objek biasa:
var obj = objek baru (); obj.name = 'xxx'; obj.num = [100, 200];
Apakah Anda mengerti seperti ini? Itu sama.
Lalu mengapa P1.Home tidak [0] = 'Shenzhen' membuat properti array rumah di bawah P1 dan kemudian menetapkan posisi pertama ke 'Shenzhen'? Mari kita lupakan ini dulu, pikirkan tentang objek OBJ di atas. Jika ditulis seperti ini: var obj.name = 'xxx', obj.num = [100, 200], dapatkah Anda mendapatkan hasil yang Anda inginkan? Jelas, Anda tidak akan mendapatkan apa pun kecuali kesalahan. Karena OBJ belum ditentukan, bagaimana Anda bisa menambahkan sesuatu ke dalamnya? Demikian pula, rumah di P1.Home [0] tidak didefinisikan di bawah P1, sehingga tidak mungkin untuk secara langsung mendefinisikan rumah [0]. Jika Anda ingin membuat array rumah di bawah P1, tentu saja ditulis seperti ini:
p1.home = []; p1.home [0] = 'shenzhen';
Bukankah ini metode yang paling umum digunakan?
Alasan mengapa p1.home [0] = 'Shenzhen' tidak secara langsung melaporkan kesalahan adalah karena ada mekanisme pencarian dalam rantai prototipe. Ketika kita memasukkan P1.Object, mekanisme pencarian rantai prototipe adalah mencari nilai yang sesuai dalam instance terlebih dahulu. Jika tidak dapat ditemukan, itu akan dicari dalam prototipe. Jika tidak dapat ditemukan, ia akan mencari di tingkat sebelumnya dari rantai prototipe ... itu akan mencapai ujung rantai prototipe, yaitu, jika belum ditemukan, ia akan mengembalikan yang tidak terdefinisi. Ketika kita memasuki p1.home [0], mekanisme pencarian yang sama juga benar. Pencarian P1 Pertama untuk melihat apakah ada atribut dan metode bernama Home, dan kemudian cari langkah demi langkah ke atas. Akhirnya kami menemukannya dalam prototipe ibu, jadi memodifikasi itu setara dengan memodifikasi prototipe ibu.
Singkatnya: p1.home [0] = 'shenzhen' setara dengan ibu.prototype.home [0] = 'shenzhen'.
Dari analisis di atas, kita dapat melihat bahwa masalah utama pewarisan rantai prototipe terletak pada berbagi atribut. Sering kali kami hanya ingin berbagi metode tetapi bukan atribut. Idealnya, setiap contoh harus memiliki atribut independen. Oleh karena itu, ada dua cara untuk meningkatkan prototipe warisan:
1) Warisan Kombinasi
fungsi ibu (usia) {this.age = usia; this.hobby = ['running', 'football']} mother.prototype.showage = function () {console.log (this.age); }; function orang (nama, usia) {mother.call (ini, usia); // eksekusi kedua this.name = name; } Person.prototype = new mother (); // eksekusi pertama person.prototype.constructor = person; person.prototype.showname = function () {console.log (this.name);} var p1 = orang baru ('jack', 20); p1.hobby.push ('bola basket'); // p1: 'jack'; __proto __: 20, ['running', 'football'] var p2 = orang baru ('Mark', 18); // P2: 'Mark'; __proto __: 18, ['running', 'football']Hasilnya adalah ungu:
Ketika eksekusi pertama dilakukan di sini, Anda mendapatkan person.prototype.age = tidak terdefinisi, person.prototype.hobby = ['running', 'football']. Eksekusi kedua adalah var p1 = orang baru ('jack', 20) dan Anda mendapatkan p1.age = 20, p1.hobby = ['running', 'football']. Setelah mendorong, itu menjadi p1.hobby = ['Running', 'Football', 'Basketball']. Bahkan, relatif mudah untuk memahami perubahan ini. Anda bisa mendapatkan hasil ini hanya dengan mengganti ini. Jika Anda merasa agak membingungkan untuk dipahami, cobalah membuang konsep -konsep dalam pikiran Anda dan jalankan kode dari atas ke bawah sebagai browser. Apakah itu akan keluar?
Dengan mengeksekusi prototipe mother konstruktor () untuk kedua kalinya, kami menyalin salinan properti prototipe dalam instance objek, sehingga kami dapat memisahkan dan memisahkan dari properti prototipe. Jika Anda berhati -hati, Anda akan menemukan bahwa pertama kali kami menelepon ibu (), tampaknya tidak ada gunanya. Bagaimana mungkin kita tidak menyebutnya? Ya, ada warisan kombinasi parasit berikut.
2) Warisan Kombinasi Parasit
Objek fungsi (o) {function f () {} f.prototype = o; return new f ();} function wheritprototype (orang, ibu) {var prototipe = objek (mother.prototype); prototipe.constructor = orang; Orang.prototype = prototipe; } function ibu (usia) {this.age = usia; this.hobby = ['running', 'football']} mother.prototype.showage = function () {console.log (this.age); }; function orang (nama, usia) {mother.call (ini, usia); this.name = name; } wheritprototype (orang, ibu); Person.prototype.showname = function () {console.log (this.name);} var p1 = orang baru ('jack', 20); p1.hobby.push ('bola basket'); // p1: 'jack'; __proto __: 20, ['running', 'football'] var p2 = orang baru ('Mark', 18); // P2: 'Mark'; __proto __: 18, ['running', 'football']Hasilnya adalah ungu:
Tidak ada lagi atribut usia dan hobi dalam prototipe, hanya ada dua metode, yang persis hasil yang kita inginkan!
Titik kunci ada di objek (O), di mana objek sementara dipinjam di sini untuk secara cerdik menghindari memanggil ibu baru (), dan kemudian mengembalikan instance objek baru dengan prototipe O, sehingga menyelesaikan pengaturan rantai prototipe. Sangat membingungkan, bukan? Itu karena kami tidak dapat mengatur orang.prototype = mother.prototype secara langsung.
ringkasan
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Setelah banyak mengatakan, sebenarnya hanya ada satu inti: berbagi atribut dan kontrol independen. Ketika instance objek Anda membutuhkan atribut independen, esensi dari semua praktik adalah membuat atribut dalam instance objek. Jika Anda tidak terlalu berpikir, Anda dapat secara langsung mendefinisikan atribut independen yang Anda butuhkan secara langsung untuk menimpa sifat prototipe. Singkatnya, saat menggunakan prototipe warisan, Anda harus memberikan perhatian khusus pada atribut dalam prototipe, karena mereka semua adalah keberadaan yang mempengaruhi seluruh tubuh.
Di bawah ini adalah daftar sederhana dari berbagai metode untuk membuat objek di JS. Metode yang paling umum digunakan sekarang adalah mode kombinasi. Siswa yang akrab dapat melompat ke akhir artikel dan menyukainya.
1) Mode Asli
// 1. Mode Asli, Mode Literal Objek Var Person = {Name: 'Jack', Usia: 18, SayName: Function () {alert (this.name); }}; // 1. Mode Asli, Mode Konstruktor Objek Var Person = Objek Baru (); person.name = 'jack'; person.age = 18; person.sayname = function () {waspada (this.name);};Jelas, ketika kita ingin membuat batch person1, person2 ..., kita harus mengetik banyak kode setiap kali, dan bahkan copypaster senior tidak tahan! Lalu ada model pabrik produksi massal.
2) Model pabrik
// 2. Mode pabrik, tentukan fungsi untuk membuat createPerson fungsi objek (nama, usia) {var temp = objek baru (); person.name = name; person.age = usia; person.sayname = function () {waspada (this.name);}; return temp; }Mode pabrik adalah produksi massal, dan Anda dapat memasuki mode pembuatan manusia dengan panggilan sederhana (papapapa ...). Anda dapat membuat banyak bayi dengan menentukan nama dan usia Anda, dan membebaskan tangan Anda. Namun, karena dioperasikan di sebuah pabrik, Anda tidak dapat mengidentifikasi jenis objek apa itu, apakah itu manusia atau anjing (tes contoh adalah objek). Selain itu, setiap kali Anda membuat manusia, Anda harus membuat objek suhu independen, kodenya kembung, dan kupu -kupu itu elegan.
3) Konstruktor
// 3. Mode konstruktor, tentukan fungsi konstruktor untuk orang fungsi objek (nama, usia) {this.name = name; this.age = usia; this.sayname = function () {waspada (this.name);}; } var p1 = orang baru ('jack', 18); // Buat orang objek P1 ('jack', 18); // Metode atribut diberikan ke objek jendela, window.name = 'jack', window.sayname () akan menghasilkan jackKonstruktor ini mirip dengan konstruktor kelas di C ++ dan Java, dan mudah dimengerti. Selain itu, orang dapat digunakan sebagai pengenalan tipe (tes instance adalah orang dan objek). Namun, semua contoh masih independen, dan metode dari berbagai contoh sebenarnya adalah fungsi yang berbeda. Lupa fungsi kata di sini, perlakukan Sayname sebagai objek dan memahaminya. Dengan kata lain, Sayname Zhang San dan Sayname Li Si memiliki keberadaan yang berbeda, tetapi jelas apa yang kita harapkan adalah berbagi nama sayname untuk menyelamatkan memori.
4) Mode prototipe
// 4. Mode prototipe, tentukan langsung prototipe Atribut Function Person () {} person.prototype.name = 'jack'; person.prototype.age = 18; person.prototype.sayname = function () {alert (this.name); }; // 4. Prototipe, metode definisi literal fungsi person () {} person.prototype = {name: 'jack', usia: 18, sayname: function () {alert (this.name); }}; var p1 = orang baru (); // name = 'jack'var p2 = orang baru (); // name = 'jack'Apa yang perlu dicatat di sini adalah berbagi atribut dan metode prototipe, yaitu, semua contoh hanya merujuk pada metode atribut dalam prototipe, dan perubahan yang dihasilkan di tempat mana pun akan menyebabkan perubahan dalam kasus lain.
5) Mode campuran (konstruksi + prototipe)
// 5. Prototipe Mode Kombinasi Konstruk, Orang Fungsi (Nama, Usia) {this.name = name; this.age = age;} person.prototype = {hobi: ['running', 'football']; sayname: function () {alert (this.name); }, Sayage: function () {alert (this.age); }}; var p1 = orang baru ('jack', 20); // p1: 'jack', 20; __proto__: ['running', 'football'], sayname, sayagevar p2 = orang baru ('Mark', 18); // P1: 'Mark', 18; __ Proto__: ['Running', 'Football'], Sayname, SayagePendekatannya adalah untuk menempatkan metode properti yang perlu independen ke dalam konstruktor, dan bagian -bagian yang dapat dibagikan ditempatkan ke dalam prototipe. Ini dapat memaksimalkan penghematan memori sambil mempertahankan independensi instance objek.