Javascript prototypal inheritance

Question

I'm experimenting with a few aspects of Javascript's inheritance via a question I came across:

Create a reservation system which books airline seats or hotel rooms. It charges various rates for particular sections of the plane or hotel. Example, first class is going to cost more than coach. Hotel rooms have penthouse suites which cost more. Keep track of when rooms will be available and can be scheduled.

I'm working on the Hotel room problem.

I've decided to go with a single room base object with one data member called 'duration' which keeps track of the number of days the room is booked for, and two methods : book and checkout .

I have a derived object 'SingleRoom' which inherits from SingleRoom.

Here's the code :

    function Room(duration){
    this.duration = duration;
}
Room.prototype.book = ()=>{
    if (this.prototype.count > 0){
        this.prototype.count -= 1;
        return true;
    }
    else {
        return false;
    }
}

Room.prototype.checkOut = ()=>{
    this.prototype.count += 1;
    console.log("Room checked out");
}

function SingleRoom(duration){
    this.price = 1000;
}
SingleRoom.prototype = new Room();
SingleRoom.prototype.constructor = SingleRoom;
SingleRoom.prototype.count = 3;
var sr1 = new SingleRoom(2);
if(sr1.book() === false){
    console.log("Could not book room");
}

I'm getting the following error at 'this.prototype.count' : Cannot read property count of undefined

Any idea what the issue is ?

Thanks!

this.count? Why do you define `count in thesubclass but use it in the superclass methods? — Oriol
– Oriol, Commented May 27, 2016 at 17:16
you don't use this.prototype.* to access prototype properties. — zzzzBov
– zzzzBov, Commented May 27, 2016 at 17:19
@procrastinator: No, he/she is trying to make it inherit from Room: SingleRoom.prototype = new Room(); (that's not the correct way to do it, but that's what he/she's trying to do). — T.J. Crowder
– T.J. Crowder, Commented May 27, 2016 at 17:25

Paul · Accepted Answer · 2016-05-27 17:17:55Z

3

You should only use the prototype property on constructor functions. This is correct:

SingleRoom.prototype = new Room();
SingleRoom.prototype.constructor = SingleRoom;
SingleRoom.prototype.count = 3;

But you shouldn't use it on individual objects. The prototype chain is searched automatically when you access properties that aren't defined on the immediate object. Everywhere that you have this.prototype.count change it to this.count and it will work properly.

answered May 27, 2016 at 17:17

Paul

142k28 gold badges285 silver badges272 bronze badges

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

1 Comment

T.J. Crowder Over a year ago

SingleRoom.prototype = new Room(); is an anti-pattern, just generally but also specifically because Room expects an argument. It should be SingleRoom.prototype = Object.create(Room.prototype); then SingleRoom calling Room during construction: Room.call(this, duration);

T.J. Crowder · Accepted Answer · 2016-05-27 17:47:58Z

You're confusing functions with instances (or at least, properties you use with functions with ones you use with instances; which is really easy to do). The prototype property is used on a constructor function. It refers to the prototype object that will be assigned as the underlying prototype (called [[Prototype]] in the spec) of objects created via that constructor. It isn't (confusingly!) a reference to an object's prototype; to get that (the thing the spec calls [[Prototype]]), you use Object.getPrototypeOf(theObject), but it's relatively rare you want to.

This may help clarify that relationship:

function Thing(name) {
    this.name = name;
}
Thing.prototype.say = function() {
    console.log(this.name);
};
var t = new Thing("Ben");
console.log(t.prototype);     // undefined, `t` has no `prototype` property
console.log(Thing.prototype); // an object with `say`
t.say();                      // "Ben"
console.log(Object.getPrototypeOf(t) === Thing.prototype); // true

The other issue is that you're using arrow functions to define functions on prototypes, which won't work; the point of arrow functions is that they close over this, but for a prototype function, you want this set by how the function is called.

If you're using ES2015 (e.g., transpiling with Babel or similar), you can use the nice, new, easy syntax. I've had to guess at what count is supposed to be; I put it on Room instances:

class Room {
    constructor(duration){
        this.duration = duration;
        this.count = 3;
    }

    book() {
        if (this.count > 0) {
            this.count -= 1;
            return true;
        }
        else {
            return false;
        }
    }

    checkOut() {
        this.count += 1;
        console.log("Room checked out");
    }
}

class SingleRoom extends Room {
    constructor(duration){
        super(duration);
        this.price = 1000;
    }
}

var sr1 = new SingleRoom(2);
if (sr1.book() === false){
    console.log("Could not book room");
}

If you want to use ES5, here's a translation with notes:

function Room(duration) {
    this.duration = duration;
    this.count = 3;
}
// Note we *don't* use arrow functions for prototype functions; it's important
// for them to get `this` by how they're called.
Room.prototype.book = function() {
    if (this.count > 0) {
        this.count -= 1;
        return true;
    }
    else {
        return false;
    }
};
Room.prototype.checkOut = function() {
    this.count += 1;
    console.log("Room checked out");
};

// Derive SingleRoom from Room
function SingleRoom(duration) {
    Room.call(this, duration);  // Necessary to init Room
    this.price = 1000;
}
SingleRoom.prototype = Object.create(Room.prototype); // NOT `new Room()`
SingleRoom.prototype.constructor = SingleRoom;

var sr1 = new SingleRoom(2);
if (sr1.book() === false){
    console.log("Could not book room");
}

Collectives™ on Stack Overflow

Javascript prototypal inheritance

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related