I den här handledningen lär du dig om prototyper i JavaScript med hjälp av exempel.
Innan du lär dig prototyper, se till att kontrollera dessa handledning:
- JavaScript-objekt
- JavaScript-konstruktörsfunktion
Som du vet kan du skapa ett objekt i JavaScript med hjälp av en objektkonstruktörfunktion. Till exempel,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
I exemplet ovan function Person()är en objektkonstruktörfunktion. Vi har skapat två objekt person1och person2från det.
JavaScript-prototyp
I JavaScript har varje funktion och objekt en egenskap som heter prototyp som standard. Till exempel,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
I exemplet ovan försöker vi komma åt prototypegenskapen för en Personkonstruktorfunktion.
Eftersom prototypegenskapen inte har något värde just nu, visar den ett tomt objekt (…).
Prototyp Arv
I JavaScript kan en prototyp användas för att lägga till egenskaper och metoder för en konstruktörsfunktion. Och objekt ärver egenskaper och metoder från en prototyp. Till exempel,
// 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);
Produktion
(kön: "man") manlig man
I programmet ovan har vi lagt till en ny egenskap gendertill Personkonstruktorfunktionen med:
Person.prototype.gender = 'male';
Gör sedan objektet mot person1och person2ärver egenskapen genderfrån prototypegenskapen för Personkonstruktorfunktionen.
Därför både objekt person1och person2kan komma åt könsegenskapen.
Obs! Syntaxen för att lägga till egenskapen till en objektkonstruktörfunktion är:
objectConstructorName.prototype.key = 'value';
Prototyp används för att tillhandahålla ytterligare egendom till alla objekt som skapats från en konstruktorfunktion.
Lägg till metoder i en konstruktörsfunktion med prototyp
Du kan också lägga till nya metoder för en konstruktörsfunktion med prototyp. Till exempel,
// 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 ovanstående program greetläggs en ny metod till Personkonstruktorfunktionen med hjälp av en prototyp.
Ändra prototyp
Om ett prototypvärde ändras kommer alla nya objekt att ha det ändrade egenskapsvärdet. Alla tidigare skapade objekt kommer att ha det tidigare värdet. Till exempel,
// 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
Obs! Du bör inte modifiera prototyperna för vanliga JavaScript-inbyggda objekt som strängar, matriser etc. Det anses vara en dålig praxis.
JavaScript-prototypkedjning
Om ett objekt försöker komma åt samma egenskap som finns i konstruktorfunktionen och prototypobjektet, tar objektet egenskapen från konstruktorfunktionen. Till exempel,
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 ovanstående program deklareras ett fastighetsnamn i konstruktorfunktionen och även i prototypegenskapen för konstruktorfunktionen.
När programmet körs person1.nametittar du i konstruktionsfunktionen för att se om det finns en egenskap som heter name. Eftersom konstruktorfunktionen har namngenskapen med värde 'John'tar objektet värde från den egenskapen.
När programmet körs person1.agetittar du i konstruktionsfunktionen för att se om det finns en egenskap som heter age. Eftersom konstruktorfunktionen inte har någon ageegendom tittar programmet på konstruktorfunktionens prototypobjekt och objektet ärver egendom från prototypobjektet (om tillgängligt).
Obs! Du kan också komma åt prototypegenskapen för en konstruktorfunktion från ett 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 exemplet ovan används ett personobjekt för att komma åt prototypegenskapen med __proto__. Det __proto__har dock upphört att gälla och du bör undvika att använda det.
