JavaScript statyczne vs instancji, prototyp kluczowe

Question

Chcę znać różnicę pomiędzy dwa następujące fragmenty kodu

Co rozumiem, jest to statyczna, ponieważ bez tworzenia instancji z nowego hasła, funkcje GetCookie i SetCookie można nazwać.

var CookieHandler = function() {}; 

CookieHandler.getCookie = function (key) { 

}; 

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

I to jest przykład. W takim przypadku musisz utworzyć instancję, aby wywołać funkcje.

var CookieHandler = function() {}; 

CookieHandler.prototype.getCookie = function (key) { 

}; 

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

Byłem programistą java i ledwie zrozumiałem koncepcje JS, pomóż mi z tym.

Answer 1

W JavaScript każda funkcja jest również obiektem, więc każda funkcja może mieć przypisane do niej właściwości. To właśnie robi twój pierwszy blok kodu. Po prostu przypisuje właściwości do funkcji CookieHandler. Jeśli CookieHandler ma być definicją obiektu, to jednak nie jest tożsama, są one analogiczne do właściwości statycznych klasy w innych językach OO.

Jeśli nie jest to definicja obiektu, to CookieHandler jest jak przestrzeń nazw Javascript, a getCookie i setCookie są podobne do właściwości w tej przestrzeni nazw.

Twój drugi blok kodu przypisuje właściwości do prototypu. Te właściwości zostaną odziedziczone przez instancyjny obiekt CookieHandler.

---

Tak, z pierwszego bloku kodu:

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

można po prostu zadzwonić CookieHandler.getCookie() swobodnie w każdej chwili. CookieHandler jest jak obiekt przestrzeni nazw, a getCookie i setCookie są właściwościami w przestrzeni nazw.

Jeśli utworzyć obiekt CookieHandler takich jak:

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

Następnie x nie miałby getCookie() lub setCookie() metod. Te metody istnieją tylko na obiekcie CookieHandler. Nie są dziedziczone przez instancje CookieHandler.

---

Z drugiego bloku kodu:

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

jesteś właściwości, które instancje CookieHandler będzie dziedziczyć zdefiniowanie (przypadki dziedziczenia własności na prototypie). Więc, kiedy zrobić:

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

---

tak, użyj prototype kiedy chcesz określić właściwości (zwykle metody), że instancje obiektu będzie dziedziczyć. Jeśli nie próbujesz zdefiniować metod instancji, po prostu umieść metody na dowolnym obiekcie, tak jak w pierwszym bloku kodu.

Answer 2

Dalsze szczegóły

@ jfriend00 już dał bardzo pomocne szczegóły dotyczące obiektów traktuje JavaScript. Dodam kilka szczegółów na temat różnicy this słów kluczowych w obu przypadkach:

Static case

Jeśli zdefiniować statyczną funkcję poprzez własności obiektu, tym this kluczowe w funkcji odnosi się do funkcji zakres, a nie obiekt nadrzędny.

Patrz przykład:

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 przypadek

Jeśli zdefiniować funkcję poprzez prototypu obiektu, tym this kluczowe w funkcji odnosi się do instancji obiektu utworzonego z tego prototypu , a nie zakres funkcji.

Patrz przykład:

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