在javascript中实现继承时未捕获的类型错误

时间:2016-05-09 17:16:39

标签: javascript oop

我在实现继承时在JavaScript中练习OOP我收到了Uncaught类型的错误错误:sqr.area不是函数。在我的代码中,我有一个BoxShape类,继承了Square类。我试图使用Square对象调用区域函数,它是BoxShape的一部分,并且根据我将其继承到square类,因为我已将其原型设置为BoxShape类。但我无法弄清楚错误在哪里。

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

2 个答案:

答案 0 :(得分:1)

您的错误在于,您将函数定义为实例属性(对于每个实例而言都是个体)而不是原型属性(对于所有实例都是相同的并且是直接继承的)。

正如Bergi所提到的,由于你的getter和setter没有做任何事情,你只需在构造函数中直接分配这些属性就更容易了。

最后但并非最不重要的是,您可能希望调用BoxShape构造函数中的Square构造函数来初始化widthheight道具。

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

答案 1 :(得分:1)

您没有将BoxShape的原型设置为具有该方法。在执行此操作时,可以将每个单独的实例设置为具有该方法的实例:

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

那不是原型。

你应该这样做:

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