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

Question

我在 JavaScript 中练习 OOP，同时实现继承，我收到了 Uncaught 类型错误:sqr.area 不是函数。在我的代码中，我有一个 BoxShape 类，从中继承了 Square 类。我试图使用 Square 对象调用属于 BoxShape 一部分的面积函数，根据我的说法，它继承于 square 类，因为我已将其原型(prototype)设置为 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());

Answer 1

您的错误是，您将函数定义为实例属性(对于每个实例来说都是单独的)而不是原型(prototype)属性(对于所有实例来说都是相同的并且直接继承)。

正如 Bergi 提到的，由于您的 getter 和 setter 没有执行任何操作，因此直接在构造函数中分配这些属性会更容易。

最后但并非最不重要的一点是，您可能希望在 Square 构造函数内调用 BoxShape 构造函数来初始化 width 和 height Prop 。

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