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.

jfriend00 · Accepted Answer · 2015-06-10 07:45:03Z

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.

@RGraham - in Javascript, his first block of code is using the CookieHandler object like a namespace in that you can only execute getCookie() if you call it as CookieHandler.getCookie(). That's all I'm trying to say.

TaoPR · Accepted Answer · 2015-06-10 07:50:16Z

8

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

answered Jun 10, 2015 at 7:50

TaoPR

6,0783 gold badges28 silver badges38 bronze badges

1 Comment

linasmnew Over a year ago

In the Static case example, this refers to the function F not to F.G, this is defined at call site which in your example is F

Collectives™ on Stack Overflow

Javascript static vs instance, prototype keyword

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related