basic / efficient Prototypical inheritance in JavaScript?

Question

So I currently have the following code snippet. I am trying to create a Cylon class, which contains a model property and a prototype attack() method. I am creating a HumanSkin class, which inherits from the Cylon, and also adds its own prototype infiltrate() method.

function Cylon(model){
  this.model = model;
}

Cylon.prototype.attack = function(){
    return("Destroy all humans!");
}

function HumanSkin(){}
HumanSkin.prototype = new Cylon();
HumanSkin.prototype.infiltrate = function(){
  return("Infiltrate the colonies");
}

cylon = new Cylon("raider");
caprica = new HumanSkin(6);

My issue is this -- why is console.log(caprica.model); returning Undefined? How can I easily get full inheritance (preferably with encapsulation) in JS?

thefourtheye · Accepted Answer · 2014-04-04 15:26:53Z

5

When you say,

HumanSkin.prototype = new Cylon();

you are creating a new object of Cylon, with an empty model (undefined). So, inheriting from Cylon, could be improved like this

HumanSkin.prototype = Object.create(Cylon.prototype);

Note that, When you inherit with prototypal inheritance, whatever is in the prototype of the parent will be available to the child. But model is in the Cylon's constructor. Normally, this can be solved like this

function HumanSkin(model) {
    Cylon.call(this, model);
}

Now, whenever you construct a new HumanSkin object, internally Cylon function will be invoked with the current object (this) and the model will be passed as an argument to that. So, Cylon will be initializing the model in the current object.

edited Apr 4, 2014 at 15:26

answered Apr 4, 2014 at 15:21

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

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

6 Comments

tdc Over a year ago

Hi -- great answer, thanks! Is there a better way to encapsulate prototypal classes? I don't like how the constructor method and then the prototype code are all separated out.

thefourtheye Over a year ago

@Prefix Well, that is actually the best way. Because, whatever is in the constructor will be created everytime you create an object. So, it is better to put the functions in the prototype and all the instance specific data in the constructor.

thefourtheye Over a year ago

@Prefix You might also want to read this

tdc Over a year ago

what is the advantage of Cylon.call(this,model); over this.__proto__= new Cylon(model);?

thefourtheye Over a year ago

@Prefix Two things. 1) __proto__ is deprecated, 2) You are creating a new object and sticking that as the prototype. You are mixing instance and the prototypes.

|

Collectives™ on Stack Overflow

basic / efficient Prototypical inheritance in JavaScript?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related