Javascript static vs instance, prototype keyword

Question

I want to know the difference between the following two code snippets

What I understand is this is static because without creating an instance with new keyword, getCookie and setCookie functions can be called.

var CookieHandler = function () {};

CookieHandler.getCookie = function (key) {

};

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

And this is instance. In this case you need to create an instance to call the functions.

var CookieHandler = function () {};

CookieHandler.prototype.getCookie = function (key) {

};

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

I was a java programmer and barely understanding JS concepts please help me with this.

Answer 1

In Javascript, any function is also an object, so any function can have properties assigned to it. That's what your first block of code is doing. It is just assigning properties to the CookieHandler function. If CookieHandler is meant as an object definition, then though not exactly identical, these are analogous to class static properties in other OO languages.

If it is not meant as an object definition, then CookieHandler is like a Javascript namespace and getCookie and setCookie are like properties in that namespace.

Your second block of code is assigning properties to the prototype. These properties will be inherited by an instantiated CookieHandler object.

---

So, with your first block of code:

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

You can just freely call CookieHandler.getCookie() at any time. CookieHandler is like a namespace object and getCookie and setCookie are properties on the namespace.

If you create a CookieHandler object such as:

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

Then, x would not have getCookie() or setCookie() methods. Those methods only exist on the CookieHandler object. They are not inherited by instances of CookieHandler.

---

With your second block of code:

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

you are defining properties that instances of CookieHandler will inherit (instances inherit properties on the prototype). So, when you do:

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

---

So, use the prototype when you want to define properties (usually methods) that instances of the object will inherit. If you aren't trying to define instance methods, then just put the methods on any object as in your first block of code.

Answer 2

Further details

@jfriend00 has already given a very helpful details on how JavaScript treats object. Let me add some details about the difference of this keywords in both cases:

Static case

If you define a static function through an object's property, the this keyword in the function refers to function scope, not the parent object.

See example:

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 case

If you define a function through object's prototype, the this keyword in the function refers to the instance of object you create from that prototype, not the function scope.

See example:

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