Šioje pamokoje su pavyzdžių pagalba sužinosite apie „JavaScript“ prototipus.
Prieš mokydamiesi prototipų, būtinai patikrinkite šias pamokas:
- „JavaScript“ objektai
- „JavaScript“ konstruktoriaus funkcija
Kaip žinote, galite sukurti objektą „JavaScript“ naudodami objekto konstruktoriaus funkciją. Pavyzdžiui,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Ankstesniame pavyzdyje function Person()yra objekto konstruktoriaus funkcija. Mes sukūrėme du objektus person1ir person2iš jo.
„JavaScript“ prototipas
„JavaScript“ programoje kiekviena funkcija ir objektas pagal numatytuosius nustatymus turi savybę, pavadintą prototipu. Pavyzdžiui,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Ankstesniame pavyzdyje mes bandome pasiekti Personkonstruktoriaus funkcijos prototipo ypatybę .
Kadangi prototipo ypatybė šiuo metu neturi jokios vertės, jis rodo tuščią objektą (…).
Paveldėjimo prototipas
„JavaScript“ naudojant prototipą galima pridėti savininkų ir metodų prie konstruktoriaus funkcijos. Objektai paveldi savybes ir metodus iš prototipo. Pavyzdžiui,
// 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);
Rezultatas
(lytis: „vyras“) vyras vyras
Pirmiau pateiktoje programoje genderprie Personkonstruktoriaus funkcijos pridėjome naują ypatybę naudodami:
Person.prototype.gender = 'male';
Tada prieštarauti person1ir person2paveldi turtą gendernuo prototipo nuosavybės Personkonstruktorius funkcija.
Taigi, abu objektai person1ir person2gali pasiekti lyties nuosavybę.
Pastaba: Ypatybės pridėjimas prie objekto konstruktoriaus funkcijos yra sintaksė:
objectConstructorName.prototype.key = 'value';
Prototipas naudojamas suteikti papildomą nuosavybę visiems objektams, sukurtiems iš konstruktoriaus funkcijos.
Pridėkite metodus prie konstruktoriaus funkcijos naudodami prototipą
Taip pat galite pridėti naujų metodų prie konstruktoriaus funkcijos naudodami prototipą. Pavyzdžiui,
// 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
Pirmiau minėtoje programoje konstruktoriaus funkcijai greetpridedamas naujas metodas, Personnaudojant prototipą.
Prototipo keitimas
Jei prototipo vertė bus pakeista, visi nauji objektai turės pakeistą nuosavybės vertę. Visi anksčiau sukurti objektai turės ankstesnę vertę. Pavyzdžiui,
// 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
Pastaba : neturėtumėte modifikuoti standartinių „JavaScript“ integruotų objektų, tokių kaip eilutės, masyvai ir pan. Tai laikoma bloga praktika.
„JavaScript“ prototipų grandinės
Jei objektas bando pasiekti tą pačią ypatybę, kuri yra konstruktoriaus funkcijoje, ir objekto prototipą, objektas perima savybę iš konstruktoriaus funkcijos. Pavyzdžiui,
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
Pirmiau pateiktoje programoje ypatybės pavadinimas nurodomas konstruktoriaus funkcijoje ir konstruktoriaus funkcijos prototipo ypatybėje.
Kai programa vykdoma, person1.nameieškokite konstruktoriaus funkcijos, ar yra ypatybė, pavadinta name. Kadangi konstruktoriaus funkcija turi vardo ypatybę su verte 'John', objektas perima vertę iš šios savybės.
Kai programa vykdoma, person1.ageieškokite konstruktoriaus funkcijos, ar yra ypatybė, pavadinta age. Kadangi konstruktoriaus funkcija neturi agenuosavybės, programa žiūri į konstruktoriaus funkcijos prototipo objektą, o objektas paveldi nuosavybę iš objekto prototipo (jei yra).
Pastaba : konstruktoriaus funkcijos prototipo ypatybę taip pat galite pasiekti iš objekto.
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 )
Ankstesniame pavyzdyje personobjektas naudojamas norint pasiekti nuosavybę prototipą naudojant __proto__. Tačiau __proto__jis buvo nebenaudojamas ir turėtumėte vengti jo naudoti.
