V tej vadnici boste s pomočjo primerov spoznali prototipe v JavaScript.
Preden se naučite prototipov, si oglejte te vadnice:
- Predmeti JavaScript
- Funkcija konstruktorja JavaScript
Kot veste, lahko objekt v JavaScript ustvarite s pomočjo funkcije konstruktorja objektov. Na primer
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
V zgornjem primeru function Person()je funkcija konstruktorja objekta. Ustvarili smo dva predmeta person1in person2iz njega.
Prototip JavaScript
V JavaScript ima vsaka funkcija in objekt privzeto lastnost z imenom prototip. Na primer
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
V zgornjem primeru poskušamo dostopati do lastnosti prototipa Personkonstruktorske funkcije.
Ker lastnost prototipa trenutno nima vrednosti, prikazuje prazen objekt (…).
Dedovanje prototipa
V JavaScript lahko prototip uporabite za dodajanje lastnosti in metod v konstruktorsko funkcijo. In predmeti podedujejo lastnosti in metode iz prototipa. Na primer
// 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);
Izhod
(spol: "moški") moški moški
V zgornjem programu smo funkciji konstruktorja dodali novo lastnost genderz Personuporabo:
Person.prototype.gender = 'male';
Nato objekt person1in person2podeduje lastnost genderiz lastnosti prototipa Personkonstruktorske funkcije.
Zato, tako objekti person1in person2lahko dostopate do lastnine spolov.
Opomba: Sintaksa za dodajanje lastnosti v funkcijo konstruktorja objekta je:
objectConstructorName.prototype.key = 'value';
Prototip se uporablja za zagotavljanje dodatnih lastnosti za vse predmete, ustvarjene iz funkcije konstruktorja.
Dodajte metode v funkcijo konstruktorja s prototipom
Funkciji konstruktorja lahko s prototipom dodate tudi nove metode. Na primer
// 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
V zgornjem programu greetje Personfunkcija konstruktorja dodala novo metodo s prototipom.
Spreminjanje prototipa
Če spremenite vrednost prototipa, bodo vsi novi predmeti imeli spremenjeno vrednost lastnosti. Vsi predhodno ustvarjeni predmeti bodo imeli prejšnjo vrednost. Na primer
// 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
Opomba : Ne smete spreminjati prototipov standardnih vgrajenih objektov JavaScript, kot so nizi, nizi itd. To se šteje za slabo prakso.
Veriženje prototipov JavaScript
Če objekt poskuša dostopati do iste lastnosti, ki je v konstruktorski funkciji in prototipu, objekt vzame lastnost iz konstruktorske funkcije. Na primer
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
V zgornjem programu je ime lastnosti razglašeno v konstruktorski funkciji in tudi v prototipni lastnosti konstruktorske funkcije.
Ko se program zažene, person1.namepoišče v konstruktorski funkciji, ali obstaja lastnost z imenom name. Ker ima konstruktorska funkcija lastnost imena z vrednostjo 'John', objekt vzame vrednost iz te lastnosti.
Ko se program zažene, person1.agepoišče v konstruktorski funkciji, ali obstaja lastnost z imenom age. Ker konstruktorska funkcija nima agelastnosti, program preuči prototipni objekt konstruktorske funkcije in objekt podeduje lastnost od prototipskega objekta (če je na voljo).
Opomba : Do lastnosti prototipa funkcije konstruktorja lahko dostopate tudi iz predmeta.
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 )
V zgornjem primeru se personobjekt uporablja za dostop do lastnosti prototipa z uporabo __proto__. Vendar __proto__je bil zastarel in se ga izogibajte.
