1

我正在尝试练习 JS OOP，尤其是原型继承，但我无法弄清楚为什么这个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);

任何人都可以对此有所了解吗？

4

5 回答 5

2

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

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

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

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

console.log(circle.Area());

进行此修改后（请参阅JSFiddle），您会得到正确的结果：

78.53981633974483

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

编辑

从您的评论来看，我相信您的问题与此问题重复。根据此答案中给出的详细信息，我能够得到以下工作：

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 技能有限，所以这可能有一两个缺陷。对于更高级的继承，您可以查看我上面引用的问题中接受的答案，以获取有关值得使用的框架的提示。

于 2013-04-21T19:48:54.703 回答
1

如果您正在调用Area函数来获取圆的面积，那么您需要像这样调用它

console.log(circle.Area())

JS小提琴

于 2013-04-21T19:23:16.027 回答
1

你的日志都没有显示undefined。

如果您在开发人员的控制台中进行测试，您会在输入的末尾找到最终返回值。此值通常undefined为 ，与您的代码无关。

于 2013-04-21T19:26:26.723 回答
0

我想到了。

但实际上要感谢这个线程上的每个人。我花了一段时间才明白，这实际上是一个菜鸟错误。

在继承基本 Shape 原型之前，我将原型函数 Area 分配给对象圆。

有问题的部分现在是这样的：

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


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

Circle.prototype.Area = function () {
    return Math.PI * Math.pow(this.Radius, 2);
};
于 2013-04-22T04:59:50.790 回答
0 
//creating the main Object variables with static Propertys
var MySystem={
    Utility:{},
    AppDbSystem:{
        connecterObj:"",
        objCollection:new Array(),
        sendObjCollection:null,
        phpGridCollection:null
    },
    OutManager:{},
    DbIndex:{},
    GoDb:{},
    Ioform:{},
    ListView:{},
    WindowSystem:{},
    AngularSystem:{
        objCollection:null
    }
}

//the parent class (top of the chain)
MySystem.GoDb.GoDb=function(){
    var that=this;
    this.namespace;
    this.speicher;

    this.initGoDb=function(table,group,indexArr,readOnly){
        that.speicher=table;
    }

    this.showS=function(){
        alert(that.speicher);
    }

    this.setNamespace=function(ns){
        that.namespace=ns;
    }
    this.getNamespace=function(){
        return that.namespace;
    }
}

//ListView second Class of the Chain
MySystem.ListView.ListView=function(){
    var that=this;
    MySystem.GoDb.GoDb.apply(this); //IMPORTANT to make it as an Instance

    this.initListView=function(submitIndex,idArr,methodActionArr){
        that.initGoDb(submitIndex);
    }
}
MySystem.ListView.ListView.prototype=new MySystem.GoDb.GoDb();

//The Child Class
MySystem.ListView.ListStandard=function(){
    var that=this;
    MySystem.ListView.ListView.apply(this);


    this.init=function(elementYArr,attrs,methodActionArr,idArr,tableId,styleArr,styleArrTr,styleArrTd,withNumbers,submitIndex){
        that.initListView(elementYArr);
    }
}
MySystem.ListView.ListStandard.prototype=new MySystem.ListView.ListView();

//now use it
var test=new MySystem.ListView.ListStandard();
var test2=new MySystem.ListView.ListStandard();
test.init("eazy");
test.showS();
test2.init("second obj");
test2.showS();
test.showS();

看看http://www.zipcon.net/~swhite/docs/computers/languages/object_orientation_JS/inheritance.html

并且不要忘记进行应用调用。

MySystem.ListView.ListView.apply(this);

否则 Object 属性是静态的，不可继承。

于 2014-06-25T23:47:36.510 回答