Mise à jour des propriétés de JS "class" en fonction d'autres propriétés?

Question

Je suis relativement nouveau à Javascript et j'essaye de créer un moteur physique très simple pour un projet sur lequel je travaille. Pour ce faire, j'ai créé ce que je comprends être l'équivalent JS d'une classe que je peux créer de nouvelles copies de chaque objet que je veux. Le problème est que je veux être en mesure de mettre à jour une valeur telle que la position x et d'avoir aussi mettre à jour des choses telles que la position x central (x centre de l'objet sur l'écran). Je sais que cela est possible en utilisant un objet littéral et le getter, mais je veux être capable de créer de nouveaux objets en temps réel en fonction de ce qui est sur l'écran et je ne pouvais pas comprendre comment utiliser pour faire ce travail. Voici l'idée générale de ce que je suis en train de faire:

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

Vous changez une propriété, et attendre d'autres propriétés pour mettre à jour, malheureusement, il ne fonctionne pas de cette façon lorsque les propriétés ont des valeurs primitives.

Vous pouvez utiliser setters et getters et une fonction de mettre à jour les autres propriétés lorsque vous définissez une valeur

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