V tomto výučbe sa pomocou príkladov dozviete o prototypoch v jazyku JavaScript.
Predtým, ako sa naučíte prototypy, nezabudnite si prečítať tieto návody:
- Objekty JavaScript
- Funkcia konštruktora JavaScriptu
Ako viete, objekt môžete vytvoriť v JavaScripte pomocou funkcie konštruktora objektov. Napríklad,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Vo vyššie uvedenom príklade function Person()je funkcia konštruktora objektu. Vytvorili sme dva objekty person1a person2z nich.
Prototyp JavaScriptu
V JavaScripte má každá funkcia a objekt predvolene vlastnosť s názvom prototyp. Napríklad,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Vo vyššie uvedenom príklade sa pokúšame získať prístup k vlastnosti prototypu Personfunkcie konštruktora.
Pretože vlastnosť prototypu nemá v tejto chvíli žiadnu hodnotu, zobrazuje prázdny objekt (…).
Dedičstvo prototypov
V JavaScripte je možné prototyp použiť na pridanie vlastností a metód k funkcii konštruktora. A objekty dedia vlastnosti a metódy od prototypu. Napríklad,
// 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);
Výkon
(pohlavie: „muž“) mužský muž
Vo vyššie uvedenom programe sme genderdo funkcie Personkonštruktora pridali novú vlastnosť pomocou:
Person.prototype.gender = 'male';
Potom namietnite person1a person2dedte vlastnosť genderz vlastnosti prototypu Personfunkcie konštruktora.
Preto obidva objekty person1a person2majú prístup k vlastnosti pohlavia.
Poznámka: Syntax na pridanie vlastnosti do funkcie konštruktora objektov je:
objectConstructorName.prototype.key = 'value';
Prototyp sa používa na zabezpečenie ďalších vlastností pre všetky objekty vytvorené z funkcie konštruktora.
Pridajte metódy do funkcie konštruktora pomocou prototypu
Môžete tiež pridať nové metódy do funkcie konštruktora pomocou prototypu. Napríklad,
// 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
Vo vyššie uvedenom programe greetje do funkcie Personkonštruktora pridaná nová metóda pomocou prototypu.
Zmena prototypu
Ak sa zmení hodnota prototypu, potom budú mať všetky nové objekty zmenenú hodnotu vlastnosti. Všetky predtým vytvorené objekty budú mať predchádzajúcu hodnotu. Napríklad,
// 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
Poznámka : Nemali by ste upravovať prototypy štandardných zabudovaných objektov JavaScriptu, ako sú reťazce, polia atď. Považuje sa to za zlý postup.
Reťazenie prototypov JavaScriptu
Ak sa objekt pokúsi získať prístup k rovnakej vlastnosti, ktorá je vo funkcii konštruktora a prototype objektu, objekt prevezme túto vlastnosť z funkcie konštruktora. Napríklad,
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
Vo vyššie uvedenom programe je názov vlastnosti deklarovaný vo funkcii konštruktora a tiež vo vlastnosti prototypu funkcie konštruktora.
Keď sa program spustí, person1.namepozrie sa do funkcie konštruktora a zistí, či existuje vlastnosť s názvom name. Pretože funkcia konštruktora má vlastnosť name s hodnotou 'John', objekt získa hodnotu z tejto vlastnosti.
Keď sa program spustí, person1.agepozrie sa do funkcie konštruktora a zistí, či existuje vlastnosť s názvom age. Pretože funkcia konštruktora nemá agevlastnosť, program sa pozerá na prototypový objekt funkcie konštruktora a objekt dedí vlastnosť z prototypového objektu (ak je k dispozícii).
Poznámka : K vlastnosti prototypu funkcie konštruktora môžete pristupovať aj z objektu.
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 )
Vo vyššie uvedenom príklade sa personobjekt používa na prístup k vlastnosti prototypu pomocou __proto__. Podpora __proto__je však zastaraná a mali by ste sa jej vyhnúť.
