Javascript statica vs esempio, prototipo parola chiave

Question

Voglio sapere la differenza tra i due seguente codice frammenti

Quello che ho capito è questo è statica, perché senza creare un'istanza con la nuova parola chiave, funzioni getCookie e SetCookie possono essere chiamati.

var CookieHandler = function() {}; 

CookieHandler.getCookie = function (key) { 

}; 

CookieHandler.setCookie = function (key, value) { 
}; 

E questa è l'istanza. In questo caso è necessario creare un'istanza per chiamare le funzioni.

var CookieHandler = function() {}; 

CookieHandler.prototype.getCookie = function (key) { 

}; 

CookieHandler.prototype.setCookie = function (key, value) { 
}; 

ero un programmatore Java e appena comprensione concetti JS Please help me con questo.

Answer 1

In Javascript, qualsiasi funzione è anche un oggetto, quindi a qualsiasi funzione possono essere assegnate delle proprietà. Questo è ciò che sta facendo il tuo primo blocco di codice. Assegna solo le proprietà alla funzione CookieHandler. Se CookieHandler è inteso come una definizione di oggetto, anche se non esattamente identico, questi sono analoghi alle proprietà statiche di classe in altri linguaggi OO.

Se non è inteso come una definizione di oggetto, quindi CookieHandler è come uno spazio dei nomi Javascript e getCookie e setCookie sono come proprietà in quello spazio dei nomi.

Il secondo blocco di codice assegna proprietà al prototipo. Queste proprietà saranno ereditate da un oggetto CookieHandler istanziato.

---

Così, con il primo blocco di codice:

var CookieHandler = function() {}; 
CookieHandler.getCookie = function (key) { 
}; 
CookieHandler.setCookie = function (key, value) { 
}; 

Si può solo chiamare liberamente CookieHandler.getCookie() in qualsiasi momento. CookieHandler è come un oggetto dello spazio dei nomi e getCookie e setCookie sono proprietà nello spazio dei nomi.

Se si crea un oggetto CookieHandler come ad esempio:

var x = new CookieHandler(); 
x.getCookie(); // does not work 
x.setCookie(); // does not work 

Poi, x non avrebbe getCookie() o setCookie() metodi. Questi metodi esistono solo sull'oggetto CookieHandler. Non sono ereditati da istanze di CookieHandler.

---

Con il secondo blocco di codice:

var CookieHandler = function() {}; 
CookieHandler.prototype.getCookie = function (key) { 
}; 
CookieHandler.prototype.setCookie = function (key, value) { 
}; 

si definiscono le proprietà che le istanze di CookieHandler erediteranno (casi ereditano le proprietà sul prototipo). Così, quando si esegue:

var x = new CookieHandler(); 
x.getCookie(); // works 
x.setCookie(); // works 

---

Quindi, utilizzare il prototype quando si desidera definire le proprietà (di solito metodi) che le istanze dell'oggetto erediteranno. Se non si sta tentando di definire i metodi di istanza, è sufficiente inserire i metodi su qualsiasi oggetto come nel primo blocco di codice.

Answer 2

Ulteriori dettagli

@ jfriend00 ha già dato una molto utili informazioni su come tratta JavaScript Object. Permettetemi di aggiungere alcuni dettagli circa la differenza di this parole chiave in entrambi i casi:

caso statico

Se si definisce una funzione statica attraverso la proprietà di un oggetto, la parola chiave this nella funzione si riferisce a funzione ambito, non l'oggetto genitore.

vedi esempio:

var F = function(){ this.a = 500; }; 
F.G = function(){ return this.a; }; 

// call it 
F.G(); // returns undefined, because `this` refers to F.G() 
     // but the variable a in F.G() has not been defined yet 

caso Prototype

Se si definisce una funzione attraverso il prototipo dell'oggetto, la parola chiave this nella funzione si riferisce all'istanza di oggetto creato da quel prototipo , non lo scopo della funzione.

Vedere esempio:

var F = function(){ this.a = 500; }; 
F.prototype.G = function(){ return this.a }; 

// Make an object and call the function 
var f = new F(); 
f.G(); // returns 500 because `this` refers to instance f