web-dev-qa-db-fra.com

Quel est le but du prototype?

Duplicate possible:
Comprendre l'héritage prototypal en JavaScript

OK, je suis donc un peu nouveau à l’idée de OOP dans JS.

Quelle est la différence entre ces deux extraits de code écrits ci-dessous:

function animal(){
    this.name = 'rover';
    this.set_name = function(name){
         this.name = name;
    }
}

function animal(){
    this.name = 'rover';
}
animal.prototype.set_name = function(name){
    this.name = name;
}

Ils font tous les deux la même chose, alors quelle est la différence?

javascriptprototype-programming
220
Quinton Pike

L'utilisation du prototype accélère la création d'objets, car il n'est pas nécessaire de recréer cette fonction à chaque fois qu'un nouvel objet est créé.

Quand tu fais ça:

function animal(){
    this.name = 'rover';
    this.set_name = function(name){
         this.name = name;
    }
}

La fonction set_name Est créée de novo chaque fois que vous créez un animal. Mais quand tu fais ça

animal.prototype.set_name = function(name){
    this.name = name;
}

Il n'est pas nécessaire de recréer la fonction à chaque fois. il existe à un endroit du prototype. Ainsi, lorsque vous appelez someAnimal.set_name("Ubu");, le contexte this sera défini sur someAnimal et la fonction unique set_name Sera appelée.

Il existe cependant un avantage à utiliser la première syntaxe: les fonctions créées de cette manière auront accès aux données privées:

function animal(){
    var privateData = 'foo'

    this.name = 'rover';
    this.set_name = function(name){
         this.name = name;
         alert(privateData); //will alert 'foo'
    }
}

Douglas Crockford appelle les fonctions créées comme celle-ci "privilégiées" pour cette raison: elles ont accès aux données publiques et privées.

312
Adam Rackis

La différence apparaît lorsque vous créez un nouvel objet à partir de ces fonctions

var animal1 = new animal();

Tous les objets créés par la première fonction auront différents name et set_name Propriétés. Cependant, tous les objets créés par la deuxième fonction partageront le set_name propriété.

33
user366161

Dans le premier exemple, chaque animal possède sa propre propriété pour la fonction nom_set, tandis que dans le deuxième exemple, ils partagent la même fonction via leur prototype.

L'avantage de la première version est que les méthodes peuvent accéder aux variables locales (privées) déclarées à l'intérieur du constructeur.

L’avantage de la seconde méthode est qu’elle nécessite moins de mémoire (puisque vous ne stockez la méthode qu’une seule fois au lieu d’un million de fois) et qu’elle est plus performante dans les moteurs JS actuels.

À l'aide de la deuxième méthode, vous pouvez également modifier ou ajouter des méthodes à une classe d'une manière qui affecte également les instances déjà créées.

22
hugomg