Šajā apmācībā jūs uzzināsit par JavaScript prototipiem, izmantojot piemērus.
Pirms prototipu apgūšanas noteikti pārbaudiet šīs apmācības:
- JavaScript objekti
- JavaScript konstruktora funkcija
Kā jūs zināt, jūs varat izveidot objektu JavaScript, izmantojot objekta konstruktora funkciju. Piemēram,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Iepriekš minētajā piemērā function Person()ir objekta konstruktora funkcija. Mēs esam izveidojuši divus objektus person1un person2no tā.
JavaScript prototips
Programmā JavaScript katrai funkcijai un objektam pēc noklusējuma ir īpašums ar nosaukumu prototips. Piemēram,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Iepriekš minētajā piemērā mēs cenšamies piekļūt Personkonstruktora funkcijas prototipa īpašībai .
Tā kā prototipa īpašumam pašlaik nav vērtības, tas parāda tukšu objektu (…).
Mantojuma prototips
Programmā JavaScript prototipu var izmantot, lai konstruktora funkcijai pievienotu īpašības un metodes. Objekti manto īpašības un metodes no prototipa. Piemēram,
// 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);
Rezultāts
(dzimums: "vīrietis") vīriešu dzimuma vīrietis
Iepriekš minētajā programmā mēs esam pievienojuši konstruktora funkcijai jaunu rekvizītu gender, Personizmantojot:
Person.prototype.gender = 'male';
Tad objekts person1un person2īpašums gendertiek mantots no Personkonstruktora funkcijas prototipa īpašības .
Tādējādi abi objekti person1un person2var piekļūt dzimuma īpašumam.
Piezīme: Sintakse rekvizīta pievienošanai objekta konstruktora funkcijai ir šāda:
objectConstructorName.prototype.key = 'value';
Prototips tiek izmantots, lai nodrošinātu papildu īpašības visiem objektiem, kas izveidoti, izmantojot konstruktora funkciju.
Pievienojiet metodes konstruktora funkcijai, izmantojot prototipu
Izmantojot prototipu, konstruktora funkcijai varat pievienot arī jaunas metodes. Piemēram,
// 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
Iepriekš minētajā programmā konstruktora funkcijai greettiek pievienota jauna metode, Personizmantojot prototipu.
Prototipa maiņa
Ja prototipa vērtība tiek mainīta, visiem jaunajiem objektiem būs mainīta rekvizīta vērtība. Visiem iepriekš izveidotajiem objektiem būs iepriekšējā vērtība. Piemēram,
// 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
Piezīme . Jums nevajadzētu modificēt standarta JavaScript iebūvēto objektu, piemēram, virknes, masīvus, utt. Tas tiek uzskatīts par sliktu praksi.
JavaScript prototipa ķēde
Ja objekts mēģina piekļūt tam pašam īpašumam, kas atrodas konstruktora funkcijā, un prototipa objektam, objekts paņem rekvizītu no konstruktora funkcijas. Piemēram,
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
Iepriekš minētajā programmā rekvizīta nosaukums tiek deklarēts konstruktora funkcijā un arī konstruktora funkcijas prototipa īpašībā.
Kad programma izpilda, person1.nameieskatieties konstruktora funkcijā, lai redzētu, vai ir īpašums ar nosaukumu name. Tā kā konstruktora funkcijai ir nosaukuma īpašība ar vērtību 'John', objekts iegūst vērtību no šīs īpašības.
Kad programma izpilda, person1.ageieskatieties konstruktora funkcijā, lai redzētu, vai ir īpašums ar nosaukumu age. Tā kā konstruktora funkcijai nav agerekvizītu, programma meklē konstruktora funkcijas prototipa objektu un objekts manto īpašumu no objekta prototipa (ja pieejams).
Piezīme . Konstruktora funkcijas prototipa īpašībai var piekļūt arī no objekta.
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 )
Iepriekš minētajā piemērā personobjekts tiek izmantots, lai piekļūtu rekvizīta prototipam, izmantojot __proto__. Tomēr __proto__tas ir novecojis, un jums vajadzētu izvairīties no tā izmantošanas.
