Javascript constructor inheritance helper

Question

I'm trying to create helper method for constructor inheritance in JavaScript.

I have the following simple code:

function extend(parent, fn) {
    return function () {
        parent.call(this);
        fn.call(this);
        fn.prototype.constructor = parent;
    }
}

function foo() {
    var a = 1;
    this.getA = function () { return a; };
}

var bar = extend(foo, function () {
    var b = 2;
    this.getB = function () { return b; };
  });

var obj = new bar();
console.log(obj.getA()); //1
console.log(obj.getB()); //2

console.log(obj instanceof bar); //true
console.log(obj instanceof foo); //false

1) How to make the last line (obj instanceof foo) to be true?

2) What do you think about such solution, is it too much bad? Does exists other options to achieve something similar?

http://jsfiddle.net/jC6uz/

EDIT: I ended up with the following "extend" implementation:

function extend(parent, fn) {
    var Class = function () {
        parent.call(this);
        fn.call(this);
    }
    Class.prototype = parent.prototype;
    Class.prototype.constructor = Class;
    return Class;
}

But now, how to return "bar" when called obj.constructor.name?
http://jsfiddle.net/jC6uz/1/

EDIT 2: Another version that supports constructor parameters (not straight forward, but still possible) http://jsfiddle.net/jC6uz/3/

Answer 1

Per the MDN article in my comment, this is how you would do it using their technique, but fit into your style:

function extend(parent, fn) {
    var newConstructor = function() {
        fn.call(this);
    }
    newConstructor.prototype = new parent();
    return newConstructor;
}

function foo() {
    var a = 1;
    this.getA = function () { return a; };
}

var bar = extend(foo, function () {
    var b = 2;
    this.getB = function () { return b; };
});

var obj = new bar();
console.log(obj.getA()); //1
console.log(obj.getB()); //2

console.log(obj instanceof bar); //true
console.log(obj instanceof foo); //true

Working demo: http://jsfiddle.net/jfriend00/efReT/

---

One thing your particular implementation does not allow for is for the constructor to have arguments.

FYI, I personally dislike using the word Class in javascript. Once you really "get" how javascript works, it doesn't really have a class concept. It has objects and prototypes and I think it's ultimately cleaner to not confuse or equate either of those with the different concept of a class. When I first came to JS from C++, I tried to find parallels in JS so I could write like I used to write C++, but that isn't really what you want to do. You're better off learning how JS does things and coding within the strengths of that than trying to create analogs to some other language that aren't really how it works. That's why I choose a word like newConstructor instead of Class in my implementation, because it's more descriptive for what JS is really doing and how it really works.

Answer 2

If a function is a constructor it's best to start it with a upper case. The function named foo does not identify itself as a constructor so it's best to name it Foo.

When you set the prototype of Child you don't know the instance so it's not possible to call Parent.apply(this,arguements);. If you know that Child is a Parent then you can add the Parent.appy in the body of Child (see link at the end).

It looks like you want to dynamically extend one constuctor with another, the most complete way (instanceof and constructor are both working as expected and Parent instance members are the Child's instance members) would be to have extend create the instance for you or add an init function that initialises "Parent" instance members.

If you're looking for something like implements or multiple inheritance that is used for situations where an object can do something instead of is something check out the link in the end for a mix in pattern.

var extend = function(source,target,arg){
  //source=Parent, target=Child
  //set prototype without createing a source
  //instance and without using Object.create
  var fn=function(){},ret;
  fn.prototype = source.prototype;
  target.prototype = new fn();
  //repair constructor
  target.prototype.constructor = target;
  //create instance
  ret = new target(arg);
  //add function to set source intance members
  ret.extend_init=function(arg){
    source.apply(this,arguments);
  };
  //set source intance members
  ret.extend_init(arg);
  //remove init
  delete ret.extend_init;
  return ret;
};
var Parent = function(arg){
  this.name=(arg && arg.name)? arg.name:undefined;
  this.age=(arg && arg.age)?arg.age:undefined;
};
Parent.prototype.whoAreYou = function(){
  return "I am "+this.name+" and I'm "+this.age+
    " years old.";
};
var Child = function(){
};

var t = extend(Parent,Child,{
  name: "t",
  age: 22});

console.log(t instanceof Child);//<=true
console.log(t instanceof Parent);//<=true
console.log(t.whoAreYou());//<=I am t and I'm 22 years old.

This causes some overhead so if you're creating a lot of these instances in a loop is best to set prototype before the loop, create and init instances in the loop and clean up after:

var extend = function(source,target){
  var fn=function(){},orgProto=target.prototype,
  thing;
  fn.prototype = source.prototype;
  //overwriting Child.prototype, usually you define inheritance
  //  first and add Child.prototype members after but when setting
  //  inheritance dynamic (not having Parent.apply(this,arguments in
  //  Childs body) the Child's prototype get overwritten
  target.prototype = new fn();
  //adding the Child.prototype members
  for(thing in orgProto){
    if(orgProto.hasOwnProperty(thing)){
      target.prototype[thing]=orgProto[thing];
    }
  }
  target.prototype.constructor = target;
  target.prototype.extend_init=function(){
    source.apply(this,arguments);
    return this;
  };
  return target;
};
var Parent = function(arg){
  this.name=(arg && arg.name)? arg.name:undefined;
  this.age=(arg && arg.age)?arg.age:undefined;
};
Parent.prototype.whoAreYou = function(){
  return "I am "+this.name+" and I'm "+this.age+
    " years old.";
};
var Child = function(){
};
Child.prototype.something=22;
//namesAndAges could be JSON data containing
// hundreds or even thousands of items
namesAndAges = [
  {name:"1",age:1},
  {name:"2",age:2},
  {name:"3",age:3},
  {name:"4",age:4},
  {name:"5",age:5}
  //, and many many more
];
var constr=extend(Parent,Child);
var persons=[];
for(var i = 0,len=namesAndAges.length;i<len;i++){
  //Child may have constructor parameters so we pass the parameter
  // object to both Child and Parent
  persons.push(new constr(namesAndAges[i])
    .extend_init(namesAndAges[i]));
};
delete constr.prototype.extend_init;
console.log(persons);

More on prototype, inheritance, overriding, calling super, mix ins and value of this here: https://stackoverflow.com/a/16063711/1641941