javascript prototype - find my issue

Question

i written a simple javascript inheritance prototype, but i am getting issue.. any one guide me the correct declaration?

code:

var Man = function(params){
  this.name = params.name,
  this.age = params.age,
  this.job = params.job;
}

Man.prototype.work = function(){
  return this.name +' is working as a ' + this.job;
}

var Women = function(params){
  this.name = params.name,
  this.age = params.age,
  this.job = params.job;
}

Women.prototype = new Man(); //assigning the prototype

var man1 = new Man({name:'man1',age:'age1',job:'job1'});
console.log(man1.work()); //it works

var woman1 = new Women({name:'woman1',age:'age2',job:'job2'});
console.log(woman1.work()); // it is not.. why?

the error i am getting :

TypeError: params is undefined
[Break On This Error]   

this.name = params.name,

What I always say: Women.prototype = new Man(); is a bad way of of setting the prototype. — Felix Kling
– Felix Kling, Commented Jan 17, 2013 at 12:22
Don't use comma at the end. It is not as multiple var declaration. — srigi
– srigi, Commented Jan 17, 2013 at 12:27
@srigi: It does not make sense to use it, but it is not an issue. — Felix Kling
– Felix Kling, Commented Jan 17, 2013 at 12:28

Felix Kling · Accepted Answer · 2013-01-17 13:04:36Z

4

You are getting this error because you are calling Man without any arguments:

Women.prototype = new Man();

Since inside the function, params is undefined, accessing params.name will raise an exception.

That's one of the reasons why setting the prototype like this is inconvenient. You don't really want to create a new instance of Man at this moment, you only want to hook up its prototype into the prototype chain.

Better use Object.create ^[MDN] (includes polyfill) to create an object with a specific prototype:

Women.prototype = Object.create(Man.prototype);
Women.prototype.constructor = Women;

and inside Women, call the parent constructor (it's not meant to be a dirty joke) to pass along the arguments:

function Women(params) {
    Man.call(this, params);
}

edited Jan 17, 2013 at 13:04

answered Jan 17, 2013 at 12:24

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

2 Comments

MrWhite Over a year ago

Just to note browser support for the create method: IE9+, FF4+

Felix Kling Over a year ago

@w3d: Added a link to the MDN documentation which has a polyfill.

Cerbrus · Accepted Answer · 2013-01-17 12:38:27Z

1

You're not passing your parameters from the woman to the man, try this:

Women.prototype = new Man({name:this.name,age:this.age,job:this.job});

Actually, this would work also:

Women.prototype = new Man(this);

The advantage is that it's just 4 letters of extra code, and this should work on all browsers that support JS.

edited Jan 17, 2013 at 12:38

answered Jan 17, 2013 at 12:21

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

10 Comments

3gwebtrain Over a year ago

what is the need to pass the parameters 2 times?

Cerbrus Over a year ago

Work is a function in the prototype of Man. It can't "see" the variables passed to Women, you'll have to pass it along.

Felix Kling Over a year ago

So... where are you putting this line then? Because if it is were it is in the original code, this will refer to window... it might "work" but it is very unintuitive design.

Felix Kling Over a year ago

I guarantee you that this refers to window. The reason why you still get the correct output is because you are shadowing name, age and job through the Women constructor. The only reason it works is because you are passing an object to Man. Women.prototype = new Man({}); would work just as well. Have a look at the prototype chain: jsfiddle.net/QkjwB/1.

Felix Kling Over a year ago

At the moment you are calling Women.prototype = new Man(this);, you did not even create a Women instance yet (you did not call new Women and passed any parameters to it). this cannot refer to the Women instance at this point.

|

Collectives™ on Stack Overflow

javascript prototype - find my issue

2 Answers 2

2 Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related