Deux façons de déclarer les méthodes en Javascript

Question

Possible en double:
Use of 'prototype' vs. 'this' in Javascript?

j'ai vu ces deux deux façons de déclarer les méthodes en Javascript:

var User = function() { 
    this.name = 'Foo'; 
    this.greet = function() { 
     console.log('Hello!'); 
    } 
} 

et

var User = function() { 
    this.name = 'Foo'; 
} 

User.prototype.greet = function() { 
    console.log('Hello!'); 
} 

Quelles sont les différences?

Answer 1

Si vous créez une 'classe', vous voulez utiliser la seconde. Je dis classe entre guillemets car javascript n'a pas la notion formelle de classe, puisqu'il utilise l'héritage prototypique.

Chaque objet que vous créez dans JS hérite de ses propriétés du prototype. Dans le second exemple, chaque utilisateur que vous créez recevra la méthode "greet" du prototype. Dans votre premier exemple, chaque utilisateur recevra la méthode greet du constructeur de l'utilisateur.

La seconde est supérieure car la première approche crée effectivement une nouvelle copie de la fonction «greet» pour chaque objet créé. Dans la seconde approche, chaque objet Utilisateur a un pointeur sur la fonction de greffe, il est donc réutilisé par l'interpréteur. Notez que ce n'est pas la même chose que de dire "salut" est statique.

Answer 2

Vous voudrez peut-être regarder this après pour l'application correcte de « ce » vs « prototype »

Answer 3

dans le premier exemple vous créez votre fonction de l'utilisateur, puis vous ajoutez la fonction greet à cette instance (donnant User.greet()). Mais puisque vous avez ceci dans la fonction constructeur, il sera ajouté à toutes les instances.

Dans le deuxième exemple, vous définissez votre constructeur d'utilisateur. Ensuite, vous définissez le prototype de greffe pour toutes les instances de l'utilisateur. Cela vient à la même chose que votre premier exemple ici, mais si elle est formée différemment, le changement devient plus évident

var User = function() { 
    this.name = 'Foo'; 
} 

var a=new User(); 
var b=new User(); 
a.greet=function(){ 
    alert(this.name); 
} 
/*a has the greet function, b does not*/ 

User.prototype.greet=function(){ 
    alert(this.name); 
} 
/*a and b both have the greet function now, since they are both of class User*/