In questo tutorial imparerai a conoscere i prototipi in JavaScript con l'aiuto di esempi.
Prima di apprendere i prototipi, assicurati di controllare questi tutorial:
- Oggetti JavaScript
- Funzione costruttore JavaScript
Come sai, puoi creare un oggetto in JavaScript utilizzando una funzione di costruzione di oggetti. Per esempio,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Nell'esempio precedente, function Person()è una funzione di costruzione di oggetti. Abbiamo creato due oggetti person1e person2da esso.
Prototipo JavaScript
In JavaScript, ogni funzione e oggetto ha una proprietà denominata prototype per impostazione predefinita. Per esempio,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Nell'esempio sopra, stiamo cercando di accedere alla proprietà prototype di una Personfunzione di costruzione.
Poiché la proprietà prototype non ha alcun valore al momento, mostra un oggetto vuoto (…).
Ereditarietà del prototipo
In JavaScript, un prototipo può essere utilizzato per aggiungere proprietà e metodi a una funzione di costruzione. E gli oggetti ereditano proprietà e metodi da un prototipo. Per esempio,
// 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);
Produzione
(sesso: "maschio") maschio maschio
Nel programma precedente, abbiamo aggiunto una nuova proprietà genderalla Personfunzione di costruzione utilizzando:
Person.prototype.gender = 'male';
Quindi oggetto person1ed person2eredita la proprietà genderdalla proprietà prototype della Personfunzione di costruzione.
Quindi, entrambi gli oggetti person1e person2possono accedere alla proprietà di genere.
Nota: la sintassi per aggiungere la proprietà a una funzione di costruzione di oggetti è:
objectConstructorName.prototype.key = 'value';
Il prototipo viene utilizzato per fornire proprietà aggiuntive a tutti gli oggetti creati da una funzione di costruzione.
Aggiungere metodi a una funzione del costruttore utilizzando Prototype
È inoltre possibile aggiungere nuovi metodi a una funzione di costruzione utilizzando prototype. Per esempio,
// 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
Nel programma precedente, un nuovo metodo greetviene aggiunto alla Personfunzione di costruzione utilizzando un prototipo.
Cambiare prototipo
Se il valore di un prototipo viene modificato, tutti i nuovi oggetti avranno il valore della proprietà modificato. Tutti gli oggetti creati in precedenza avranno il valore precedente. Per esempio,
// 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
Nota : non dovresti modificare i prototipi di oggetti JavaScript standard incorporati come stringhe, array, ecc. È considerata una cattiva pratica.
Concatenamento di prototipi JavaScript
Se un oggetto tenta di accedere alla stessa proprietà che si trova nella funzione di costruzione e nell'oggetto prototipo, l'oggetto prende la proprietà dalla funzione di costruzione. Per esempio,
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
Nel programma precedente, un nome di proprietà viene dichiarato nella funzione di costruzione e anche nella proprietà prototipo della funzione di costruzione.
Quando il programma viene eseguito, person1.namecerca nella funzione di costruzione per vedere se esiste una proprietà denominata name. Poiché la funzione di costruzione ha la proprietà name con valore 'John', l'oggetto prende valore da quella proprietà.
Quando il programma viene eseguito, person1.agecerca nella funzione di costruzione per vedere se esiste una proprietà denominata age. Poiché la funzione di costruzione non ha ageproprietà, il programma esamina l'oggetto prototipo della funzione di costruzione e l'oggetto eredita la proprietà dall'oggetto prototipo (se disponibile).
Nota : è inoltre possibile accedere alla proprietà prototype di una funzione di costruzione da un oggetto.
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 )
Nell'esempio precedente, un personoggetto viene utilizzato per accedere alla proprietà prototype utilizzando __proto__. Tuttavia, __proto__è stato deprecato e dovresti evitare di usarlo.
