Prototype JavaScript expliqué avec des exemples

Prototypes

JavaScript est un langage basé sur un prototype, c'est pourquoi la compréhension de l'objet prototype est l'un des concepts les plus importants que les praticiens de JavaScript doivent connaître. Cet article vous donnera un bref aperçu de l'objet Prototype à travers divers exemples. Avant de lire cet article, vous devrez avoir une compréhension de base de la thisréférence en JavaScript.

Objet prototype

Par souci de clarté, examinons l'exemple suivant:

function Point2D(x, y) { this.x = x; this.y = y; }

Lorsque la Point2Dfonction est déclarée, une propriété par défaut nommée prototypesera créée pour elle (notez qu'en JavaScript, une fonction est également un objet). La prototypepropriété est un objet qui contient une constructorpropriété dont la valeur est Point2Dfonction: Point2D.prototype.constructor = Point2D. Et lorsque vous appelez Point2Davec un newmot-clé, les objets nouvellement créés hériteront de toutes les propriétés dePoint2D.prototype . Pour vérifier cela, vous pouvez ajouter une méthode nommée movedans la Point2D.prototypemanière suivante:

Point2D.prototype.move = function(dx, dy) { this.x += dx; this.y += dy; } var p1 = new Point2D(1, 2); p1.move(3, 4); console.log(p1.x); // 4 console.log(p1.y); // 6

Le Point2D.prototypes'appelle objet prototype ou prototype d' p1objet et pour tout autre objet créé avec la new Point2D(...)syntaxe. Vous pouvez ajouter plus de propriétés à l' Point2D.prototypeobjet à votre guise. Le modèle commun est de déclarer les méthodes à Point2D.prototypeet d'autres propriétés seront déclarées dans la fonction constructeur.

Les objets intégrés dans JavaScript sont construits de la même manière. Par exemple:

  • Le prototype d'objets créés avec la syntaxe new Object()ou {}est Object.prototype.
  • Le prototype de tableaux créés avec la syntaxe new Array()ou []est Array.prototype.
  • Et ainsi de suite avec d'autres objets intégrés tels que Dateet RegExp.

Object.prototypeest hérité par tous les objets et il n'a pas de prototype (son prototype l'est null).

Chaîne de prototype

Le mécanisme de la chaîne prototype est simple: lorsque vous accédez à une propriété psur un objet obj, le moteur JavaScript recherchera cette propriété à l'intérieur de l' objobjet. Si le moteur ne parvient pas à rechercher, il continue la recherche dans le prototype d' objobjet et ainsi de suite jusqu'à atteindre Object.prototype. Si une fois la recherche terminée et que rien n'a été trouvé, le résultat sera undefined. Par exemple:

var obj1 = { a: 1, b: 2 }; var obj2 = Object.create(obj1); obj2.a = 2; console.log(obj2.a); // 2 console.log(obj2.b); // 2 console.log(obj2.c); // undefined

Dans l'extrait de code ci-dessus, l'instruction var obj2 = Object.create(obj1)créera un obj2objet avec un obj1objet prototype . En d'autres termes, obj1devient le prototype de obj2au lieu de Object.prototypepar défaut. Comme vous pouvez le voir, ce bn'est pas une propriété de obj2, vous pouvez toujours y accéder via la chaîne de prototypes. Pour la cpropriété, cependant, vous obtenez de la undefinedvaleur car elle ne peut pas être trouvée dans obj1et Object.prototype.

Des classes

Dans ES2016, nous pouvons maintenant utiliser le Classmot - clé ainsi que les méthodes mentionnées ci-dessus pour manipuler prototype. Le JavaScript Classplaît aux développeurs issus de milieux OOP, mais il fait essentiellement la même chose que ci-dessus.

class Rectangle { constructor(height, width) { this.height = height this.width = width } get area() { return this.calcArea() } calcArea() { return this.height * this.width } } const square = new Rectangle(10, 10) console.log(square.area) // 100

C'est fondamentalement le même que:

function Rectangle(height, width) { this.height = height this.width = width } Rectangle.prototype.calcArea = function calcArea() { return this.height * this.width }

Les méthodes getteret des setterclasses lient une propriété Object à une fonction qui sera appelée lorsque cette propriété est recherchée. C'est juste du sucre syntaxique pour faciliter la recherche ou la définition des propriétés.

Plus d'informations sur les prototypes JS:

  • Tout ce que vous devez savoir pour comprendre le prototype de JavaScript