0
var base = function() { };
base.prototype.doStuff = function() { 
    console.log(1); 
};

var foo = Object.create(new base());
console.log(typeof foo); //object
foo.doStuff(); //1

http://jsfiddle.net/xmYQn/

I know there are some similar questions out there, but I couldn't find an answer to this one.

This works, but what if I want foo to be of type function so that I can add properties to its prototype? In other words, let it inherit the methods from the base prototype and merge them with its own prototype?

Johan
  • 35,120
  • 54
  • 178
  • 293

2 Answers2

2
Object.create(new base());

That creates a new plain object which inherits from a base instance (which inherits from base.prototype etc). You hardly ever need such a thing.

I want foo to be of type function

Then define it as a function:

function foo() {}

…so that I can add properties to its prototype?

Now you can do that.

let it inherit the methods from the base prototype and merge them with its own prototype?

There is not much "merging". But you can create a new object which inherits from base.prototype, set that to be foo's prototype and then add your properties there:

foo.prototype = Object.create(base.prototype); // of course, anything that was
                                               // previously set on foo.prototype
                                               // is now lost
foo.prototype.constructor = foo;
foo.prototype.doOtherStuff = function(){…};
…

Then do

var fooInstance = new foo;
fooInstance.doStuff(); // 1
fooInstance.doOtherStuff();
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Thanks. Could you please explain why this `foo.prototype.constructor = foo;` is necessary? – Johan May 16 '13 at 11:25
  • @Johan: It's not necessary, [since you hardly need to use the `.constructor` property](http://stackoverflow.com/q/12622137/1048572). If you didn't do it, `fooInstance.constructor` would be `base` (since it inherits it from `base.prototype`). That might be confusing to people, so often it's seen as a good practise to "correct" it. In this answer, it was more to demonstrate the setting of arbitrary properties :-) – Bergi May 16 '13 at 11:27
  • @Bergi if we add `base.prototype.anotherFuncInBase = function() { console.log('in base'); };` in base . we call it using fooInstance `fooInstance .anotherFuncInBase()` . How does this happens ? is Object.create points to reference of `base.prototype` ? – rab May 16 '13 at 11:30
  • Allright. I suppose it's used to reference the actual constructor function of `foo` (or `base` if you don't change it)? – Johan May 16 '13 at 11:32
  • Of course it points to a reference, since all objects in JS are only references to their properties. And since `fooInstance` inherits from `base.prototype` via `foo.prototype`, it is able to access the property. – Bergi May 16 '13 at 11:32
  • Might as well ask to be sure :-) – Johan May 16 '13 at 11:34
1

Since I read this very nice series of posts ( http://davidwalsh.name/javascript-objects-deconstruction ), I would go for something like :

var Base = { 
    doStuff : function() { 
        console.log(1); 
    }
};

var foo = Object.create(Base);
foo.doStuff = function() { 
      console.log(2); 
    };

var foo2 = Object.create(foo);

console.log(typeof foo); //object
foo.doStuff(); //2
foo2.doStuff(); //2
jbl
  • 15,179
  • 3
  • 34
  • 101
  • Since you're using objects you might as well do something like `$.extend(foo, Base);` ? – Johan May 16 '13 at 11:29
  • But `extend` does clone it at one point in time, while `Object.create` builds a lookup-reference to another object. You can modify `Base`, and all objects inheriting from it (*including already instantiated ones*) will have access to the new/changed properties. – Bergi May 16 '13 at 11:35
  • @Johan here is a difference between the two methods http://jsfiddle.net/xmYQn/1/ ( just as explained by Bergi ) – jbl May 16 '13 at 11:42