Javascript static vs instance, prototype keyword

Question

I want to know the difference between the following two pieces of code

I understand that this is static, because without creating an instance with a new keyword, you can call the getCookie and setCookie functions.

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

And this is an example. 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 understood the concepts of JS, please help me with this.

Answer 1

In Javascript, any function is also an object, so any function can have properties assigned to it. This is what your first block of code does. It simply sets the properties of the CookieHandler function. If CookieHandler is understood as a definition of an object, then although not quite identical, they are similar to the static properties of a class in other OO languages.

If this does not mean defining an object, then the CookieHandler is similar to the Javascript namespace, and getCookie and setCookie are similar to the properties in this namespace.

The second block of code assigns properties to the prototype. These properties will be inherited by the cookieHandler instance.

---

So, with your first block of code:

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

You can simply call CookieHandler.getCookie() freely at any time. CookieHandler is a namespace object, and getCookie and setCookie are properties in the namespace.

If you create a CookieHandler, for example:

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

Then x does not have getCookie() or setCookie() methods. These methods exist only in the CookieHandler object. They are not inherited by CookieHandler instances.

---

With your second block of code:

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

you define properties that inherit CookieHandler instances (instances inherit prototype properties). So when you do this:

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

---

So, use prototype when you want to define properties (usually methods) that inherit object instances. If you are not trying to define instance methods, simply install the methods on any object, as in the first block of code.

Answer 2

Additional Information

@ jfriend00 has already provided very useful information on how JavaScript handles an object. Let me add some details about the difference between this keywords in both cases:

Static housing

If you define a static function through an object property, the this in the function refers to the scope of functions, and not to the parent object.

See an example:

 var F = function(){ this.a = 500; }; FG = function(){ return this.a; }; // call it FG(); // returns undefined, because `this` refers to FG() // but the variable a in FG() has not been defined yet 

Prototype example

If you define a function through a prototype of an object, the this in the function refers to the instance of the object that you create from this prototype, and not to the scope of functions.

See an 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(); fG(); // returns 500 because `this` refers to instance f