Selles õpetuses saate näidete abil õppida JavaScripti prototüüpe.
Enne prototüüpide õppimist kontrollige kindlasti neid õpetusi:
- JavaScripti objektid
- JavaScripti konstruktori funktsioon
Nagu teate, saate objekti konstruktori funktsiooni abil luua JavaScripti objekti. Näiteks,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Ülaltoodud näites function Person()on objekti konstruktori funktsioon. Oleme loonud kaks objekti person1ja person2sellest.
JavaScripti prototüüp
JavaScripti puhul on igal funktsioonil ja objektil vaikimisi omadus nimega prototüüp. Näiteks,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Ülalolevas näites proovime pääseda juurde Personkonstruktori funktsiooni prototüübi omadusele .
Kuna prototüübi atribuudil pole praegu väärtust, näitab see tühja objekti (…).
Prototüübi pärand
JavaScripti abil saab konstruktori funktsioonile omaduste ja meetodite lisamiseks kasutada prototüüpi. Ja objektid pärivad omadused ja meetodid prototüübilt. Näiteks,
// 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äljund
(sugu: "mees") mees mees
Ülaltoodud programmis oleme lisanud konstruktori funktsioonile uue atribuudi gender, Personkasutades:
Person.prototype.gender = 'male';
Seejärel objekt person1ja person2pärib gendervara Personkonstruktori funktsiooni prototüübi omadusest .
Seega saavad mõlemad objektid person1ja person2saavad kasutada soo omadust.
Märkus . Atribuudi lisamine objektikonstruktori funktsiooni on süntaks:
objectConstructorName.prototype.key = 'value';
Prototüüpi kasutatakse täiendavate omaduste pakkumiseks kõigile konstruktori funktsioonist loodud objektidele.
Lisage meetodid konstruktori funktsioonile, kasutades prototüüpi
Prototüübi abil saate konstruktori funktsioonile lisada ka uusi meetodeid. Näiteks,
// 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
Ülaltoodud programmis greetlisatakse Personkonstruktori funktsioonile prototüübi abil uus meetod .
Prototüübi muutmine
Kui prototüübi väärtust muudetakse, on kõigil uutel objektidel atribuudi väärtus muutunud. Kõigil varem loodud objektidel on eelmine väärtus. Näiteks,
// 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
Märkus . Te ei tohiks modifitseerida standardsete JavaScripti sisseehitatud objektide prototüüpe, näiteks stringe, massiive jne. Seda peetakse halvaks tavaks.
JavaScripti prototüübi ketid
Kui objekt üritab juurde pääseda samale atribuudile, mis on konstruktori funktsioonis ja prototüübi objektil, võtab objekt atribuudi konstruktori funktsioonilt. Näiteks,
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
Ülaltoodud programmis deklareeritakse atribuudi nimi konstruktori funktsioonis ja ka konstruktori funktsiooni prototüübi omaduses.
Kui programm käivitub, person1.nameotsib konstruktori funktsioon, kas seal on atribuut nimega name. Kuna konstruktori funktsioonil on väärtusega omadus nimega 'John', võtab objekt selle omaduse väärtuse.
Kui programm käivitub, person1.ageotsib konstruktori funktsioon, kas seal on atribuut nimega age. Kuna konstruktori funktsioonil pole ageomadusi, uurib programm konstruktori funktsiooni prototüübi objekti ja objekt pärib objekti prototüübilt vara (kui see on saadaval).
Märkus . Konstruktori funktsiooni prototüübi omadusele pääseb juurde ka objektilt.
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 )
Ülaltoodud näites kasutatakse personobjekti prototüübi kasutamiseks juurdepääsu abil __proto__. Kuid see __proto__on iganenud ja peaksite selle kasutamist vältima.
