Javascript 如何使用类'；类外的另一个函数中的方法？

我想在

类

外部和另一个函数内部使用类

坐标

的方法

compX

和

compY

，我如何做到这一点我得到了错误

参考错误：xy未定义

我尝试在另一个函数

drawGraph（）

中创建该对象，但仍然出现错误

<script>
var c =document.getElementById("myCanvas"); 
var ctx = c.getContext("2d");
//function call
drawGraph(ctx,-10,10);
drawAxis(ctx,10);

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

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

xy = new Coordinates();
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;
}

</script>

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
//函数调用
绘图图（ctx，-10,10）；
牵引轴（ctx，10）；
函数f（x）{
返回x*x；
}
类坐标{
坐标（）{}
compX（x）{
originX=myCanvas.width/2；
mag=20；
返回（原始+磁*x）；
}
康比（y）{
originY=myCanvas.height/2；
mag=20；
返回（原始-杂志*y）；
}
}
xy=新坐标（）；
函数绘图图（ctx、a、b）{
//在一个间隔内绘制跟踪函数坐标的线
var n=50；
var dx=（b-a）/n；
对于（x=a；x这里有几个地方是错误的，下面是更好的代码版本：

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 c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
类坐标{
compX（x）{
var originX=myCanvas.width/2；
var-mag=20；
返回原点x+mag*x；
}
康比（y）{
var originY=myCanvas.height/2；
var-mag=20；
返回原始-杂志*y；
}
}
var xy=新坐标（）；
绘图（ctx，-10,10）；
牵引轴（ctx，10）；
函数f（x）{
返回x*x；
}
函数绘图图（ctx、a、b）{
//在一个间隔内绘制跟踪函数坐标的线
var n=50；
var dx=（b-a）/n；
对于（x=a；x这里有几个地方是错误的，下面是更好的代码版本：

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 c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
类坐标{
compX（x）{
var originX=myCanvas.width/2；
var-mag=20；
返回原点x+mag*x；
}
康比（y）{
var originY=myCanvas.height/2；
var-mag=20；
返回原始-杂志*y；
}
}
var xy=新坐标（）；
绘图（ctx，-10,10）；
牵引轴（ctx，10）；
函数f（x）{
返回x*x；
}
函数绘图图（ctx、a、b）{
//在一个间隔内绘制跟踪函数坐标的线
var n=50；
var dx=（b-a）/n；
对于（x=a；x
drawGraph
在定义
xy
之前被调用，但是
drawGraph
使用
xy
。请使用
var xy=new Coordinates（）；
而不仅仅是
xy=…
。然后在类中，使用
constructor
方法，而不是
Coordinates（）{}
@SebastianSimon
xy
是在前面定义的drawGraph@DragosStrugar我这样做了，但它仍然给出错误
TypeError:xy同时未定义line@DragosStrugar是的，但是仅仅声明是不够的。声明和调用也需要移动。
drawGraph
在调用
xy
之前被调用已定义，但
drawGraph
使用
xy
。请使用
var xy=new Coordinates（）；
而不仅仅是
xy=…
。然后在类中，使用
构造函数
方法，而不是
Coordinates（）{}
@SebastianSimon
xy
是在前面定义的drawGraph@DragosStrugar我这样做了，但它仍然给出错误
TypeError:xy同时未定义line@DragosStrugar是的，但是仅仅声明是不够的。声明和调用也需要移动。我可以以某种方式声明
originX
，
originY吗
和
mag
在函数外部？是的，将其添加到全局范围（在
class
声明之前）我可以以某种方式声明
originX
、
originY
和
mag
在函数外部吗？是的，将其添加到全局范围（在
class
声明之前）