如何更改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++; 
} 

我試圖移動它，將它無論是在平局（）和ball.draw（）函數，但仍然得到同樣的結果，我也嘗試做一個fillRect而不是清除，但它沒有幫助。 任何人都能看到最新的錯誤？

Answer 1

其實你的變量radius，X和Y變量是所有的全局變量「到目前爲止，我只有在我定義X作爲一個全局變量已經能夠做到這一點。」對他們來說，是他們需要設置對象的屬性如下：

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

他們可不是Ball()函數中的局部變量，因爲他們沒有與var聲明 - 你值賦給變量的任何沒有宣佈他們與var自動成爲全球。

var ball = new Ball(); 

如果用new叫它然後JS會自動創建一個新的：爲了能這樣做，你需要使用new -

，當你把它叫做你Ball()功能不創建對象實例的Ball並且在函數this內引用該新實例。因此，功能應該說：

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

但是這並不真正適合用，因爲你是你的結構代碼的方式：

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(); 
} 

然後，您可以通過以下方式訪問和更改屬性試圖撥打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;。然後，當你實例球，你可以做

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，以便該屬性不會是全局的。