Prototaip JavaScript Dijelaskan dengan Contoh

Prototaip

JavaScript adalah bahasa berasaskan prototaip, oleh itu memahami objek prototaip adalah salah satu konsep yang paling penting yang perlu diketahui oleh pengamal JavaScript. Artikel ini akan memberikan gambaran ringkas mengenai objek Prototaip melalui pelbagai contoh. Sebelum membaca artikel ini, anda perlu memahami asas thisrujukan dalam JavaScript.

Objek prototaip

Demi kejelasan, mari kita periksa contoh berikut:

function Point2D(x, y) { this.x = x; this.y = y; }

Sebagai Point2Dfungsi diisytiharkan, properti lalai bernama prototypeakan dibuat untuknya (perhatikan bahawa, dalam JavaScript, fungsi juga merupakan objek) The prototypeharta adalah objek yang mengandungi constructorharta dan nilainya adalah Point2Dfungsi: Point2D.prototype.constructor = Point2D. Dan apabila anda memanggil Point2Ddengan newkata kunci, objek yang baru dibuat akan mewarisi semua sifat dariPoint2D.prototype . Untuk menyemak sama ada, anda boleh menambah kaedah yang dinamakan moveke dalam Point2D.prototypeseperti berikut:

Point2D.prototype.move = function(dx, dy) { this.x += dx; this.y += dy; } var p1 = new Point2D(1, 2); p1.move(3, 4); console.log(p1.x); // 4 console.log(p1.y); // 6

Yang Point2D.prototypedipanggil objek prototaip atau prototaip daripada p1objek dan untuk apa-apa objek lain dicipta dengan new Point2D(...)sintaks. Anda boleh menambahkan lebih banyak sifat untuk Point2D.prototypeobjek mengikut keinginan anda. Corak umum adalah kaedah menyatakan Point2D.prototypedan sifat lain akan dinyatakan dalam fungsi pembina.

Objek terbina dalam JavaScript dibina dengan cara yang serupa. Sebagai contoh:

  • Prototaip objek yang dibuat dengan new Object()atau {}sintaks adalah Object.prototype.
  • Prototaip tatasusunan yang dibuat dengan new Array()atau []sintaks adalah Array.prototype.
  • Dan seterusnya dengan objek bawaan lain seperti Datedan RegExp.

Object.prototypediwarisi oleh semua objek dan tidak mempunyai prototaip (prototaipnya adalah null).

Rangkaian prototaip

Mekanisme rantai prototaip mudah: Apabila anda mengakses harta pbenda pada objek obj, mesin JavaScript akan mencari harta benda ini di dalam objobjek. Sekiranya enjin gagal dicari, ia terus mencari dalam prototaip objobjek dan seterusnya sehingga sampai Object.prototype. Sekiranya setelah pencarian selesai, dan tidak ada yang dijumpai, hasilnya akan menjadi undefined. Sebagai contoh:

var obj1 = { a: 1, b: 2 }; var obj2 = Object.create(obj1); obj2.a = 2; console.log(obj2.a); // 2 console.log(obj2.b); // 2 console.log(obj2.c); // undefined

Dalam coretan di atas, pernyataan var obj2 = Object.create(obj1)akan membuat obj2objek dengan obj1objek prototaip . Dengan kata lain, obj1menjadi prototaip dan obj2bukannya Object.prototypesecara lalai. Seperti yang anda lihat, bbukan milik obj2, anda masih boleh mengaksesnya melalui rangkaian prototaip. cNamun, untuk harta tanah, anda mendapat undefinednilai kerana tidak dapat dijumpai di obj1dan Object.prototype.

Kelas

Pada ES2016, sekarang kita dapat menggunakan Classkata kunci dan juga kaedah yang disebutkan di atas untuk memanipulasi prototype. JavaScript Classmenarik untuk pemaju dari latar belakang OOP, tetapi pada dasarnya melakukan perkara yang sama seperti di atas.

class Rectangle { constructor(height, width) { this.height = height this.width = width } get area() { return this.calcArea() } calcArea() { return this.height * this.width } } const square = new Rectangle(10, 10) console.log(square.area) // 100

Ini pada dasarnya sama dengan:

function Rectangle(height, width) { this.height = height this.width = width } Rectangle.prototype.calcArea = function calcArea() { return this.height * this.width }

Yang getterdan setterkaedah dalam kelas mengikat hartanah Objek ke fungsi yang akan dipanggil apabila harta yang melihat ke atas. Ini hanya gula sintaksis untuk membantu mempermudah mencari atau menetapkan sifat.

Maklumat lanjut mengenai Prototaip JS:

  • Yang perlu anda ketahui untuk memahami prototaip JavaScript