JavaScript OOP (prototipo) #2

Ciao amici, sono Bennison, in questo blog spiegherò come funziona OOP in Javascript e spiegherò come differisce dall'OOP classico. Prima di leggere questo articolo, leggi il mio blog precedente che riguarda i fondamenti dell'OOP .

Cos'è un prototipo?

• In Javascript abbiamo qualcosa chiamato prototipo, in JavaScript, ogni oggetto sarà collegato a un certo prototipo. Quindi ogni oggetto ha dei prototipi. il prototipo contiene anche proprietà e metodi.
• Qui la cosa importante è che l'oggetto può accedere ai metodi e alle proprietà del prototipo.

• In Classical OOP un oggetto viene istanziato dalla classe, che si chiama istanziazione. Qui la classe è solo un progetto per la creazione di oggetti.
• Ma in Javascript, questa terminologia è semplicemente diversa. Qui ogni oggetto è collegato ad altri oggetti , e quegli oggetti sono chiamati prototipi .

• Per ereditarietà del prototipo si intende un prototipo che contiene metodi e prototipi accessibili a tutti gli oggetti collegati a quel prototipo.
• Quindi l'oggetto eredita metodi e proprietà dal prototipo, ecco come si chiama ereditarietà del prototipo. questa ereditarietà è diversa dall'ereditarietà di classe che è una classe ereditata dall'altra classe. Ma in questo caso, l'istanza eredita dalla classe base.
• Nell'immagine sopra, nel javascript OOP la freccia punta verso l'alto, questo significa che l'oggetto delega i suoi comportamenti ai prototipi.
• Nell'OOP classico, i metodi vengono copiati dalla classe alle istanze (oggetti).

const numbers = [1, 2, 3, 4,5];
numbers.map((num) => num * 2)

• Se navighiamo su Google per una comprensione del metodo della mappa javascript, nel documento MDN possiamo vederlo come Array.prototype.map()

• Qui " Array.prototype()" è il prototipo per tutti gli oggetti array che creiamo in JavaScript. Pertanto tutti gli array hanno accesso al metodo map.
• Ora, questo oggetto prototipo contiene tutti i metodi dell'array inclusa una mappa.

• Quindi, nell'esempio precedente, " Array.Prototype" è il prototipo dell'array numerico, quella variabile dell'array numerico è collegata ai prototipi. Pertanto ha accesso a tutti i metodi che sono definiti sull'oggetto “ array.prototype ”. Quindi nell'esempio sopra l'array "numero" eredita la mappa del metodo.
• In Javascript, possiamo implementare l'ereditarietà prototipale in tre modi, uno è la funzione di costruzione, il secondo è le classi ES6 e l'ultimo è il metodo Object.Create().

• Una funzione di costruzione viene utilizzata per creare oggetti da funzioni. questo è il modo in cui vengono implementati gli oggetti integrati come i metodi Array e map.

• Questa è un'alternativa moderna alle funzioni di costruzione. Le classi ES6 funzionano come la funzione costruttore. La classe ES6 non si comporta come una OOP classica. Dietro le quinte, le classi ES6 sono implementate con le funzioni Constructor.

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    console.log(this.firstName + ' ' + this.lastName);
  }
}

const user = new User('Bennison', 'J');

console.log(user); // { firstName: 'Bennison', lastName: 'J' }

console.log(user.hasOwnProperty('firstName')); // true
console.log(user.hasOwnProperty('getFullName')); // false

• E l'esempio sopra possiamo vedere il metodo 'hasOwnProperty', che ci aiuta a controllare la proprietà, e il metodo è la proprietà dell'oggetto che si chiama metodo hasOwnProperty.

• Il metodo "object.create()" è il modo più semplice per collegare un oggetto a un oggetto prototipo.

const objOne = {
  firstName: 'Bennison',
  lastName: 'J',
  getFullName: function () {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const objTwo = Object.create(objOne);

console.log(objTwo); // {}
objTwo.getFullName(); //  Bennison J

• Il metodo "Object.create" restituisce un oggetto vuoto con il prototipo. e il prototipo sarà quello che abbiamo passato a quel metodo.

• Spero che, in questo blog, abbiamo appreso le basi dell'ereditarietà prototipale in Javascript, se non riuscissi a capire gli esempi precedenti, non preoccuparti, spiegherò di più su questi concetti nei miei prossimi blog. Grazie per aver letto questo blog, a presto.