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值。

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

修改由＆＃34; nnnnnn＆＃34;提供的解决方案工作到一定程度，它改变了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++;
}

Answer 2

在Ball功能中，使用this.X = 25;。然后，当您实例化Ball时，您可以执行

var ball = new Ball();
ball.X++;

此处有更多信息：OOP in JS, Part 1 : Public/Private Variables and Methods。

Answer 3

创建Ball类型的实例，使用其引用来修改实例变量。

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    var objBall = new Ball();
    objBall.X++
}

Answer 4

有几种方法可以做到这一点。首先，您可以通过在要在外部使用的变量的前面添加this关键字来使用构造函数方法。像这样：

function Ball(){
  this.radius = 5;
  this.Y = 20;
  this.X = 25; // The way you wanted.

  ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
  ctx.fillStyle = '#00ff00';
  ctx.fill();
}

//call it like this 
Ball.X;
Ball.Y;
Ball.radius;

//or inside an assigned variable which is instantiated with 'new' keyword:
var myVar = new Ball(); 
myVar.X;
myVar.Y;
myVar.radius;

或使用对象表示法，如下所示：

var Ball = {
  radius: 5,
  Y: 20,
  X: 25,

  someFunction: function() {
    //Even in here use 'this' to refer to any property of the object 'Ball', like this:
    var product = this.radius * this.X;

    return product + this.Y
  }

};

//call it also this way
Ball.X;

//or
Ball.radius;

//or
Ball.someFunction();

现在可以在任何地方使用它：

function update(){
  //Now you can use it anywhere
  var smallBall = new Ball();
  smallBall.X++;
}

因此，如果要在构造函数中创建属于对象的属性，请使用this，或者只使用对象表示法。您选择的技术取决于您希望在项目中执行的操作。此外，如果要隐藏对象中的任何属性（即变量，函数等），请使用var关键字，以使该属性不是全局属性。

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

4 个答案: