Javascript OOP原型继承

Question

我正在尝试JS OOP，特别是原型继承，我不知道为什么这个JS Fiddle返回undefined。代码如下：

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

如果您呼叫区功能得到圆的面积，那么你需要调用它

console.log(circle.Area()) 

JS Fiddle

Answer 2

没有你的日志显示undefined。

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

Answer 3

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

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

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

console.log(circle.Area()); 

使这个修改后（见JSFiddle），你得到正确的结果：

78.53981633974483 

说明：

这可以通过实际调用Area功能，像这样做在你的实现，你只是访问函数对象，它打印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技能是有限的，所以这可能有一个或两个缺陷。对于更高级的继承，你可以看看我在上面引用的问题中接受的答案，以提供值得使用的框架提示。

Answer 4

我想通了。

但是，它真的感谢这个线程上的每个人。我花了一段时间才清醒过来，其实是一个新手的错误。

我将原型函数Area分配给了对象圆，，之后继承了基础Shape原型。

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

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

Answer 5

//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_oriented_JS/inheritance.html

不要忘记做套用来电。

MySystem.ListView.ListView.apply(this); 

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