javascript - 可汗学院 : Cannot read property of undefined

Question

我正在编写一个可以在 Khan Academy 上转换多边形的库，但是我一直收到此错误:

Cannot read property 'x' of undefined

没有行号。

我的代码:

var Point = function(x,y) {
    this.x = x;
    this.y = y;
};

Point.prototype.rotate = function(around,degrees) {
    angleMode = "degrees";
    var aX = around.x;
    var aY = around.y;
    var cX = this.x;
    var cY = this.y;
    var dist = sqrt(sq(cX-aX)+sq(cY-aY));
    var currentTheta = asin(dist/cY);
    var gamma = degrees+currentTheta;
    this.x = cos(gamma)*dist+aX;
    this.y = sin(gamma)*dist+aY;
};

var Line = function(x1,y1,x2,y2) {
    this.f = new Point(x1,y1);
    this.s = new Point(x2,y2);
};

Line.prototype.draw = function() {
    line(this.f.x,this.f.y,this.s.x,this.s.y);
};

Line.prototype.rotate = function(around,degrees) {
    this.f = this.f.rotate(around,degrees);
    this.s = this.s.rotate(around,degrees);
};

var Polygon = function(x,y){
    if(x.length!==y.length){return;}
    this.sides = x.length;
    this.x = x;
    this.y = y;
    this.lines = new Array(this.sides);
    this.lines[0] = new Line(this.x[this.sides-1],this.y[this.sides-1],this.x[0],this.y[0]);
    for(var i=1;i<this.sides;i++){
        this.lines[i] = new Line(this.x[i-1],this.y[i-1]);
    }
};

Polygon.prototype.draw = function() {
    for(var i=0;i<this.sides;i++){
        this.lines[i].draw();
    }
};

Polygon.prototype.rotate = function(around,degrees) {
    for(var i=0;i<this.sides;i++){
        this.lines[i].rotate(around,degrees);
    }
};

var p = new Polygon([10,20,40],[40,20,15]);

var draw = function() {
    background(255,255,255);
    fill(0,0,0);
    stroke(0,0,0);
    p.rotate(new Point(20,20),1);
    p.draw();
};

但是我仍然不知道为什么它会抛出错误，尤其是因为它没有给出错误所在的方向。

编辑

项目链接: Transformation Library

Answer 1

让我们从您的 Point 类及其 rotate() 函数开始:

Point.prototype.rotate = function(around,degrees) {
    angleMode = "degrees";
    var aX = around.x;
    var aY = around.y;
    var cX = this.x;
    var cY = this.y;
    var dist = sqrt(sq(cX-aX)+sq(cY-aY));
    var currentTheta = asin(dist/cY);
    var gamma = degrees+currentTheta;
    this.x = cos(gamma)*dist+aX;
    this.y = sin(gamma)*dist+aY;
};

此函数执行一些数学运算并设置 this.x 和 this.y 变量。到目前为止一切顺利(免责声明:我没有检查过这个数学，但这不是重点)。但请注意，此函数不返回任何内容。

现在让我们转到您的 Line 类及其 rotate() 函数:

Line.prototype.rotate = function(around,degrees) {  
   this.f = this.f.rotate(around,degrees);
   this.s = this.s.rotate(around,degrees);
};

这会将 f 和 s 变量设置为从 rotate() 函数返回的值。但是等等，Point 类中的 rotate() 函数没有返回任何内容!所以现在 this.f 和 this.s 是未定义!

您的 Polygon 类调用 Line 类的 rotate() 函数也有类似的问题。

因此，要解决您的问题，您要么需要 rotate() 函数返回一些内容，要么您只需要调用它们而不是期望返回值。

退一步说，我想知道你为什么要自己做所有这些。 Processing 有自己的 rotate() 函数，可以为您完成所有这些工作。为什么不直接使用它们呢？