Inheritance in javascript not working

Question

Why doesn't jordan have the properties of the Human class? Shouldn't saying Coder.prototype = new Human; be enough for all Coder classes to inherit all properties of the Human class?

Does it have something to do with defining functions as assignments?

var Human = function() {
     var hi = function() {
         alert('hi');
      };
     return {
        name : 'dan',
       sayHi : hi
     };
};

var dan = new Human();

var Coder = function() {
   var code = function() {
      alert('1010101');
   };    
  return {
    code : code
  };
};

Coder.prototype = new Human;
Coder.prototype.constructor = new Coder;
var jordan = new Coder();
console.log(jordan);

Just need to say that inheritance in JavaScript `works well`. Your code isn't working. — pkuderov, Oct 04 '13 at 19:25
@KevinBowersox, not a real example just trying to understand how it actually inherits. I'd like to be able to private scope vars, but I can do that by not attaching them to this i guess. — user2727253, Oct 04 '13 at 20:45
For more info on prototype, inheritance, overriding and calling super you can have a look at this http://stackoverflow.com/a/16063711/1641941 You don't have create a new instance of the parent to inherit and in the child's body it's better to call something like `Parent.call(this,arguments);` to make the parent's instance variables part of the to be constructed child. — HMR, Oct 05 '13 at 02:28

bfavaretto · Answer 1 · 2013-10-04T19:31:46.990

2

Your constructors do not return the objects they're creating, so inheritance won't work. Use this instead:

var Human = function() {
     this.sayHi = function() {
         alert('hi');
     };
     this.name = 'dan';
};

var dan = new Human();

var Coder = function() {
   this.code = function() {
      alert('1010101');
   };    
};

Coder.prototype = new Human;
Coder.prototype.constructor = Coder;
var jordan = new Coder();
console.log(jordan);

Another option, moving the stuff from Human to the prototype:

var Human = function() {};
Human.prototype.sayHi = function() {
    alert('hi');
};
Human.prototype.name = 'dan'; // will be shadowed if redefined on instances

var Coder = function() {};
Coder.prototype = Object.create(Human.prototype);
Coder.prototype.code = function() {
    alert('1010101');
};  
var jordan = new Coder();
console.log(jordan);

A polyfill for Object.create is available on MDN

edited Oct 04 '13 at 19:31

answered Oct 04 '13 at 19:26

bfavaretto

71,580
16
111
150

i was hoping to use my standard aliasing at the end of a function. is there no work around? adding the function to the prototype is def better and more efficient way! – user2727253 Oct 04 '13 at 20:44
There's no way use prototypes and return a completely new object at the same time. Maybe you could just use Object.create directly? Something like: `var extendedObj = Object.create(baseObj)`, without using constructors (you could wrap that in a function, of course, but wouldn't be calling it with `new`). – bfavaretto Oct 04 '13 at 20:56

score 1 · Accepted Answer · answered Oct 04 '13 at 19:26

1

It's a funny thing: a JS constructor can return an object that becomes this. This object however doesn't follow the prototypes, as defined for the constructor (in this case it's a plain Object). The correct way that looks like your code would be:

var Human = function() {
    var hi = function() {
        alert('hi');
    };
    this.name = "dan";
    this.sayHi = hi;
};

// or even:
var Human = function() {
    this.name = "dan";
};

Human.prototype.sayHi = function() {
    alert('hi');
};

Similar for Coder. The inheritance code is OK.

answered Oct 04 '13 at 19:26

Nikos Paraskevopoulos

39,514
12
85
90

ahhhh, i knew it had to do with that, but why is it that I can't have a function redefine it's this. I was hoping to follow my typical alias returning of a function but still be able to prototype. Is there a workaround? can I explicitly define the constructor? – user2727253 Oct 04 '13 at 19:53
No, I don't think there is :) – Nikos Paraskevopoulos Oct 04 '13 at 19:59
1

The inheritance code is *almost* okay: the part that adjusts the constructor should be `Coder.prototype.constructor = Coder;` – bfavaretto Oct 05 '13 at 02:56

Inheritance in javascript not working

2 Answers2