如何在类外的另一个函数中使用类的方法?

时间:2019-10-05 19:30:48

标签: javascript html canvas html5-canvas

我想在@PMID外部和另一个函数内部使用类Coordinates的方法compXcompY,如何执行此操作我遇到了错误{ {1}}

我尝试在其他函数class中创建对象,但仍然会给出错误。

ReferenceError: xy is not defined

我遇到错误drawGraph() 我期望绘制一个图,但是什么也没显示 还请告诉我如何使代码更好(整洁)

1 个答案:

答案 0 :(得分:2)

这里有些错误,这是代码的更好版本:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

class Coordinates {
    compX(x) {
        var originX = myCanvas.width / 2;
        var mag = 20;
        return originX + mag * x;
    }
    compY(y) {
        var originY = myCanvas.height / 2;
        var mag = 20;
        return originY - mag * y;
    }
}

var xy = new Coordinates();

drawGraph(ctx, -10, 10);
drawAxis(ctx, 10);

function f(x) {
    return x * x;
}

function drawGraph(ctx, a, b) {
    //make lines that trace coordinates of the function in an interval
    var n = 50;
    var dx = (b - a) / n;
    for (x = a; x <= b; x += dx) {
        var pointAx = x;
        var pointAy = f(x);
        var pointBx = x + dx;
        var pointBy = f(x + dx);
        console.log(`[${pointAx}, ${pointAy}],[${pointBx}, ${pointBy}]`);

        ctx.moveTo(xy.compX(pointAx), xy.compY(pointAy)); //this is where the error occurs
        ctx.lineTo(xy.compX(pointBx), xy.compY(pointBy));
        ctx.stroke();
        ctx.strokeStyle = "#0000ff";
        ctx.lineWidth = 1;
    }
}

function drawAxis(ctx, axisLength) {
    ctx.strokeStyle = "#000000";
    ctx.moveTo(xy.compX(0), xy.compY(axisLength));
    ctx.lineTo(xy.compX(0), xy.compY(-axisLength));
    ctx.moveTo(xy.compX(axisLength), xy.compY(0));
    ctx.lineTo(xy.compX(-axisLength), xy.compY(0));
    ctx.stroke();
    ctx.lineWidth = 1;
}

首先,习惯于在分配变量之前编写var/let/const。那就是造成您所犯的一些错误。第二,正如评论中提到的几个人所述,由于分配了drawGraph()之前调用了xy的函数xy导致了错误。将xy的定义上移会解决xy unassigned的问题。

然后,不要像以前那样使用空的构造函数。如果构造函数中包含某些内容,请将其定义为constructor()而不是className()