Pertama, bagikan contoh warisan prototipe JS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
1. JS Prototipe Warisan
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> js prototipe pewarisan </ title> </head> <body> <!-prototipe pewarisan-> <script type = "text/javascript"> // fungsi clone () fungsi digunakan untuk membuat fungsi clelas class = "{{{{{{{) {{{{{function) (function {{{{{) // Kalimat ini adalah inti dari prototipe warisan. Objek prototipe fungsi adalah objek literal_f.prototype = obj; mengembalikan _f baru; } // mendeklarasikan objek literal pertama var hewan = {somthing: 'apple', eat: function () {console.log ("eat" + this.somthing); }} // Tidak perlu mendefinisikan subkelas orang, cukup lakukan kloning var cat = clone (hewan); // Anda dapat secara langsung mendapatkan nilai default yang disediakan oleh orang, atau Anda dapat menambahkan atau memodifikasi atribut dan metode console.log (cat.eat ()); Cat.somthing = 'oranye'; console.log (cat.eat ()); // menyatakan subkelas dan melakukan kloning var seseorang = klon (kucing); </script> </body> </html>2. Prinsip Kerja Warisan Prototipe JavaScript
Sudah diketahui bahwa JavaScript mengadopsi prototipe warisan, tetapi karena hanya memberikan satu contoh implementasi, operator baru, secara default, penjelasannya selalu membingungkan. Mari kita jelaskan apa itu warisan prototipe dan bagaimana menggunakan prototipe warisan dalam JavaScript.
Definisi prototipe warisan
Ketika Anda membaca penjelasan tentang warisan prototipe JS, Anda sering melihat teks berikut:
Saat mencari properti objek, JavaScript akan melintasi rantai prototipe ke atas sampai atribut nama yang diberikan ditemukan. - Dari Taman Rahasia JavaScript
Sebagian besar implementasi JavaScript menggunakan atribut __proTo__ untuk mewakili rantai prototipe suatu objek. Dalam artikel ini, kita akan melihat perbedaan antara __proto__ dan prototipe.
Catatan: __proto__ adalah penggunaan informal yang tidak boleh muncul dalam kode Anda. Di sini kami hanya menggunakannya untuk menjelaskan cara kerja pewarisan prototipe JavaScript.
Kode berikut menunjukkan bagaimana mesin JS mencari properti:
Fungsi getProperty (obj, prop) {if (obj.hasownproperty (prop)) mengembalikan obj [prop] lain jika (obj .__ proto__! == null) mengembalikan getProperty (obj .__ proto__, prop) lagi pengembalian tidak terdefinisi}Mari kita berikan contoh umum: titik dua dimensi memiliki XY koordinat dua dimensi, yang mirip dengan memiliki metode cetak.
Menggunakan definisi prototipe warisan yang kami sebutkan sebelumnya, kami membuat titik objek dengan tiga properti: x, y, dan cetak. Untuk membuat titik dua dimensi baru, kita perlu membuat objek baru, sehingga atribut __proTo__ poin untuk menunjuk:
var point = {x: 0, y: 0, print: function () {console.log (this.x, this.y); }}; var p = {x: 10, y: 20, __proto__: point}; p.print (); // 10 20JavaScript Weare Prototipe Warisan
Yang membingungkan adalah bahwa tidak ada orang yang mengajarkan prototipe warisan yang akan memberikan kode seperti itu, tetapi akan memberikan kode berikut:
titik fungsi (x, y) {this.x = x; this.y = y; } Point.prototype = {print: function () {console.log (this.x, this.y); }}; var p = titik baru (10, 20); p.print (); // 10 20Ini berbeda dari apa yang saya katakan. Di sini titik menjadi fungsi, dan ada juga atribut prototipe, dan ada operator baru. Apa yang terjadi dengan ini?
Bagaimana operator baru bekerja
Pencipta Brendan Eich ingin membuat JS tidak jauh berbeda dari bahasa pemrograman tradisional yang berorientasi objek, seperti Java dan C ++. Dalam bahasa -bahasa ini, kami menggunakan operator baru untuk membuat instantiate objek baru ke kelas. Jadi dia menulis operator baru di JS.
Ada konsep konstruktor dalam C ++ untuk menginisialisasi properti instan, sehingga operator baru harus ditargetkan pada fungsi.
Kita perlu meletakkan metode objek di satu tempat. Karena kami menggunakan bahasa prototipe, kami akan memasukkannya ke dalam properti prototipe fungsi.
Operator baru menerima fungsi F dan parameternya: baru F (argumen ...). Proses ini dibagi menjadi tiga langkah:
Buat contoh kelas. Langkah ini adalah untuk mengatur properti __proto__ dari objek kosong ke f.prototype.
Inisialisasi instance. Fungsi F dilewatkan dalam parameter dan dipanggil, dan kata kunci ini diatur ke instance ini.
Mengembalikan instance.
Sekarang kita tahu cara kerja yang baru, kita dapat mengimplementasikannya dalam kode JS:
function new (f) {var n = {'__proto__': f.prototype}; /*Langkah 1*/ return function () {f.Apply (n, argumen); /*Langkah 2*/ kembali n; /*Langkah 3*/}; }Contoh kecil dari situasi kerjanya:
titik fungsi (x, y) {this.x = x; this.y = y; } Point.prototype = {print: function () {console.log (this.x, this.y); }}; var p1 = titik baru (10, 20); p1.print (); // 10 20 Console.log (P1 Instanceof Point); // true var p2 = baru (titik) (10, 20); p2.print (); // 10 20 Console.log (P2 Instanceof Point); // BENARWarisan prototipe sejati dalam javascript
Spesifikasi ECMA JS hanya memungkinkan kita untuk menggunakan operator baru untuk prototipe warisan. Tapi master besar Douglas Crockford menemukan cara untuk menggunakan yang baru untuk mencapai prototipe warisan yang sebenarnya! Dia menuliskan objek. Buat fungsi sebagai berikut:
Object.create = function (parent) {function f () {} f.prototype = parent; mengembalikan f baru (); };Ini terlihat aneh, tapi cukup ringkas: Ini menciptakan objek baru dan prototipe ke nilai apa pun yang ingin Anda tetapkan. Jika kami mengizinkan __proto__, kami juga dapat menulis ini:
Object.Create = function (Parent) {return {'__proto__': Parent}; };Kode berikut memungkinkan poin kami untuk mengadopsi warisan prototipe nyata:
var point = {x: 0, y: 0, print: function () {console.log (this.x, this.y); }}; var p = object.create (titik); px = 10; py = 20; p.print (); // 10 20sebagai kesimpulan
Kami telah mempelajari apa itu pewarisan prototipe JS dan bagaimana JS dapat mengimplementasikannya dengan cara tertentu. Namun, menggunakan warisan prototipe nyata (seperti objek.create dan __proto__) masih memiliki kelemahan berikut:
Kekurangan standar: __ Proto__ bukan penggunaan standar, atau bahkan penggunaan ketidaksetujuan. Pada saat yang sama, objek asli. Buat dan versi asli yang ditulis oleh Daoye juga berbeda.
Optimalisasi yang buruk: apakah objek asli atau yang disesuaikan. Buat, kinerjanya jauh lebih sedikit daripada yang baru, dan yang pertama lambat 10 kali lebih lambat dari yang terakhir.
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.