Javascript OOP inheritance

Question

I created these objects and their methods.

var Door = function(no = 10) {
    this.number = isNaN(no) ? 10 : no;
}

var Room = function(door) {
    this.door = door instanceof Door ? door : new Door();
    this.name = 'Room';
}

function MyRoom(){
    this.name = 'MyRoom';
}
MyRoom.prototype = new Room();

function HerRoom() {
    this.name = 'HerRoom';
}
HerRoom.prototype = new Room();

var $myDoor = new Door(10);
var $herDoor = new Door(5);

var $myRoom = new MyRoom($myDoor);
var $herRoom = new HerRoom($herDoor);

console.log($myDoor, $myRoom.door);
// $myDoor.number is 10
// $myRoom.door.number is 10

console.log($herDoor, $herRoom.door);
// $herDoor.number is 5
// $herRoom.door.number is 10

I am wondering what I did wrong that makes $myDoor == $myRoom.door, BUT, $herDoor != $herRoom.door. Can anyone please help me to notice where my mistake is?

Update:

Since, I create

var $herDoor = new Door(5);
var $herRoom = new HerRoom($herDoor);

I am expecting that $herRoom.door.number is equal to $herDoor.number. Since,

$herDoor instanceof Door // true;

you doornumbers will always be 10 - look at the answer of @gurvinder372 — messerbill
– messerbill, Commented Mar 10, 2016 at 13:07
You're never calling your super constructor, and neither HerRoom nor MyRoom take an argument. Instead you rely on the wrongly initialised prototype to have that property. — Bergi
– Bergi, Commented Mar 10, 2016 at 13:14
It looks as if when creating a new instance of HerRoom/MyRoom, it doesn't do anything with the door that you pass into it. It always constructs a new instance of a door to use as its prototype which has the default value of 10. Try changing both values to be 20 for example and see if $myRoom.number = 10 — mbx-mbx
– mbx-mbx, Commented Mar 10, 2016 at 13:15
$myDoor == $myRoom.door - um, no. They might have the same number, but they're not the same object. — Bergi
– Bergi, Commented Mar 10, 2016 at 13:16
@DickyBullin $myRoom.door.number will always be 10. Change your code to var $myDoor = new Door(20); and you will see that $myRoom.door.number will be 10. It always creates a new of Door as its door property (i.e. does nothing with the $myDoor that you pass into MyRoom.) — mbx-mbx
– mbx-mbx, Commented Mar 10, 2016 at 13:26

gurvinder372 · Accepted Answer · 2016-03-11 05:12:50Z

2

I am wondering what I did wrong that makes $myDoor == $myRoom.door, BUT, $herDoor != $herRoom.door.

Simply because you gave var $herDoor = new Door(5); while initializing $herDoor which assigned 5 to number property.

Changing the value in constructor call will give you the output you want

var $herDoor = new Door(10);

Apologies for late edit, it seems that you are hoping that after assigning the prototype of Room to MyRoom, Room's constructor will be invoked. Also, since you are not passing door object to the MyRoom, it will never get this object.

You need to make following changes

function Door (no) {
    this.number = isNaN(no) ? 10 : no;
}

function Room (door) {
    this.door = door instanceof Door ? door : new Door();
    this.name = 'Room';
}

function MyRoom(door){
    this.name = 'MyRoom'; Room.call(this, door); //door object is passed and Room constructor is invoked with it
}
MyRoom.prototype = Object.create(Room.prototype);
function HerRoom(door) {
    this.name = 'HerRoom'; Room.call(this, door);//door object is passed and Room constructor is invoked with it
}
HerRoom.prototype = Object.create(Room.prototype);

var $myDoor = new Door(10);
var $herDoor = new Door(5);

var $myRoom = new MyRoom($myDoor);
var $herRoom = new HerRoom($herDoor);

console.log($myDoor, $myRoom.door);
console.log($herDoor, $herRoom.door);

edited Mar 11, 2016 at 5:12

answered Mar 10, 2016 at 13:04

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

18 Comments

mbx-mbx Over a year ago

function(no = 10) is es6 functionality (default values). He may be using a transpiler.

gurvinder372 Over a year ago

@Magrangs oh ok. If OP confirms it I will remove it from my post

Dicky Bullin Over a year ago

@gurvinder372 I tried to change it but $herDoor.number is still not the same as $herRoom.door.number.

Dicky Bullin Over a year ago

@Magrangs No, I am not using transpiler. But I think my browser supports es6.

mbx-mbx Over a year ago

@gurvinder372 The door parameter going into that function is always undefined so will always create a new door with a door number of 10.

|

Collectives™ on Stack Overflow

Javascript OOP inheritance

1 Answer 1

18 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

18 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related