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
– pkuderov, Commented Oct 4, 2013 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
– user2727253, Commented Oct 4, 2013 at 20:45
For more info on prototype, inheritance, overriding and calling super you can have a look at this 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
– HMR, Commented Oct 5, 2013 at 2:28

bfavaretto · Accepted Answer · 2013-10-04 19:31:46Z

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 4, 2013 at 19:31

answered Oct 4, 2013 at 19:26

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2727253 Over a year ago

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!

bfavaretto Over a year ago

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).

Nikos Paraskevopoulos · Accepted Answer · 2013-10-04 19:26:09Z

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 4, 2013 at 19:26

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

3 Comments

user2727253 Over a year ago

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?

Nikos Paraskevopoulos Over a year ago

No, I don't think there is :)

bfavaretto Over a year ago

The inheritance code is almost okay: the part that adjusts the constructor should be Coder.prototype.constructor = Coder;

Collectives™ on Stack Overflow

Inheritance in javascript not working

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related