JavaScript Prototypes Pour Débutants

.

JavaScript est un langage basé sur des prototypes.basé sur des prototypes. Déconstruisons la définition des prototypes en JavaScript.

Lorsque vous commencez à apprendre la programmation orientée objet avec JavaScript, vous rencontrerez rapidement l’héritage prototypique.

Un prototype est un membre d’un objet, et peut être référencé depuis une instance. Avant de créer notre propre prototype. Voyons simplement un exemple rapide de la façon dont nous traitons déjà les prototypes.

Créons un tableau:

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

x détient un tableau. x est une instance de Array. x a une référence à toutes les propriétés du prototype de Array. On pourrait donc par exemple appeler la fonction Array.prototype.map() sur x

Je commence à voir des prototypes partout !

Définissons notre propre prototype:

// 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' }

Maintenant, nous voulons que le suédois dise bonjour au monde. C’est là que les prototypes et la chaîne de prototypes entrent en jeu

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

Pays a la méthode helloWorld comme propriété de prototype. sweden est toujours le même objet mais nous pouvons maintenant faire référence à helloWorld.

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

L’interprète recherche le helloWorld Si aucune référence n’est trouvée, il commencera à sauter en haut de la chaîne des prototypes jusqu’à ce que la demande soit satisfaite Dans ce cas, helloWorld peut être relié à sweden via la chaîne des prototypes.

Et si nous créons un nouveau pays :

let canada = new Country('Canada')

Même chose pour canada, la nouvelle instance de Country peut également accéder aux prototypes. C’est ainsi que fonctionne un prototype et la chaîne de prototypes. Il fonctionne comme un lien entre la fonction et ses objets.

Je veux partager le prototype de mon constructeur avec un autre constructeur ?

Disons que nous voulons ajouter l’objet prototype PlanetA à 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

Pour démontrer la flexibilité de l’héritage prototypique, nous allons lier les prototypes de notre instance de PlanetA à PlanetB. Nous pouvons utiliser Object.setPrototypeOf() pour ce faire.

// 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

Ceci était une introduction de base au concept d’héritage en JavaScript. L’essentiel est de savoir que vous avez la possibilité d’instancier dynamiquement des objets sans aucune propriété interne tout en étant capable d’accéder aux méthodes de la chaîne de prototypes.

Il existe plus de détails sur les prototypes et les façons de gérer l’héritage en JavaScript, selon la façon dont vous choisissez de factoriser vos objets. Le mot-clé ‘class’ est un sucre syntaxique sur les fonctions de constructeur. Il n’y a pas une telle chose comme l’héritage de classe en JavaScript seulement une façon prototypale de l’héritage.

J’espère que vous avez trouvé cela utile et que vous pouvez maintenant vous sentir plus à l’aise pour parler des prototypes et de la façon dont la POO fonctionne en JavaScript.

Envie de votre code.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *