CODEWITHSUNDEEP
javascriptoop
Faisal Naseer
Faisal Naseer

Reputation: 4248

Uncaught Type Error while implementing inheritance in javascript

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());

Upvotes: 0

Views: 47

Answers (2)

nils
nils

Reputation: 27194

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());

Upvotes: 1

Josh Beam
Josh Beam

Reputation: 19772

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;
};

Upvotes: 1

Related Questions