Tässä opetusohjelmassa opit JavaScript-prototyypeistä esimerkkien avulla.
Ennen kuin opit prototyyppejä, muista tarkistaa nämä oppaat:
- JavaScript-objektit
- JavaScript-rakennustoiminto
Kuten tiedät, voit luoda objektin JavaScriptiin objektikonstruktoritoiminnon avulla. Esimerkiksi,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Yllä olevassa esimerkissä function Person()on objektinrakentajafunktio. Olemme luoneet kaksi esinettä person1ja person2siitä.
JavaScript-prototyyppi
JavaScriptissä jokaisella toiminnolla ja objektilla on oletusarvoisesti prototyypiksi kutsuttu ominaisuus. Esimerkiksi,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Yllä olevassa esimerkissä yritämme käyttää Personkonstruktoritoiminnon prototyyppiominaisuutta .
Koska prototyyppiominaisuudella ei ole tällä hetkellä arvoa, se näyttää tyhjän objektin (…).
Prototyypin perintö
JavaScriptissä prototyyppiä voidaan käyttää lisäämään ominaisuuksia ja menetelmiä konstruktoritoimintoon. Ja esineet perivät ominaisuuksia ja menetelmiä prototyypistä. Esimerkiksi,
// 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);
Tuotos
(sukupuoli: "mies") uros uros
Yllä olevassa ohjelmassa, olemme lisänneet uuden ominaisuuden gender, että Personrakentajan toiminnon avulla:
Person.prototype.gender = 'male';
Objekti person1ja person2peri sitten ominaisuuden rakennustoiminnon genderprototyypin ominaisuudesta Person.
Siksi molemmat objektit person1ja person2voivat käyttää sukupuoliomaisuutta.
Huomaa: Syntaksi ominaisuuden lisäämiseksi objektinrakentajafunktioon on:
objectConstructorName.prototype.key = 'value';
Prototyyppiä käytetään tarjoamaan lisäominaisuutta kaikille rakennustoiminnosta luotuille objekteille.
Lisää menetelmät rakentajafunktioon prototyypin avulla
Voit myös lisätä uusia menetelmiä konstruktoritoimintoon prototyypin avulla. Esimerkiksi,
// 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
Yllä olevassa ohjelmassa konstruktorin toimintoon greetlisätään uusi menetelmä Personprototyyppiä käyttäen.
Prototyypin vaihtaminen
Jos prototyypin arvoa muutetaan, kaikilla uusilla kohteilla on muuttunut ominaisuusarvo. Kaikilla aiemmin luotuilla kohteilla on edellinen arvo. Esimerkiksi,
// 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
Huomaa : Sinun ei pitäisi muokata tavallisten JavaScript-sisäänrakennettujen objektien, kuten merkkijonojen, taulukoiden jne. Prototyyppejä. Sitä pidetään huonona käytäntönä.
JavaScript-prototyyppiketju
Jos objekti yrittää käyttää samaa ominaisuutta, joka on konstruktoritoiminnossa ja prototyyppi-objektissa, objekti ottaa ominaisuuden konstruktoritoiminnosta. Esimerkiksi,
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
Yllä olevassa ohjelmassa ominaisuuden nimi ilmoitetaan konstruktorifunktiossa ja myös konstruktorifunktion prototyyppiominaisuudessa.
Kun ohjelma suoritetaan, person1.nameetsi konstruktoritoiminnosta onko nimetty ominaisuus name. Koska konstruktori-funktiolla on nimiominaisuus arvon kanssa 'John', objekti ottaa arvon tältä ominaisuudelta.
Kun ohjelma suoritetaan, person1.ageetsi konstruktoritoiminnosta onko nimetty ominaisuus age. Koska konstruktorifunktiolla ei ole ageominaisuutta, ohjelma etsii konstruktorifunktion prototyyppi-objektia ja objekti perii ominaisuuden prototyyppikohteesta (jos käytettävissä).
Huomaa : Voit myös käyttää rakennustoiminnon prototyyppiominaisuutta objektista.
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 )
Yllä olevassa esimerkissä personobjektia käytetään pääsemään prototyyppiominaisuuteen käyttämällä __proto__. Se __proto__on kuitenkin vanhentunut, joten sinun tulee välttää sen käyttöä.
