Обновление свойств JS-класса на основе других свойств?

Question

Я относительно новичок в Javascript, и я пытаюсь создать очень простой физический движок для проекта типа игры, над которым я работаю. Чтобы сделать это, я создал то, что, как я понимаю, эквивалент JS класса, который я могу создать новые копии для каждого объекта, который я хочу. Проблема в том, что я хочу иметь возможность обновлять такое значение, как позиция x, и также обновлять такие вещи, как x Средняя позиция (x центр объекта на экране). Я знаю, что это возможно, используя литерал объекта и getter, однако я хочу иметь возможность создавать новые объекты в реальном времени на основе того, что на экране, и я не мог понять, как использовать get, чтобы сделать эту работу. Вот общая идея о том, что я пытаюсь сделать:

var object = function (xPos, yPos, width, height) { 
    this.xPos = xPos; 
    this.yPos = yPos; 
    function getXMid (xP) { return xP + width/2; } 
    this.xMid = getXMid (this.xPos); 
    function getYMid (yP) { return yP + height/2; } 
    this.yMid = getYMid (this.yPos); 
} 

var ball = new object (10, 20, 50, 50); 
ball.xPos = 50; 
console.log (ball.xMid); // want this to output 75 instead of 45 

Answer 1

Вы меняете одно свойства, и ожидать другие свойства для обновления, к сожалению, она не работает таким образом, когда свойства имеют примитивные значения.

Вы можете использовать сеттер и методу получение и функцию для обновления других свойств при задании значения

var object = function(xPos, yPos, width, height) { 
 
    this._xPos = xPos; 
 
    this._yPos = yPos; 
 
    this.recalc = function() { 
 
    \t this.xMid = getXMid(this.xPos); 
 
     this.yMid = getYMid(this.yPos); 
 
    } 
 
    
 
    Object.defineProperty(this, 'xPos', { 
 
     get: function() { 
 
      return this._xPos; 
 
     }, 
 
     set: function(v) { 
 
     \t this._xPos = v; 
 
     \t this.recalc(); 
 
     } 
 
    }); 
 

 
\t Object.defineProperty(this, 'yPos', { 
 
     get: function() { 
 
      return this._yPos; 
 
     }, 
 
     set: function(v) { 
 
     \t this._yPos = v; 
 
     \t this.recalc(); 
 
     } 
 
    }); 
 
    
 
    function getXMid(xP) { return xP + width/2; } 
 
    
 
    function getYMid(yP) { return yP + height/2; } 
 
    
 
    this.recalc(); 
 
} 
 

 
var ball = new object(10, 20, 50, 50); 
 
ball.xPos = 50; 
 
console.log (ball.xMid); // want this to output 75 instead of 45