Näidetega selgitatud JavaScripti prototüüp

Prototüübid

JavaScript on prototüüpipõhine keel, seetõttu on prototüübiobjekti mõistmine üks olulisemaid mõisteid, mida JavaScripti praktikud peavad teadma. See artikkel annab teile erinevate näidete abil lühikese ülevaate objektist Prototype. Enne selle artikli lugemist peab teil thisolema JavaScripti viite põhiteadmised .

Objekti prototüüp

Uurime selguse huvides järgmist näidet:

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

Nagu Point2Dfunktsioon on deklareeritud, vaikimisi vara nimega prototypeluuakse see (märkus, et JavaScript, funktsioon on ka objekti). prototypeVara on objekt, mis sisaldab constructorvara ja selle väärtus on Point2Dfunktsioon: Point2D.prototype.constructor = Point2D. Ja kui te helistate Point2Dkoos newmärksõna, vastloodud objektid pärivad kõik omadused alatesPoint2D.prototype . Selleks et kontrollida, võite lisada meetod nimega movearvesse Point2D.prototypejärgmiselt:

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

Point2D.prototypeNimetatakse prototüübi objekti või prototüüp on p1objekti ja muu objekti loodud new Point2D(...)süntaks. Saate Point2D.prototypeobjektile lisada rohkem atribuute, kui soovite. Levinud muster on deklaratsioonimeetodid Point2D.prototypeja muud omadused deklareeritakse konstruktori funktsioonis.

JavaScripti sisseehitatud objektid ehitatakse sarnaselt. Näiteks:

  • Prototype objektide loodud new Object()või {}süntaks on Object.prototype.
  • Prototüüp massiivid loodud new Array()või []süntaks on Array.prototype.
  • Ja nii ka teiste sisseehitatud objektidega nagu Dateja RegExp.

Object.prototypeon päritud kõigi objektide poolt ja tal pole prototüüpi (selle prototüüp on null).

Prototüübi kett

Ahela prototüübi mehhanism on lihtne: kui pääsete pjuurde objekti atribuudile obj, otsib JavaScripti mootor selle atribuudi objobjekti sees . Kui mootor ei suuda otsida, jätkab see objobjekti jõudmist prototüübist ja nii edasi Object.prototype. Kui pärast otsingu lõppu pole midagi leitud, on tulemus undefined. Näiteks:

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

Ülalolevas lõigus var obj2 = Object.create(obj1)loob lause obj2prototüübiga obj1objekti. Teisisõnu obj1saab vaikimisi obj2asemel prototüübiks Object.prototype. Nagu näete, bei ole selle omadus obj2, pääsete sellele ikkagi juurde prototüüpi keti kaudu. Sest cvara, aga sa saad undefinedraha, sest seda ei saa leida obj1ja Object.prototype.

Klassid

ES2016-s saame manipuleerimiseks nüüd kasutada nii Classmärksõna kui ka ülalmainitud meetodeid prototype. JavaScript Classmeeldib OOP taustaga arendajatele, kuid sisuliselt teeb see sama, mis ülal.

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

See on põhimõtteliselt sama mis:

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

getterJa settermeetodid klassides seonduda objekt vara funktsioon, mis saab nimeks, kui see vara on tutvunud. See on lihtsalt süntaktiline suhkur, mis aitab hõlbustada omaduste otsimist või määramist .

Lisateave JS prototüüpide kohta:

  • Kõik, mida peate teadma JavaScripti prototüübi mõistmiseks