Как я могу изменить значения переменных внутри функций в Javascript?

Question

Я пытаюсь сделать больше ООП в Javascript.Одна вещь, которую я не могу понять, это как я могу изменить переменную внутри объекта из другой функции?

Вот как я пытался это сделать:

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++;
}

Answer 2

Создайте экземпляр типа Ball, используйте его ссылку для изменения переменных экземпляра.

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

Answer 3

Есть несколько способов сделать это.Сначала вы можете использовать путь конструктора, добавив ключевое слово 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, чтобы свойство не было глобальным.

Answer 4

Внутри функции Ball, используйте this.X = 25;.Затем, когда вы создаете экземпляр Ball, вы можете выполнить

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

Подробнее здесь: ООП в JS, часть 1: публичные / приватные переменные и методы .