V tomto kurzu se na příkladech dozvíte o prototypech v JavaScriptu.
Než se naučíte prototypy, nezapomeňte zkontrolovat tyto výukové programy:
- Objekty JavaScript
- Funkce konstruktoru JavaScriptu
Jak víte, můžete vytvořit objekt v JavaScriptu pomocí funkce konstruktoru objektu. Například,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Ve výše uvedeném příkladu function Person()je funkce konstruktoru objektu. Vytvořili jsme dva objekty person1a person2od něj.
Prototyp JavaScriptu
V JavaScriptu má každá funkce a objekt ve výchozím nastavení vlastnost s názvem prototyp. Například,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Ve výše uvedeném příkladu se pokoušíme získat přístup k vlastnosti prototypu Personfunkce konstruktoru.
Protože vlastnost prototypu nemá v tuto chvíli žádnou hodnotu, zobrazuje prázdný objekt (…).
Dědičnost prototypů
V JavaScriptu lze prototyp použít k přidání vlastností a metod do funkce konstruktoru. A objekty dědí vlastnosti a metody z prototypu. Napří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ýstup
(pohlaví: „muž“) mužský muž
Ve výše uvedeném programu jsme genderdo funkce Personkonstruktoru přidali novou vlastnost pomocí:
Person.prototype.gender = 'male';
Potom objekt person1a person2zdědí vlastnost genderz vlastnosti prototypu Personfunkce konstruktoru.
Proto oba objekty person1a person2mají přístup k vlastnosti pohlaví.
Poznámka: Syntaxe pro přidání vlastnosti do funkce konstruktoru objektu je:
objectConstructorName.prototype.key = 'value';
Prototyp se používá k poskytnutí další vlastnosti všem objektům vytvořeným z funkce konstruktoru.
Přidejte metody do funkce konstruktoru pomocí prototypu
Můžete také přidat nové metody do funkce konstruktoru pomocí prototypu. Napří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
Ve výše uvedeném programu greetje do metody Personkonstruktoru přidána nová metoda pomocí prototypu.
Změna prototypu
Pokud se změní hodnota prototypu, budou mít všechny nové objekty změněnou hodnotu vlastnosti. Všechny dříve vytvořené objekty budou mít předchozí hodnotu. Napří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 : Neměli byste upravovat prototypy standardních vestavěných objektů JavaScriptu, jako jsou řetězce, pole atd. Je to považováno za špatný postup.
Řetězení prototypů JavaScriptu
Pokud se objekt pokusí získat přístup ke stejné vlastnosti, která je ve funkci konstruktoru a prototypu objektu, přebírá objekt vlastnost z funkce konstruktoru. Napří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
Ve výše uvedeném programu je název vlastnosti deklarován ve funkci konstruktoru a také ve vlastnosti prototypu funkce konstruktoru.
Když se program spustí, person1.namepodívá se do funkce konstruktoru a zjistí, zda existuje vlastnost s názvem name. Protože funkce konstruktoru má vlastnost name s hodnotou 'John', objekt přebírá hodnotu z této vlastnosti.
Když se program spustí, person1.agepodívá se do funkce konstruktoru a zjistí, zda existuje vlastnost s názvem age. Protože funkce konstruktoru nemá agevlastnost, program prohlédne prototypový objekt funkce konstruktoru a objekt zdědí vlastnost z prototypového objektu (pokud je k dispozici).
Poznámka : K vlastnosti prototypu funkce konstruktoru můžete přistupovat také 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 )
Ve výše uvedeném příkladu se personobjekt používá k přístupu k vlastnosti prototypu pomocí __proto__. Byla však __proto__zastaralá a měli byste se jí vyhnout.
