În acest tutorial, veți afla despre prototipuri în JavaScript cu ajutorul exemplelor.
Înainte de a învăța prototipuri, asigurați-vă că verificați aceste tutoriale:
- Obiecte JavaScript
- Funcția constructor JavaScript
După cum știți, puteți crea un obiect în JavaScript folosind o funcție constructor de obiecte. De exemplu,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
În exemplul de mai sus, function Person()este o funcție constructor de obiecte. Am creat două obiecte person1și person2din ea.
Prototip JavaScript
În JavaScript, fiecare funcție și obiect are în mod implicit o proprietate numită prototip. De exemplu,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
În exemplul de mai sus, încercăm să accesăm proprietatea prototip a unei Personfuncții constructor.
Deoarece proprietatea prototip nu are nicio valoare în acest moment, arată un obiect gol (…).
Moștenirea prototipului
În JavaScript, un prototip poate fi folosit pentru a adăuga proprietăți și metode unei funcții de constructor. Iar obiectele moștenesc proprietăți și metode de la un prototip. De exemplu,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);
Ieșire
(sex: „masculin”) masculin masculin
În programul de mai sus, am adăugat o nouă proprietate genderla Personfuncția constructor folosind:
Person.prototype.gender = 'male';
Apoi obiectează person1și person2moștenește proprietatea genderde la proprietatea prototip a Personfuncției constructor.
Prin urmare, ambele obiecte person1și person2pot accesa proprietatea de gen.
Notă: Sintaxa pentru a adăuga proprietatea la o funcție de constructor de obiecte este:
objectConstructorName.prototype.key = 'value';
Prototipul este folosit pentru a oferi proprietăți suplimentare tuturor obiectelor create dintr-o funcție constructor.
Adăugați metode la o funcție de constructor folosind prototip
De asemenea, puteți adăuga metode noi la o funcție constructor folosind prototip. De exemplu,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() ( console.log('hello' + ' ' + this.name); ) person1.greet(); // hello John person2.greet(); // hello John
În programul de mai sus, o nouă metodă greeteste adăugată la Personfuncția constructor folosind un prototip.
Schimbarea prototipului
Dacă se modifică o valoare prototip, atunci toate obiectele noi vor avea valoarea proprietății modificată. Toate obiectele create anterior vor avea valoarea anterioară. De exemplu,
// constructor function function Person() ( this.name = 'John' ) // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = ( age: 50 ) // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20
Notă : Nu trebuie să modificați prototipurile obiectelor încorporate JavaScript standard, cum ar fi șiruri, tablouri etc. Este considerată o practică proastă.
Înlănțuirea prototipului JavaScript
Dacă un obiect încearcă să acceseze aceeași proprietate care este în funcția constructor și obiectul prototip, obiectul preia proprietatea din funcția constructor. De exemplu,
function Person() ( this.name = 'John' ) // adding property Person.prototype.name = 'Peter'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // John console.log(person1.age); // 23
În programul de mai sus, un nume de proprietate este declarat în funcția constructor și, de asemenea, în proprietatea prototip a funcției constructor.
Când programul se execută, person1.namecaută în funcția constructor pentru a vedea dacă există o proprietate numită name. Deoarece funcția constructor are numele proprietate cu valoare 'John', obiectul preia valoare din acea proprietate.
Când programul se execută, person1.agecaută în funcția constructor pentru a vedea dacă există o proprietate numită age. Deoarece funcția constructor nu are ageproprietăți, programul analizează obiectul prototip al funcției constructor și obiectul moștenește proprietatea de la obiectul prototip (dacă este disponibil).
Notă : De asemenea, puteți accesa proprietatea prototip a unei funcții constructor dintr-un obiect.
function Person () ( this.name = 'John' ) // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // ( age: 24 )
În exemplul de mai sus, un personobiect este utilizat pentru a accesa proprietatea prototip folosind __proto__. Cu toate acestea, __proto__a fost învechit și ar trebui să evitați utilizarea acestuia.
