Dalam bahasa yang berorientasi objek yang khas, seperti Java, ada konsep kelas. Kelas adalah templat suatu objek dan suatu objek adalah instance dari suatu kelas. Namun, dalam sistem bahasa JavaScript, tidak ada konsep kelas. JavaScript tidak didasarkan pada 'kelas', tetapi diimplementasikan melalui konstruktor dan rantai prototipe. Namun, ES6 menyediakan metode penulisan yang lebih dekat dengan bahasa tradisional, memperkenalkan konsep kelas (kelas) sebagai templat objek. Melalui kata kunci kelas, Anda dapat mendefinisikan kelas. Pada dasarnya, kelas ES6 dapat dianggap hanya sebagai gula sintaksis. Sebagian besar fungsinya dapat dicapai oleh ES5. Metode penulisan kelas baru hanya membuat objek prototipe ditulis lebih jelas dan lebih seperti sintaks pemrograman yang berorientasi objek.
Menurut kebiasaan saya, saya akan memberikan direktori artikel sebelum menulisnya.
Konten berikut akan dibagi menjadi subbagian berikut:
1. Pengantar singkat untuk konstruktor
2. Kontra Konstruktor
3. Peran atribut prototipe
4. Rantai prototipe
5. Atribut Konstruktor
5.1: Peran atribut konstruktor
6. Contoh operator
1. Pengantar singkat untuk konstruktor
Dalam artikel saya tentang hubungan dekat antara konstruktor dan perintah baru dalam JavaScript, konsep dan karakteristik konstruktor, prinsip -prinsip dan penggunaan perintah baru, dll., Diperkenalkan secara rinci. Jika Anda tidak terbiasa dengan konstruktor, Anda dapat pergi dan nikmati dengan hati -hati. Ini ulasan sederhana.
Konstruktor yang disebut adalah fungsi yang menyediakan templat untuk menghasilkan objek dan menjelaskan struktur dasar objek. Konstruktor dapat menghasilkan banyak objek, masing -masing dengan struktur yang sama. Secara umum, konstruktor adalah templat untuk suatu objek, dan suatu objek adalah contoh konstruktor.
Karakteristik konstruktor adalah:
A: Huruf pertama dari nama fungsi konstruktor harus dikapitalisasi.
B: Gunakan objek ini secara internal untuk menunjuk ke instance objek yang akan dihasilkan.
C: Gunakan operator baru untuk menghubungi konstruktor dan mengembalikan instance objek.
Mari kita lihat contoh paling sederhana.
function person () {this.name = 'keith';} var boy = new person (); console.log (boy.name); // 'Keith'2. Kontra Konstruktor
Semua objek instan dapat mewarisi sifat dan metode dalam konstruktor. Namun, properti tidak dapat dibagi antara contoh objek yang sama.
function person (name, height) {this.name = name; this.height = tinggi; this.hobby = function () {return 'watching movie';}} var boy = orang baru ('Keith', 180); var girl = orang baru ('bajingan', 153); console.log (boy.name); // 'Keith' console.log (girl.name); // 'rascal' console.log (boy.hobby === girl.hobby); //PALSUDalam kode di atas, seorang konstruktor menghasilkan dua instance objek anak laki -laki dan perempuan, dan memiliki dua properti dan satu metode. Namun, metode hobi mereka berbeda. Dengan kata lain, setiap kali Anda menggunakan baru untuk memanggil konstruktor untuk mengembalikannya sebagai contoh objek, metode hobi akan dibuat. Ini tidak diperlukan atau pemborosan sumber daya, karena semua metode hobi adalah perilaku kekanak -kanakan dan dapat sepenuhnya dibagikan oleh dua contoh objek.
Oleh karena itu, kerugian konstruktor adalah bahwa sifat atau metode tidak dapat dibagi antara contoh objek dari konstruktor yang sama.
3. Peran atribut prototipe
Untuk memecahkan kelemahan karena tidak dapat berbagi properti antara instance objek konstruktor, JS menyediakan atribut prototipe.
Setiap tipe data dalam JS adalah objek (kecuali null dan tidak terdefinisi), dan setiap objek mewarisi dari objek lain, yang terakhir disebut objek "prototipe", kecuali untuk null, yang tidak memiliki objek prototipe sendiri.
Semua properti dan metode pada objek prototipe akan dibagikan oleh instance objek.
Ketika instance objek dihasilkan melalui konstruktor, prototipe instance objek diarahkan ke properti prototipe konstruktor. Setiap konstruktor memiliki atribut prototipe, yang merupakan objek prototipe dari instance objek.
function person (name, height) {this.name = name; this.height = tinggi; } Person.prototype.hobby = function () {return 'watching film'; } var boy = orang baru ('Keith', 180); var girl = orang baru ('bajingan', 153); console.log (boy.name); // 'Keith' console.log (girl.name); // 'rascal' console.log (boy.hobby === girl.hobby); //BENARDalam kode di atas, jika metode hobi ditempatkan pada objek prototipe, maka kedua objek instance berbagi metode yang sama. Saya harap semua orang dapat memahami bahwa untuk konstruktor, prototipe adalah properti sebagai konstruktor; Untuk instance objek, prototipe adalah objek prototipe dari instance objek. Oleh karena itu, prototipe adalah properti dan objek.
Objek prototipe bukanlah properti dari instance objek. Atribut instance objek adalah atribut yang diwarisi dari definisi konstruktor, karena ada kata kunci di dalam konstruktor untuk menunjuk ke instance objek yang akan dihasilkan. Properti instance objek sebenarnya adalah atribut yang ditentukan secara internal oleh konstruktor. Selama properti dan metode pada objek prototipe dimodifikasi, perubahan akan segera tercermin dalam semua contoh objek.
Person.prototype.hobby = function () {return 'swimming'; } console.log (boy.hobby === girl.hobby); // console true.log (boy.hobby ()); // 'swimming'console.log (girl.hobby ()); //'renang'Dalam kode di atas, setelah memodifikasi metode hobi objek prototipe, kedua instance objek telah berubah. Ini karena instance objek sebenarnya tidak memiliki metode hobi, mereka semua adalah metode hobi yang membaca objek prototipe. Artinya, ketika instance objek tidak memiliki properti dan metode, itu akan mencari pada objek prototipe. Jika objek instan itu sendiri memiliki properti atau metode tertentu, itu tidak akan dicari pada objek prototipe.
boy.hobby = function () {return 'Play Basketball'; } console.log (boy.hobby ()); // 'mainkan basket' konsol.log (girl.hobby ()); //'renang'Dalam kode di atas, ketika metode hobi dari instance objek anak laki -laki dimodifikasi, metode hobi pada objek prototipe tidak akan diwarisi. Namun, gadis masih akan mewarisi metode objek prototipe.
Untuk meringkas:
A: Fungsi objek prototipe adalah untuk menentukan sifat dan metode yang dibagikan oleh semua instance objek.
B: Prototipe, untuk konstruktor, ini adalah properti; Untuk instance objek, ini adalah objek prototipe.
4. Rantai prototipe
Properti dan metode suatu objek dapat didefinisikan dengan sendirinya atau dalam objek prototipe. Karena objek prototipe itu sendiri adalah objek untuk membuat objek instance dan juga memiliki prototipe sendiri, rantai prototipe terbentuk. Misalnya, objek A adalah prototipe objek B, objek B adalah prototipe objek C, dan sebagainya. Bagian atas prototipe semua objek adalah objek.prototype, yaitu, objek yang ditunjuk oleh properti prototipe dari konstruktor objek.
Tentu saja, objek.Prototype objek juga memiliki objek prototipe sendiri, yaitu objek nol tanpa atribut dan metode apa pun, dan objek nol tidak memiliki prototipe sendiri.
1 console.log (object.getPrototypeOf (object.prototype)); //batal
2 console.log (person.prototype.isprototypeof (boy)) // true
Karakteristik rantai prototipe adalah:
A: Saat membaca properti tertentu dari suatu objek, mesin JavaScript terlebih dahulu mencari properti objek itu sendiri. Jika tidak dapat ditemukan, itu akan masuk ke prototipe. Jika masih tidak dapat ditemukan, itu akan masuk ke prototipe prototipe. Jika objek.Prototipe di level atas masih belum ditemukan, tidak ditentukan dikembalikan.
B: Jika objek itu sendiri dan prototipe -nya mendefinisikan atribut dengan nama yang sama, maka atribut objek itu sendiri dibaca terlebih dahulu, yang disebut "utama".
C: Mencari atribut tertentu dalam level rantai prototipe ke atas memiliki dampak pada kinerja. Semakin tinggi tingkat objek prototipe yang Anda cari, semakin besar dampaknya pada kinerja. Jika Anda mencari properti yang tidak ada, itu akan melintasi seluruh rantai prototipe.
Mungkin tidak jelas untuk melihat konsepnya, mari kita ambil contoh. Tetapi sangat penting untuk memahami konsepnya.
var arr = [1,2,3]; console.log (arr.length); //3console.log (arr.valueof ()) // [1,2,3] console.log (arr.join ('|')) // 1 | 2 | 3Dalam kode di atas, array ARR didefinisikan, dengan tiga elemen dalam array. Kami tidak menambahkan atribut atau metode apa pun ke array, tetapi kami tidak melaporkan kesalahan saat menelepon panjang, bergabung (), dan nilai ().
Atribut panjang diwarisi dari array.prototype dan milik properti pada objek prototipe. Metode bergabung juga diwarisi dari array.prototype dan termasuk metode pada objek prototipe. Kedua metode ini dibagikan oleh semua array. Ketika tidak ada atribut panjang pada objek instan, objek prototipe akan dicari.
Metode Nilai dari Object.Prototype. Pertama -tama, array ARR tidak memiliki metode nilai, jadi lihat prototipe objek array.prototype. Kemudian, saya menemukan bahwa tidak ada nilai metode pada objek array.prototype. Akhirnya, cari objek.Prototype objek.
Mari kita lihat properti dan metode objek array.prototype dan objek.prototype objek masing -masing.
console.log(Object.getOwnPropertyNames(Array.prototype))//["length", "toSource", "toString", "toLocaleString", "join", "reverse", "sort", "push", "pop", "shift", "unshift", "splice", "concat", "slice", "lastIndexOf", "indexOf", "forEach", "peta", "filter", "reduceright", "some", "every", "find", "findIndex", "copywithin", "Fill", "Entries", "Keys", "Keys", "Values", "termasuk", "", "$ set", "$ REPED"] console.log (object.getOwproty ("[[[[[imbas") console.log. "tostring", "tolocalestring", "valueof", "watch", "tidak terputus", "hasownproperty", "isPrototipeof", "propertieSenumerable", "__defineGetter__", "__Definesetter__", "__lookupgetter__" "", "" "", "" "", "" "" "" "" "", "__PETESTER__", "__LOOKUPGETUGTER__" "," "" "" "" "" "" "" __ "__" __ "" "" "" "" "__pinOpetter" "" "" "" "" "" __pINECETTER "" "" "" "" "" __ "Saya percaya bahwa ketika Anda melihat ini, Anda masih memiliki sedikit pemahaman tentang prototipe. Ini normal. Bagaimanapun, ini adalah konsep yang lebih penting dan abstrak dalam JS. Tidak mungkin menguasainya begitu cepat. Jika Anda makan beberapa artikel lagi, Anda dapat menguasai esensi. Dengan cara tertentu, ada contoh hidup, yang mungkin juga menjadi masalah yang akan dihadapi semua orang. Anda dapat melihat objek konstruktor dan prototipe JS.
5. Atribut Konstruktor
Objek prototipe memiliki atribut konstruktor yang menunjuk ke fungsi konstruktor di mana objek prototipe terletak secara default.
fungsi a () {}; console.log (a.prototype.constructor === a) // truePerlu dicatat bahwa prototipe adalah properti konstruktor, dan konstruktor adalah objek yang ditunjukkan oleh properti prototipe konstruktor, yaitu, properti objek prototipe. Berhati -hatilah untuk tidak membingungkan.
console.log (a.hasownproperty ('prototipe')); // true console.log (a.prototype.hasownproperty ('constructor')); //BENARKarena atribut konstruktor didefinisikan pada objek prototipe, itu berarti dapat diwarisi oleh semua objek instan.
fungsi a () {}; var a = new a (); console.log (a.constructor); //A()console.log(a.constructor===a.prototype.constructor);//trueDalam kode di atas, A adalah objek instance dari konstruktor A, tetapi A sendiri tidak memiliki atribut konstruktor, yang sebenarnya membaca rantai prototipe.
A.Prototype.Constructor Properti.
5.1: Peran atribut konstruktor
A: Tentukan fungsi konstruktor mana yang dimiliki oleh objek prototipe
fungsi a () {}; var a = new a (); console.log (a.constructor === a) // true console.log (a.constructor === array) // falseKode di atas berarti bahwa menggunakan properti konstruktor, ditentukan bahwa fungsi konstruktor dari objek instan A adalah A, bukan array.
B: Buat instance lain dari instance
fungsi a () {}; var a = baru a (); var b = a.constructor baru (); console.log (b instance dari a); //BENARDalam kode di atas, A adalah objek instance dari konstruktor A, dan konstruktor dapat secara tidak langsung dipanggil dari konstruktor.
C: Dimungkinkan untuk memanggil konstruktornya sendiri
A.prototype.hello = function () {return new this.constructor (); }D: Memberikan pola mewarisi konstruktor lain dari konstruktor
fungsi ayah () {} function son () {son.height.constructor.call (ini); } Son.height = ayah baru ();Dalam kode di atas, ayah dan anak sama -sama konstruktor. Memanggil ayah pada anak di dalam ini akan membentuk efek dari anak yang mewarisi ayah.
E: Karena atribut konstruktor adalah hubungan antara objek prototipe dan konstruktor, saat memodifikasi objek prototipe, Anda harus memperhatikan masalah penunjuk konstruktor.
Ada dua solusi: kedua titik atribut konstruktor ke fungsi konstruktor asli, atau cukup tambahkan properti dan metode ke objek prototipe untuk menghindari distorsi.
6. Contoh operator
Contoh operator mengembalikan nilai boolean yang menunjukkan apakah objek yang ditentukan adalah instance dari konstruktor.
fungsi a () {}; var a = baru a (); console.log (instanceof a); //BENARKarena instanceof valid untuk objek pada seluruh rantai prototipe, objek instance yang sama dapat mengembalikan benar untuk beberapa konstruktor.
fungsi a () {}; var a = new a (); console.log (contoh a); //trueconsole.log(a contoh objek); //BENARPerhatikan bahwa objek instance hanya dapat digunakan untuk tipe data yang kompleks (array, objek, dll.) Dan tidak dapat digunakan untuk tipe data sederhana (nilai boolean, angka, string, dll.).
var x = [1]; var o = {}; var b = true; var c = 'string'; console.log (x instance dari array); //trueconsole.log(o instance dari objek); // true console.log (b instance dari boolean); //falseconsole.log(c instance dari string); //PALSUJuga, baik nol maupun tidak terdefinisi adalah objek, jadi contoh selalu mengembalikan false.
console.log (null instance dari objek); // false console.log (instance tidak terdefinisi objek); //PALSU
Menggunakan instance dari operator, Anda juga dapat dengan cerdik memecahkan masalah lupa untuk menambahkan perintah baru saat memanggil konstruktor.
function keith (name, height) {if (! Contoh keith ini) {return new keith (name, height); } this.name = name; this.height = height;}Dalam kode di atas, instance dari operator digunakan untuk menentukan apakah kata kunci dalam tubuh fungsi menunjuk ke instance dari konstruktor Keith. Jika tidak, itu berarti perintah baru dilupakan. Pada saat ini, konstruktor akan mengembalikan instance objek untuk menghindari hasil yang tidak terduga.
Karena keterbatasan ruang, saya akan memperkenalkannya di sini untuk saat ini.
Dalam bagian saya berikutnya, saya akan berbicara tentang beberapa metode asli objek prototipe, seperti objek.getPrototypeOf (), Object.setPrototypeOf (), dll., Dan memperkenalkan perbandingan metode untuk mendapatkan objek asli.
Di atas adalah penjelasan terperinci dari atribut prototipe (disarankan) dalam JavaScript yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda.