Javascript OOP 原型(prototype)继承

Question

我正在尝试练习 JS OOP，尤其是原型(prototype)继承，但我不明白为什么会这样 JS Fiddle返回未定义。代码如下:

function Shape(name, edges) {
    this.Name = name;
    this.Edges = edges;
}

Shape.prototype.toString = function(){ return "Shape: " + this.Name;};

function Circle(radius) {
    this.Radius = radius;
}

Circle.prototype.Area = function(){
    return Math.PI * Math.pow(this.Radius, 2);
};

Circle.prototype = new Shape("Circle", 1);
Circle.prototype.constructor = Circle;

var circle = new Circle(5);

console.log(circle);
console.log(circle.toString());
console.log(circle.Area);

请问有人能解释一下吗？

Answer 1

执行您的代码，我得到以下输出:

Circle { Radius=5, Name="Circle", Edges=1 }
Shape: Circle
function()

所以，这里没有undefined。但是，我可以想象您希望看到计算出的面积被打印在控制台上而不是 function()。

这可以通过实际调用 Area 函数来完成，如下所示:

console.log(circle.Area());

进行此修改后(参见 JSFiddle)，您将得到正确的结果:

78.53981633974483

说明:在您的实现中，您只是访问打印了 function() 的函数对象，而不是调用真正计算所需值的函数。

编辑

根据您的评论，我相信您的问题与 this one 重复.来自 this answer 中给出的详细信息，我能够进行以下工作:

function Circle(radius) {
    this.Name = "Circle";
    this.Edges = 1;
    this.Radius = radius;
}

Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

Circle.prototype.Area = function () {
    return Math.PI * Math.pow(this.Radius, 2);
};

然而，我的 JS 技能有限，所以这可能会有一两个缺陷。对于更高级的继承，您可以查看我上面提到的问题中已接受的答案，以获取有关值得使用的框架的提示。