Prototipi JavaScript per principianti

JavaScript è un linguaggio basato sul prototipobasato su prototipi. Decostruiamo la definizione di prototipi in JavaScript.

Quando si inizia ad imparare la programmazione orientata agli oggetti con JavaScript, si incontra rapidamente l’ereditarietà prototipale.

Un prototipo è un membro di un oggetto, e può essere referenziato da un’istanza. Prima di creare il nostro prototipo. Vediamo un rapido esempio di come abbiamo già a che fare con i prototipi.

Creiamo un array:

let x = 
x.map(a => a + 1) //

x contiene un array. x è un’istanza di Array. x ha un riferimento a tutte le proprietà del prototipo di Array. Quindi potremmo per esempio chiamare la funzione Array.prototype.map() su x

Inizio a vedere prototipi ovunque!

Impostare il nostro prototipo:

// Creates a constructor called Country
class Country {
constructor(country) {
this.country = country
}
}// Create a new instance of Country
let sweden = new Country('Sweden')// sweden is now an object called Country
sweden // Country { country: 'Sweden' }

Ora vogliamo che sweden saluti il mondo. È qui che entrano in gioco i prototipi e la catena dei prototipi

// Add method to the prototype of the constructor
Country.prototype.helloWorld = function() {
return `I am a country called ${this.country}`
}

Country ha il metodo helloWorld come proprietà prototipo. sweden è ancora lo stesso oggetto ma ora possiamo fare riferimento a helloWorld.

sweden.helloWorld() // 'I am a country called Sweden'

L’interprete cerca il helloWorld Se non viene trovato nessun riferimento inizierà a saltare la catena dei prototipi fino a quando la richiesta non sarà soddisfatta In questo caso helloWorld può essere collegato a sweden tramite la catena dei prototipi.

E se creiamo un nuovo paese:

let canada = new Country('Canada')

Lo stesso vale per il canada, la nuova istanza di Country può anche accedere ai prototipi. Ecco come funziona un prototipo e la catena dei prototipi. Funziona come un collegamento tra la funzione e i suoi oggetti.

Voglio condividere il prototipo del mio costruttore con un altro costruttore?

Diciamo che vogliamo aggiungere il prototipo dell’oggetto PlanetA a PlanetB

// Constructor PlanetA
class PlanetA {
constructor(instance) {
this.instance = instance
}
// prototype method
helloWorld() {
return `I am a instance called ${this.instance}`
}
}let x = new PlanetA('x')x.helloWorld() // I am a instance called x

Per dimostrare la flessibilità dell’eredità prototipale collegheremo i prototipi della nostra istanza di PlanetA a PlanetB. Possiamo usare Object.setPrototypeOf() per farlo.

// Constructor PlanetB
class PlanetB {
constructor(instance) {
this.instance = instance
}
}let y = new PlanetB('y')Object.setPrototypeOf(y, x)y.helloWorld() // I am a instance called y

Questa era un’introduzione di base al concetto di ereditarietà in JavaScript. La chiave è sapere che si ha la possibilità di istanziare dinamicamente gli oggetti senza alcuna proprietà interna, ma essere ancora in grado di accedere ai metodi sulla catena dei prototipi.

Ci sono più dettagli sui prototipi e modi di gestire l’ereditarietà in JavaScript, a seconda di come si sceglie di fattorizzare i propri oggetti. La parola chiave ‘class’ è uno zucchero sintattico sulle funzioni del costruttore. Non esiste una cosa come l’ereditarietà di classe in JavaScript, solo un modo prototipale di ereditarietà.

Spero che questo vi sia stato utile e che ora vi sentiate più a vostro agio a parlare di prototipi e di come funziona l’OOP in JavaScript.

Godetevi il vostro codice.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *