JavaScript Motif Prototype


Exemple

Le modèle de prototype se concentre sur la création d'un objet pouvant être utilisé comme modèle pour d'autres objets via l'héritage de prototypes. Ce modèle est intrinsèquement facile à utiliser en JavaScript en raison de la prise en charge native de l'héritage prototype dans JS, ce qui signifie que nous n'avons pas besoin de consacrer du temps ou des efforts à l'imitation de cette topologie.


Créer des méthodes sur le prototype

function Welcome(name) {
  this.name = name;
}
Welcome.prototype.sayHello = function() {
  return 'Hello, ' + this.name + '!';
}

var welcome = new Welcome('John');

welcome.sayHello();
// => Hello, John!

Héritage prototypique

L'héritage d'un «objet parent» est relativement facile via le schéma suivant

ChildObject.prototype = Object.create(ParentObject.prototype);
ChildObject.prototype.constructor = ChildObject;

ParentObject est l'objet à partir ParentObject vous souhaitez hériter des fonctions prototypées, et ChildObject est le nouvel objet sur ChildObject vous souhaitez les placer.

Si l'objet parent a des valeurs qu'il initialise dans son constructeur, vous devez appeler le constructeur parent lors de l'initialisation de l'enfant.

Vous faites cela en utilisant le modèle suivant dans le constructeur ChildObject .

function ChildObject(value) {
    ParentObject.call(this, value);
}

Un exemple complet où ce qui précède est mis en œuvre

function RoomService(name, order) {
  // this.name will be set and made available on the scope of this function
  Welcome.call(this, name);
  this.order = order;
}

// Inherit 'sayHello()' methods from 'Welcome' prototype
RoomService.prototype = Object.create(Welcome.prototype);

// By default prototype object has 'constructor' property. 
// But as we created new object without this property  -  we have to set it manually,
// otherwise 'constructor' property will point to 'Welcome' class
RoomService.prototype.constructor = RoomService;

RoomService.prototype.announceDelivery = function() {
  return 'Your ' + this.order + ' has arrived!';
}
RoomService.prototype.deliverOrder = function() {
  return this.sayHello() + ' ' + this.announceDelivery();
}

var delivery = new RoomService('John', 'pizza');

delivery.sayHello();
// => Hello, John!,

delivery.announceDelivery();
// Your pizza has arrived!

delivery.deliverOrder();
// => Hello, John! Your pizza has arrived!