Uncaught Type Error while implementing inheritance in javascript

Question

I am practicing OOP in JavaScript while implementing inheritance I am getting an error of Uncaught type Error : sqr.area is not a function. In my code I have a BoxShape class from which a Square class is inherited. and I am trying to call the area function which is part of BoxShape using Square object and according to me its inherited to the square class as I have set its prototype the BoxShape class. But I am unable to figure out where is the mistake.

function show(msg){
        console.log(msg);
    }



    function BoxShape(){
        Object.defineProperty(this,'length',{
            get: function(){
                return length;
            },
            set: function(val){
                length = val;
            },
            enumerable : true,
            configurable:true
        });

        Object.defineProperty(this,'width',{
            get:function(){
                return width;
            },
            set:function(val){
                width=val;
            },
            configurable : true,
            enumerable : true,

        });

        this.area=function(){
            return this.width*this.length;
        }
    }


//inherited square class
    function Square(size){
        Object.defineProperty(this,'width',{
            get: function(){
                return width;
            },
            set: function(val){
                width = val;
            },
            configurable: true,
            enumerable:true,

        });
        Object.defineProperty(this,'length',{
            get:function(){
                return length;
            },
            set:function(val){
                length=val;
            },
            configurable:true,
            enumerable:true,

        }); 
    }


    Square.prototype = Object.create(BoxShape.prototype,{
        constructor:{
            configurable:true,
            enumerable:true,
            writable:true,
            value:Square
        }
    });

    var sqr = new Square();
    sqr.length = 10;
    sqr.width = 12;
    show(sqr.area());

You are not adding the square function to the prototype, you are just making a square variable which is a function inside your BoxShape instance — juvian
– juvian, Commented May 9, 2016 at 17:21
You're never declaring length and width variables anywhere? My tip: Avoid getters and setters until you need them. Just do this.length = length; this.width = width;. — Bergi
– Bergi, Commented May 9, 2016 at 17:24

nils · Accepted Answer · 2016-05-09 17:29:36Z

Your mistake is, that you are defining functions as instance properties (which are individual to every instance) instead of prototype properties (which are the same for all instances and are inherited directly).

And as Bergi mentioned, since your getters and setters aren't doing anything, you're easier off just assigning these properties directly in the constructor.

Last but not least you probably want to call the BoxShape constructor inside the Square constructor to initialize the width and height props.

function show(msg){
    console.log(msg);
}

function BoxShape(){
    this.width = 0;
    this.height = 0;
}

BoxShape.prototype.area=function(){
    return this.width*this.length;
}

//inherited square class  
function Square(size){
    BoxShape.call(this);
}

Square.prototype = Object.create(BoxShape.prototype,{
    constructor:{
        configurable:true,
        enumerable:true,
        writable:true,
        value:Square
    }
});

var sqr = new Square();
sqr.length = 10;
sqr.width = 12;
show(sqr.area());

Josh Beam · Accepted Answer · 2016-05-09 17:22:12Z

1

You didn't set the BoxShape's prototype to have that method. You set each individual instance to have its own instance of that method when you did this:

    // this.whatever is instance specific, which isn't what you want in your case
    this.area=function(){
        return this.width*this.length;
    }

That's not on the prototype.

You should do:

BoxShape.prototype.area = function() {
  return this.width*this.length;
};

answered May 9, 2016 at 17:22

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

Collectives™ on Stack Overflow

Uncaught Type Error while implementing inheritance in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related