У овом упутству ћете научити о прототиповима у ЈаваСцрипт-у помоћу примера.
Пре него што научите прототипове, обавезно проверите ове водиче:
- ЈаваСцрипт објекти
- ЈаваСцрипт конструктор функција
Као што знате, можете креирати објекат у ЈаваСцрипт-у помоћу функције конструктора објекта. На пример,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
У горњем примеру function Person()је функција конструктора објекта. Направили смо два објекта person1и person2од њега.
ЈаваСцрипт прототип
У ЈаваСцрипт-у свака функција и објекат имају својство које се подразумевано назива прототип. На пример,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
У горњем примеру покушавамо да приступимо прототипу својства Personконструкторске функције.
Будући да својство прототипа тренутно нема вредност, приказује празан објекат (…).
Наслеђивање прототипа
У ЈаваСцрипт-у се прототип може користити за додавање својстава и метода у функцију конструктора. А објекти наслеђују својства и методе из прототипа. На пример,
// 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);
Оутпут
(пол: „мушко“) мушко мушко
У горе наведеном програму додали смо ново својство genderу функцију Personконструктора користећи:
Person.prototype.gender = 'male';
Затим објект person1и person2наслеђује својство genderиз својства прототипа Personфункције конструктора.
Дакле, оба објекта могу person1и person2могу приступити родном својству.
Напомена: Синтакса за додавање својства у функцију конструктора објекта је:
objectConstructorName.prototype.key = 'value';
Прототип се користи за пружање додатних својстава свим објектима креираним из функције конструктора.
Додајте методе у функцију конструктора помоћу прототипа
Такође можете додати нове методе у функцију конструктора помоћу прототипа. На пример,
// 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
У горе наведеном програму, нова метода greetје додата у функцију Personконструктора помоћу прототипа.
Промена прототипа
Ако се вредност прототипа промени, тада ће сви нови објекти имати промењену вредност својства. Сви претходно створени објекти имаће претходну вредност. На пример,
// 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
Напомена : Не бисте требали мењати прототипове стандардних ЈаваСцрипт уграђених објеката као што су низови, низови итд. То се сматра лошом праксом.
Уланчавање прототипа ЈаваСцрипт-а
Ако објекат покуша да приступи истом својству које је у функцији конструктора и прототипу објекта, објекат преузима својство из функције конструктора. На пример,
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
У горе наведеном програму, име својства је декларисано у функцији конструктора, а такође и у својству прототипа функције конструктора.
Када се програм изврши, person1.nameпогледа у функцији конструктора да види да ли постоји неко својство са именом name. Будући да конструкторска функција има својство имена са вриједношћу 'John', објект узима вриједност из тог својства.
Када се програм изврши, person1.ageпогледа у функцији конструктора да види да ли постоји неко својство са именом age. Будући да конструкторска функција нема ageсвојство, програм прегледава прототип објекта конструкторске функције и објекат насљеђује својство од прототипског објекта (ако је доступан).
Напомена : Такође можете приступити својству прототипа функције конструктора из објекта.
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 )
У горњем примеру, personобјекат се користи за приступ својству прототипа користећи __proto__. Међутим, __proto__застарео је и не бисте га смели користити.
