ЈаваСцрипт прототип објашњен примерима

Прототипови

ЈаваСцрипт је језик заснован на прототипу, стога је разумевање прототипског објекта један од најважнијих концепата који практичари ЈаваСцрипт-а морају да знају. Овај чланак ће вам пружити кратак преглед објекта Прототипе кроз разне примере. Пре него што прочитате овај чланак, мораћете да основно разумете thisреференцу у ЈаваСцрипт-у.

Прототип објекта

Ради јасноће, испитајмо следећи пример:

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

Како се Point2Dфункција декларише, prototypeза њу ће се створити подразумевано својство са именом (имајте на уму да је у ЈаваСцрипт-у функција такође објекат). prototypeХотела је објекат који садржи constructorсвојство и износи Point2Dфункција: Point2D.prototype.constructor = Point2D. А када позивате Point2Dпомоћу newкључне речи, новостворени објекти ће наследити сва својства изPoint2D.prototype . Да бисте то проверили, можете додати метод именован moveна Point2D.prototypeследећи начин:

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.prototypeСе зове прототип предмет или прототип за p1објекат и за било који други објекат створен са new Point2D(...)синтаксе. Можете додати више својстава Point2D.prototypeобјекту како желите. Уобичајени образац је декларирање метода Point2D.prototypeи остале особине ће бити декларисане у функцији конструктора.

Уграђени објекти у ЈаваСцрипт-у израђују се на сличан начин. На пример:

  • Прототип објеката креираних помоћу new Object()или {}синтаксе је Object.prototype.
  • Прототип низа креираних помоћу new Array()или []синтаксе је Array.prototype.
  • И тако даље са осталим уграђеним објектима као што су Dateи RegExp.

Object.prototypeнаслеђују га сви објекти и нема прототип (његов прототип је null).

Ланац прототипа

Механизам прототипа ланца је једноставан: Када приступите својству pобјекта obj, ЈаваСцрипт механизам ће претражити ово својство унутар objобјекта. Ако мотор не успе да претражује, наставља претрагу у прототипу objобјекта и тако све док не достигне Object.prototype. Ако након што је претрага завршена, а ништа није пронађено, резултат ће бити undefined. На пример:

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

У горњем исечку изјава var obj2 = Object.create(obj1)ће створити obj2објекат са прототипом obj1објекта. Другим речима, obj1постаје прототип obj2уместо Object.prototypeпо дефаулту. Као што видите, bније својство компаније obj2, и даље јој можете приступити путем ланца прототипа. За cсвојство, међутим, добијате undefinedвредност јер се не може наћи у obj1и Object.prototype.

Предавања

У ЕС2016 сада можемо да користимо Classкључну реч као и горе поменуте методе за манипулисање prototype. ЈаваСцрипт се Classобраћа програмерима из ООП порекла, али у основи ради исту ствар као горе.

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

Ово је у основи исто као:

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

getterИ setterметоди у настави везује за Објецт особине на функцију која ће се звати када се та имовина подиже поглед. То је само синтаксички шећер који вам олакшава тражење или подешавање својстава.

Више информација о ЈС прототиповима:

  • Све што треба да знате да бисте разумели ЈаваСцрипт прототип