JavaScript-prototype forklaret med eksempler

Prototyper

JavaScript er et prototype-baseret sprog, og derfor er forståelse af prototype-objektet et af de vigtigste begreber, som JavaScript-praktikere har brug for at vide. Denne artikel giver dig et kort overblik over Prototype-objektet gennem forskellige eksempler. Før du læser denne artikel, skal du have en grundlæggende forståelse af thisreferencen i JavaScript.

Prototype objekt

Af hensyn til klarheden skal vi undersøge følgende eksempel:

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

Efterhånden som Point2Dfunktionen erklæres, prototypeoprettes en navngivet standardegenskab for den (bemærk, at en funktion i JavaScript også er et objekt). Den prototypeegenskab er et objekt, som indeholder en constructoregenskab og dens værdi er Point2Dfunktionen: Point2D.prototype.constructor = Point2D. Og når du ringer Point2Dmed newnøgleord, arver nyoprettede objekter alle egenskaber fraPoint2D.prototype . For at kontrollere det kan du tilføje en metode navngivet movei Point2D.prototypesom følger:

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

Det Point2D.prototypekaldes prototype objekt eller prototype af p1objekt og for ethvert andet objekt oprettet med new Point2D(...)syntaks. Du kan tilføje flere egenskaber til at Point2D.prototypegøre indsigelse, som du vil. Det fælles mønster er erklære metoder til Point2D.prototypeog andre egenskaber vil blive erklæret i konstruktørfunktion.

Indbyggede objekter i JavaScript er konstrueret på en lignende måde. For eksempel:

  • Prototype af objekter oprettet med new Object()eller {}syntaks er Object.prototype.
  • Prototype af arrays oprettet med new Array()eller []syntaks er Array.prototype.
  • Og så videre med andre indbyggede objekter som Dateog RegExp.

Object.prototypeer arvet af alle objekter, og den har ingen prototype (dens prototype er null).

Prototype kæde

Prototypekædemekanismen er enkel: Når du får adgang til en ejendom ppå et objekt obj, vil JavaScript-motoren søge i denne egenskab inden i objobjektet. Hvis motoren ikke søger, fortsætter den med at søge i prototypen på objobjektet og så videre, indtil den når Object.prototype. Hvis resultatet efter søgningen er afsluttet, og intet er fundet undefined. For eksempel:

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

I ovenstående uddrag var obj2 = Object.create(obj1)opretter udsagnet obj2objekt med prototype- obj1objekt. Med andre ord obj1bliver prototypen for i obj2stedet for Object.prototypesom standard. Som du kan se, bikke er en egenskab af obj2, kan du stadig få adgang til det via prototypekæden. For cejendom får du dog undefinedværdi, fordi den ikke kan findes i obj1og Object.prototype.

Klasser

I ES2016 får vi nu brugt Classnøgleordet samt de ovennævnte metoder til at manipulere prototype. JavaScript Classappellerer til udviklere fra OOP-baggrunde, men det gør i det væsentlige det samme som ovenfor.

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

Dette er dybest set det samme som:

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

Den getterog settermetoder i klasser binder et objekt bolig til en funktion, som vil blive kaldt, når ejendommen er så op. Det er bare syntaktisk sukker for at gøre det lettere at slå op eller indstille egenskaber.

Mere info om JS Prototyper:

  • Alt hvad du behøver at vide for at forstå JavaScript's prototype