Prototipuri

JavaScript este un limbaj bazat pe prototip, prin urmare înțelegerea obiectului prototip este unul dintre cele mai importante concepte pe care practicienii JavaScript trebuie să le cunoască. Acest articol vă va oferi o scurtă prezentare generală a obiectului Prototype prin diferite exemple. Înainte de a citi acest articol, va trebui să aveți o înțelegere de bază a this referință în JavaScript.

Obiect prototip

Din motive de claritate, să examinăm următorul exemplu:

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

La fel de Point2D funcția este declarată, o proprietate implicită numită prototype va fi creat pentru aceasta (rețineți că, în JavaScript, o funcție este, de asemenea, un obiect). prototype proprietatea este un obiect care conține un constructor proprietatea și valoarea acesteia este Point2D funcţie: Point2D.prototype.constructor = Point2D. Și când suni Point2D cu new cuvânt cheie, obiectele nou create vor moșteni toate proprietățile de la Point2D.prototype. Pentru a verifica acest lucru, puteți adăuga o metodă numită move în Point2D.prototype după cum urmează:

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 se numește obiect prototip sau prototip de p1 obiect și pentru orice alt obiect creat cu new Point2D(...) sintaxă. Puteți adăuga mai multe proprietăți la Point2D.prototype obiectează după cum vrei. Modelul comun este de a declara metodele Point2D.prototype și alte proprietăți vor fi declarate în funcția de constructor.

Obiectele încorporate în JavaScript sunt construite într-un mod similar. De exemplu:

ad-banner
  • Prototipul obiectelor create cu new Object() sau {} sintaxa este Object.prototype.
  • Prototip de matrice creat cu new Array() sau [] sintaxa este Array.prototype.
  • Și așa mai departe cu alte obiecte încorporate precum Date și RegExp.

Object.prototype este moștenit de toate obiectele și nu are prototip (prototipul său este null).

Lanț prototip

Mecanismul lanțului prototip este simplu: când accesați o proprietate p pe obiect obj, motorul JavaScript va căuta această proprietate în interior obj obiect. Dacă motorul nu reușește să caute, continuă să caute în prototipul de obj obiect și așa mai departe până ajunge Object.prototype. Dacă după terminarea căutării și nu s-a găsit nimic, rezultatul va fi undefined. De exemplu:

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

În fragmentul de mai sus, declarația var obj2 = Object.create(obj1) va crea obj2 obiect cu prototip obj1 obiect. Cu alte cuvinte, obj1 devine prototipul lui obj2 in loc de Object.prototype în mod implicit. După cum puteți vedea, b nu este o proprietate a obj2, îl puteți accesa în continuare prin intermediul lanțului prototip. Pentru c proprietate, totuși, obțineți undefined valoare deoarece nu poate fi găsită în obj1 și Object.prototype.

Clase

În ES2016, acum ajungem să folosim Class cuvânt cheie, precum și metodele menționate mai sus pentru a manipula prototype. JavaScript Class face apel la dezvoltatorii din medii OOP, dar în esență face același lucru ca mai sus.

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

Aceasta este practic aceeași ca:

function Rectangle(height, width) {
  this.height = height
  this.width = width
}

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

getter și setter metodele din clase leagă o proprietate Object de o funcție care va fi apelată atunci când respectiva proprietate este căutată. Este doar zahăr sintactic care vă ajută să îl faceți mai ușor privește în sus sau a stabilit proprietăți.

Mai multe informații despre JS Prototypes:

  • Tot ce trebuie să știți pentru a înțelege prototipul JavaScript