How can I extend a JS object?

Question

Let's say I have something like this in a file called main.js :

 function obj_name() {} obj_name.prototype = { foo : function() { alert('hi!'); }, foo2 : function() { alert('hi again!'); } } 

Now I am trying to expand the object in another extend.js file:

 obj_name.prototype = { newfoo : function() { alert('hi #3'); } } 

... but the problem is that it will work if I code it as follows:

 obj_name.prototype.newfoo = function() { alert('hi #3'); } 

I think it might be a question about noob. I don’t even know if this is a suitable way to expand the object, but I worry here, wondering why this is happening.

Thanks guys in advance.

Answer 1

First, you replace the prototype with a new one (rewriting what was there before). Secondly, you add a new element to the prototype (thereby expanding it).

There is another method: a library that has an extend method or similar (which basically wraps what you do in your second form, in a beautiful wrapper). For example, in jQuery :

 $.extend(obj_name.prototype, { newfoo : function() { alert('hi #3'); } } 

Answer 2

Another option without jQuery:

 var extend = function(destination, source) { for (var property in source) { if (destination[property] && (typeof(destination[property]) == 'object') && (destination[property].toString() == '[object Object]') && source[property]) extend(destination[property], source[property]); else destination[property] = source[property]; } return destination; } var a = {a: 'test'}; // original var b = {newFoo: function() { alert('hi #3'); }}; // the addition extend(a, b); // extend it a.newFoo(); // call the added property 

Answer 3

This is because in the line

 obj_name.prototype = { newfoo : function() { alert('hi #3'); } } 

you create a new prototype object by deleting personal content. It's as if you said

 var a = {}; 

when you expand an object like

 obj_name.prototype.newfoo = function() { alert('hi #3'); } 

it simply adds a new property (newfoo) to the object tree, keeping the existing content intact. That's why it works

NTN

Ivo Stoykov

Answer 4

If you are looking for a simple lightweight library that gives you exactly that: OOP is “done right” in javascript, look at this: https://github.com/haroldiedema/joii

The source code examples provided in readme on the github page, as well as these links:

• http://harold.info/projects/joii
• http://haroldiedema.imtqy.com/joii

This library basically allows you to define “classes” as such:

 var Person = Class(function() { this.firstname = "John" this.surname = "Smith" this.role= "Developer" this.getInfo = function() { return this.firstname + ' ' + this.surname + ' is ' + this.role; }; }); var AnotherPerson = Class({ extends: Person }, function() { this.firstname = "Bob"; }); var p = new AnotherPerson(); console.log(p.getInfo()); // Bob Smith is Developer 

Edit

To take your code as an example, but converted to a JOII-compatible code, it would look something like this:

 var obj_name = Class(function() { this.foo = function() { alert('hi!'); }; this.foo2 = function() { alert('hi again!'); }; }; var obj_name2 = Class({ extends: obj_name }, function() { this.newfoo = function() { alert('hi #3'); }; }); var o = new obj_name2(); o.foo(); // hi! o.newfoo(); // hi #3 

Or use it as a mix:

 var o = new obj_name(); o.mixin(obj_name2); o.newfoo(); // hi #3 

Or vice versa, using a "sign".

 // the "uses" option basically copies content from the given object to the scope of your "class", solving the horizontal code-reuse problem. var obj_name = Class({ uses: [obj_name2], function() { this.foo = function() { alert('hi!'); }; this.foo2 = function() { alert('hi again!'); }; }); var o = new obj_name(); o.newfoo(); // hi #3