I denne vejledning lærer du om prototyper i JavaScript ved hjælp af eksempler.
Før du lærer prototyper, skal du kontrollere disse tutorials:
- JavaScript-objekter
- JavaScript-konstruktørfunktion
Som du ved, kan du oprette et objekt i JavaScript ved hjælp af en objektkonstruktørfunktion. For eksempel,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
I ovenstående eksempel function Person()er en objektkonstruktørfunktion. Vi har skabt to objekter person1og ud person2fra det.
JavaScript-prototype
I JavaScript har hver funktion og objekt som standard en egenskab, der hedder prototype. For eksempel,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
I ovenstående eksempel forsøger vi at få adgang til prototypeegenskaben for en Personkonstruktorfunktion.
Da prototypeegenskaben ikke har nogen værdi i øjeblikket, viser den et tomt objekt (…).
Prototype arv
I JavaScript kan en prototype bruges til at tilføje egenskaber og metoder til en konstruktorfunktion. Og genstande arver egenskaber 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);
Produktion
(køn: "mand") mandlig mand
I ovenstående program har vi tilføjet en ny egenskab gendertil Personkonstruktorfunktionen ved hjælp af:
Person.prototype.gender = 'male';
Derefter modsætter person1og person2arver egenskaben genderfra prototypeegenskaben for Personkonstruktorfunktionen.
Derfor både objekter person1og person2kan få adgang til køn ejendom.
Bemærk: Syntaksen for at tilføje egenskaben til en objektkonstruktørfunktion er:
objectConstructorName.prototype.key = 'value';
Prototype bruges til at give yderligere egenskaber til alle objekter oprettet fra en konstruktorfunktion.
Føj metoder til en konstruktørfunktion ved hjælp af prototype
Du kan også tilføje nye metoder til en konstruktorfunktion ved hjælp af 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 ovenstående program greettilføjes en ny metode til Personkonstruktorfunktionen ved hjælp af en prototype.
Ændring af prototype
Hvis en prototype-værdi ændres, har alle de nye objekter den ændrede egenskabsværdi. Alle de tidligere oprettede objekter har den tidligere værdi. 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
Bemærk : Du bør ikke ændre prototyperne på standard JavaScript-indbyggede objekter som strenge, arrays osv. Det betragtes som en dårlig praksis.
JavaScript-prototype-lænkning
Hvis et objekt forsøger at få adgang til den samme egenskab, der er i konstruktorfunktionen og prototypeobjektet, tager objektet ejendommen fra konstruktorfunktionen. 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 ovenstående program erklæres et egenskabsnavn i konstruktorfunktionen og også i prototypeegenskaben for konstruktorfunktionen.
Når programmet køres, skal du person1.namese i konstruktorfunktionen for at se, om der er en egenskab, der hedder name. Da konstruktorfunktionen har navnet egenskab med værdi 'John', tager objektet værdi fra denne egenskab.
Når programmet køres, skal du person1.agese i konstruktorfunktionen for at se, om der er en egenskab, der hedder age. Da konstruktorfunktionen ikke har ageegenskab, ser programmet på prototype-objektet til konstruktorfunktionen, og objektet arver ejendom fra prototype-objektet (hvis tilgængeligt).
Bemærk : Du kan også få adgang til prototypeegenskaben for en konstruktorfunktion 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 ovenstående eksempel personbruges et objekt til at få adgang til prototypegenskaben ved hjælp af __proto__. Det er dog __proto__udfaset, og du bør undgå at bruge det.
