JavaScript prototípus példákkal magyarázva

Prototípusok

A JavaScript prototípus-alapú nyelv, ezért a prototípus objektum megértése az egyik legfontosabb fogalom, amelyet a JavaScript-gyakorlóknak ismerniük kell. Ez a cikk rövid példát ad a Prototype objektumról. A cikk elolvasása előtt alaposan meg kell ismernie a thisJavaScript-ben szereplő hivatkozást.

Prototípus objektum

Az egyértelműség kedvéért vizsgáljuk meg a következő példát:

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

Amint a Point2Dfüggvény deklarálva prototypelesz, létrejön egy alapértelmezett tulajdonság , amelyet elnevezünk (vegye figyelembe, hogy a JavaScript-ben egy függvény egyben objektum is). Az prototypeingatlan egy objektum, amely egy constructortulajdonság és értéke Point2Dfunkció: Point2D.prototype.constructor = Point2D. És ha hívod Point2Da newkulcsszó, az újonnan létrehozott objektumok öröklik az összes tulajdonságaitPoint2D.prototype . Annak ellenőrzésére, hogy felveheti a módszer elemzi movea Point2D.prototypekövetkezők:

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

Az Point2D.prototypeúgynevezett prototípus objektumnak vagy objektum prototípusának , p1és minden más new Point2D(...)szintaxissal létrehozott objektumnak . További tulajdonságokat adhat az Point2D.prototypeobjektumhoz tetszése szerint. A közös minta a deklarálási metódusok Point2D.prototypeés a többi tulajdonság deklarálásra kerül a konstruktor függvényében.

A JavaScript beépített objektumai hasonló módon készülnek. Például:

  • A new Object()vagy {}szintaxissal létrehozott objektumok prototípusa Object.prototype.
  • A new Array()vagy []szintaxissal létrehozott tömbök prototípusa Array.prototype.
  • És így tovább más beépített objektumokkal, például Dateés RegExp.

Object.prototypeminden objektum örökli, és nincs prototípusa (prototípusa az null).

Prototípus lánc

A prototípus láncmechanizmusa egyszerű: Amikor egy pobjektumhoz hozzáfér egy tulajdonsághoz obj, a JavaScript motor megkeresi ezt a tulajdonságot az objobjektumon belül . Ha a motor nem tud keresni, akkor folytatja a keresést az objobjektum prototípusában, és így tovább, amíg el nem éri Object.prototype. Ha a keresés befejezése után nem találtunk semmit, az eredmény az lesz undefined. Például:

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

A fenti részletben az utasítás objektumot var obj2 = Object.create(obj1)hoz létre obj2prototípus obj1objektummal. Más szavakkal, alapértelmezett helyett obj1a prototípusává válik . Amint láthatja, nem a tulajdona , akkor is hozzáférhet hozzá a prototípus láncon keresztül. Az ingatlanokért azonban értéket kap, mivel ezek nem találhatók itt és .obj2Object.prototypebobj2cundefinedobj1Object.prototype

Osztályok

Az ES2016-ban most a Classkulcsszót, valamint a fent említett módszereket használjuk a manipulációhoz prototype. A JavaScript Classaz OOP háttérrel rendelkező fejlesztőkhöz szól, de lényegében ugyanazt csinálja, mint fent.

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

Ez alapvetően megegyezik:

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

Az osztályokban lévő getterés settermetódusok egy Object tulajdonságot kötnek egy olyan függvényhez, amelyet akkor hívnak meg, amikor az adott tulajdonságot megkeresik. Csak szintaktikus cukor segít megkönnyíteni a keresést vagy a tulajdonságok beállítását .

További információ a JS prototípusokról:

  • Mindössze annyit kell tudnia, hogy megértse a JavaScript prototípusát