I denne veiledningen vil du lære om prototyper i JavaScript ved hjelp av eksempler.
Før du lærer deg prototyper, må du sjekke disse opplæringene:
- JavaScript-objekter
- JavaScript-konstruktorfunksjon
Som du vet, kan du opprette et objekt i JavaScript ved hjelp av en objektkonstruktørfunksjon. For eksempel,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
I eksemplet ovenfor function Person()er en objektkonstruktørfunksjon. Vi har laget to objekter person1og person2fra det.
JavaScript-prototype
I JavaScript har hver funksjon og objekt en egenskap som heter prototype som standard. For eksempel,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
I eksemplet ovenfor prøver vi å få tilgang til prototypeegenskapen til en Personkonstruktorfunksjon.
Siden prototypegenskapen ikke har noen verdi for øyeblikket, viser den et tomt objekt (…).
Prototype Arv
I JavaScript kan en prototype brukes til å legge til egenskaper og metoder til en konstruktorfunksjon. Og gjenstander arver egenskaper og metoder fra en prototype. For eksempel,
// 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);
Produksjon
(kjønn: "mann") mannlig mann
I programmet ovenfor har vi lagt til en ny egenskap gendertil Personkonstruktorfunksjonen ved hjelp av:
Person.prototype.gender = 'male';
Motvirker person1og person2arver deretter eiendommen genderfra prototypegenskapen til Personkonstruktorfunksjonen.
Derfor både objekter person1og person2kan få tilgang til kjønnsegenskapen.
Merk: Syntaksen for å legge til egenskapen til en objektkonstruktørfunksjon er:
objectConstructorName.prototype.key = 'value';
Prototype brukes til å gi tilleggsegenskap til alle objektene opprettet fra en konstruktorfunksjon.
Legg til metoder i en konstruktorfunksjon ved hjelp av prototype
Du kan også legge til nye metoder i en konstruktorfunksjon ved hjelp av prototype. For eksempel,
// 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
I programmet ovenfor blir en ny metode greetlagt til Personkonstruktorfunksjonen ved hjelp av en prototype.
Endrer prototype
Hvis en prototypeverdi endres, vil alle de nye objektene ha den endrede eiendomsverdien. Alle tidligere opprettede objekter vil ha den forrige verdien. For eksempel,
// 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
Merk : Du bør ikke endre prototypene til standard innebygde JavaScript-objekter som strenger, matriser osv. Det regnes som dårlig praksis.
JavaScript-prototypkjetting
Hvis et objekt prøver å få tilgang til den samme egenskapen som er i konstruktorfunksjonen og prototypen, tar objektet egenskapen fra konstruktorfunksjonen. For eksempel,
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
I det ovennevnte programmet er et eiendomsnavn deklarert i konstruktorfunksjonen og også i prototypegenskapen til konstruktorfunksjonen.
Når programmet kjøres, person1.nameser du i konstruktorfunksjonen for å se om det er en eiendom som heter name. Siden konstruktorfunksjonen har navnegenskapen med verdi 'John', tar objektet verdien fra den egenskapen.
Når programmet kjøres, person1.ageser du i konstruktorfunksjonen for å se om det er en eiendom som heter age. Siden konstruktorfunksjonen ikke har ageeiendom, ser programmet på prototype-objektet til konstruktorfunksjonen, og objektet arver eiendom fra prototype-objektet (hvis tilgjengelig).
Merk : Du kan også få tilgang til prototypeegenskapen til en konstruktorfunksjon fra et objekt.
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 )
I eksemplet ovenfor personbrukes et objekt for å få tilgang til prototypegenskapen ved hjelp av __proto__. Har imidlertid __proto__blitt utfaset, og du bør unngå å bruke den.
