JavaScript - error with inheritance

Question

I'm trying to use inheritance, but I'm stuck. I'm getting an error and don't know what I'm doing wrong. All examples I see online don't pass objects into their constructors, so I'm not sure what I should be doing. Here is a dumbed down example -

function Automobile(obj){
    this.name = obj.name;
    this.model = obj.model;
}

Automobile.prototype = {
    getName: function(){
        console.log(this.name);
    },
    getModel: function(){
        console.log(this.model);
    }
}

var bmw = new Automobile({
    name: 'BMW',
    model: 'm5'
})

bmw.getName();
bmw.getModel();


function Truck(obj){
    this.cabSize = obj.cabSize
}

Truck.prototype = new Automobile();
Truck.prototype = {
    getCabSize: function(){
        console.log(this.cabSize);
    }
}

var fordF150 = new Truck({
    name: 'Ford',
    model: 'F150'
})

//Uncaught TypeError: Cannot read property 'name' of undefined test.js:2
//Automobile test.js:2
//(anonymous function)

You haven't passed an object when you called Truck.prototype = new Automobile(); its expecting the first parameter to be an object. — Musa
– Musa, Commented Aug 28, 2014 at 23:16

nisargjhaveri · Accepted Answer · 2014-08-28 23:17:46Z

3

The error is occurring at Truck.prototype = new Automobile();. You are not passing obj, which Automobile expects.

To avoid this try Truck.prototype = Object.create(Automobile.prototype)

After that use

Truck.prototype.getCabSite = function(){
}

so that you don't overwrite the inherited properties from Automobile.

answered Aug 28, 2014 at 23:17

nisargjhaveri

1,50912 silver badges23 bronze badges

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

2 Comments

Ben Over a year ago

Is there any way that I can do this and keep the Truck.prototype = {...} to add new methods in? Not a huge deal, I just prefer to add prototypes that way.

user145400 Over a year ago

You can do Truck.prototype.WhateverYouWantToAdd = function(){} over and over again

mhijazi · Accepted Answer · 2014-08-28 23:22:18Z

0

Instead of this:

Truck.prototype = {
    getCabSize: function(){
        console.log(this.cabSize);
    }
}

try this:

Truck.prototype.getCabSite = function(){


}

Truck.prototype.constructor = Truck; //this will insure the appropriate constructor is called

that way you don't delete get rid of the automobile protoype

edited Aug 28, 2014 at 23:22

answered Aug 28, 2014 at 23:13

mhijazi

2122 silver badges9 bronze badges

2 Comments

Ben Over a year ago

Thanks onzur. I somehow would like to keep the Truck.prototype = {} formatting so I can add more methods in that manner. Not sure how I can set the Truck to inherit Automobile and still do that? At any rate though, I still get the "Uncaught TypeError: Cannot read property 'name' of undefined" error with this update.

Barmar Over a year ago

If you're using jQuery, you can use $.extend() to merge objects.

LogPi · Accepted Answer · 2014-08-29 03:14:52Z

You changed "prototype" of Truck -> you can't inherit.

Truck.prototype = new Automobile();
Truck.prototype = { getCabSize: function(){ console.log(this.cabSize); } }; // Change prototype of Truck

You can repair

Truck.prototype.getCabSize = function(){};

1 Example about the change of prototype, i write some line of code use your Automobile function

function Automobile(obj){
    this.name = obj.name;
    this.model = obj.model;
}

Automobile.prototype = {
    getName: function(){
        console.log(this.name);
    },
    getModel: function(){
        console.log(this.model);
    }
}

var bmw = new Automobile({
    name: 'BMW',
    model: 'm5'
})

Automobile.prototype = {
           sayHello:function(){
             console.log("Hello, I'm new");
        }
 }

// Make new Automobile

var honda = new Automobile({
    name: 'BMW',
    model: 'm5'
});

// Try to call getName, getModel
bmw.getName(); // BMW
bmw.getModel();  // m5

honda.getName(); // TypeError : undefined is not function
honda.getModel(); // TypeError : undefined is not function

// Try to call sayHello

bmw.sayHello(); // TypeError : undefined is not function

honda.sayHello(); // Hello, I'm new

Why bmw can't call sayHello and honda can't call getName and getModel ? Because i changed the prototype reference of Automobile after create bmw object. bmw hold the reference to "old" prototype that contain getName, getModel but not sayHello . And honda hold the reference to "new" prototype that contain sayHello but not getName and getModel.

Hope it'll help you.

Collectives™ on Stack Overflow

JavaScript - error with inheritance

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related