javascript - 如何在 Javascript 中更改函数内部变量的值？

Question

我正尝试在 Javascript 中做更多的 OOP。我无法弄清楚的一件事是如何从另一个函数修改对象内的变量？

我是这样尝试的:

function Ball(){
    radius = 5;
    Y = 20;
    X = 25; // The value i would like to change.
    ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
    ctx.fillStyle = '#00ff00';
    ctx.fill();
}

function draw(){
    Player();
    Ball();
}

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    Ball.X++;  // This is where i want to modify the value.

}

到目前为止，如果我将 X 定义为全局变量，我只能这样做，但我不想这样做，因为还有其他 X 和 Y 值。

那么我如何从函数外部访问变量呢？

编辑:“nnnnnn”提供的解决方案在一定程度上起作用，它改变了 X 值，但我遇到了另一个问题。我的 clearRect 不清除动画，所以它绘制的不是球，而是一条不断增长的线。

这就是代码现在的样子:

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25;
    this.draw = function() {
       ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
       ctx.fillStyle = '#00ff00';
       ctx.fill();
    };
}

var ball = new Ball();

function draw(){
    Player();
    ball.draw();
}


function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    ball.X++;
}

我试过移动它，将它同时放在 draw() 和 ball.draw() 函数中，但仍然得到相同的结果，我也尝试使用 fillRect 而不是 clear，但它没有帮助。任何人都能看出问题所在？

Answer 1

“到目前为止，如果我将 X 定义为全局变量，我只能做到这一点”

实际上你的变量radius、X和Y变量都是都是全局变量。要使它们成为对象的属性，需要按如下方式设置:

someObject.radius = 5;
// OR
someObject["radius"] = 5;

它们不是 Ball() 函数中的局部变量，因为它们不是用 var 声明的 - 任何您赋值但未声明它们的变量var 自动成为全局变量。

您的 Ball() 函数在您调用它时并未创建对象 - 为此您需要使用 new:

var ball = new Ball();

如果你用 new 调用它，那么 JS 会自动创建一个 Ball 的新实例，并在函数 this 指的是那个新实例。所以函数应该说:

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25; // The value i would like to change.
    ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
    ctx.fillStyle = '#00ff00';
    ctx.fill();
}

然后您可以按如下方式访问和更改属性:

var ball = new Ball();
alert(ball.X); // 25
ball.X++;

但是，这并不真正适合您构建代码的方式，因为您正试图调用 Ball() 使其自行绘制。您可能想要更像这样的东西:

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25;
    this.draw = function() {
       ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
       ctx.fillStyle = '#00ff00';
       ctx.fill();
    };
}

var ball = new Ball();

function draw(){
    Player();
    ball.draw();
}

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    ball.X++;
}