Due modi per dichiarare metodi in Javascript

Question

Eventuali duplicati:
Use of 'prototype' vs. 'this' in Javascript?

ho visto entrambi questi due modi per dichiarare metodi in Javascript:

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

e

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

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

Quali sono le differenze?

Answer 1

Se si sta creando una "classe", si desidera utilizzare la seconda. Dico classe tra virgolette perché javascript non ha la nozione formale di una classe, poiché usa l'ereditarietà prototipale.

Ogni oggetto creato in JS eredita le sue proprietà dal prototipo. Nel secondo esempio, ogni utente che crei riceverà il metodo "saluta" dal prototipo. Nel tuo primo esempio, ogni utente riceverà il metodo di benvenuto dal costruttore User.

Il secondo è superiore perché il primo approccio crea effettivamente una nuova copia della funzione 'saluta' per ogni oggetto creato. Nel secondo approccio, ogni oggetto Utente ha un puntatore alla funzione di benvenuto, quindi è in effetti riutilizzato dall'interprete. Nota questo NON è lo stesso che dire "saluta" è statico.

Answer 2

Si potrebbe desiderare di guardare this posto per la corretta applicazione di "questo" vs "prototipo"

Answer 3

nel primo esempio si crea la funzione d'uso, quindi si aggiunge la funzione salutare a quella istanza (dando User.greet()). Ma dal momento che hai questo nella funzione di costruzione allora verrà aggiunto a tutte le istanze.

Nel secondo esempio, si definisce il costruttore utente. Quindi si definisce il prototipo di benvenuto per tutte le istanze di Utente.. Questo esce per la stessa cosa come il vostro primo esempio qui, ma se formate in modo diverso, il cambiamento diventa più evidente

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