Javascript statischer vs Beispiel Prototyp Schlüsselwort

Question

ich den Unterschied zwischen den beiden folgenden Code wissen will Schnipsel

Was ich verstehe, ist diese statisch ist, weil ohne eine Instanz mit neuen Keyword-Erstellung, getCookie und setCookie Funktionen aufgerufen werden können.

var CookieHandler = function() {}; 

CookieHandler.getCookie = function (key) { 

}; 

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

Und das ist Beispiel. In diesem Fall müssen Sie eine Instanz erstellen, um die Funktionen aufzurufen.

var CookieHandler = function() {}; 

CookieHandler.prototype.getCookie = function (key) { 

}; 

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

Ich war ein Java-Programmierer und verstehe kaum JS-Konzepte, bitte helfen Sie mir dabei.

Answer 1

In Javascript ist jede Funktion auch ein Objekt, so dass jeder Funktion Eigenschaften zugewiesen werden können. Das ist es, was dein erster Block Code macht. Es weist der Funktion CookieHandler nur Eigenschaften zu. Wenn CookieHandler als Objektdefinition gemeint ist, dann sind diese, obwohl nicht exakt identisch, analog zu statischen Eigenschaften in anderen OO-Sprachen. Wenn es nicht als Objektdefinition gemeint ist, dann ist CookieHandler wie ein Javascript-Namespace und getCookie und setCookie sind wie Eigenschaften in diesem Namespace.

Ihr zweiter Codeblock weist dem Prototyp Eigenschaften zu. Diese Eigenschaften werden von einem instanziierten CookieHandler-Objekt geerbt.

---

Also, mit dem ersten Codeblock:

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

Sie können einfach anrufen frei CookieHandler.getCookie() jederzeit. CookieHandler ist wie ein Namespace-Objekt und getCookie und setCookie sind Eigenschaften für den Namespace.

Wenn Sie ein CookieHandler Objekt wie zu erstellen:

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

Dann würde x nicht getCookie() oder setCookie() Methoden. Diese Methoden existieren nur für das Objekt CookieHandler. Sie werden nicht von Instanzen von CookieHandler geerbt.

---

Mit Ihrem zweiten Codeblock:

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

Sie Eigenschaften definieren, die Instanzen von CookieHandler erben werden (Instanzen erben Eigenschaften auf dem Prototyp). Also, wenn Sie das tun:

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

---

So verwenden Sie die prototype, wenn Sie möchten, Eigenschaften definieren (in der Regel Methoden), die Instanzen des Objekts erben. Wenn Sie nicht versuchen, Instanzmethoden zu definieren, fügen Sie die Methoden einfach in ein beliebiges Objekt ein, wie in Ihrem ersten Codeblock.

Answer 2

Weitere Details

@ jfriend00 haben bereits ein sehr hilfreichen Details zu gegeben, wie JavaScript behandelt Objekt. Lassen Sie mich einige Details über den Unterschied von this Schlüsselwörter in beiden Fällen hinzufügen:

Static Fall

Wenn Sie eine statische Funktion durch eine Eigenschaft des Objekts definieren, bezieht sich der this Schlüsselwort in der Funktion Funktion Bereich, nicht das übergeordnete Objekt.

Siehe Beispiel:

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 

Prototype Fall

Wenn Sie eine Funktion durch den Prototyp des Objekts definieren, das this Schlüsselwort in der Funktion bezieht sich auf die Instanz des Objekts, das Sie von diesem Prototyp erstellen , nicht der Funktionsumfang.

Siehe Beispiel:

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