添加projectiles.push代码后Projectile对象存储值异常的原因

Great question—this is a classic gotcha with browser developer tools, not an issue with your core code logic! Let me break down exactly what's happening:

The Root Cause: Console's Lazy Evaluation of Reference Types #

When you run console.log(newProj) or console.log(proj), your browser doesn’t immediately take a full snapshot of the object’s current state. Instead, it just stores a reference to the object in memory. When you later click to expand the object in the console, the browser goes back to the actual object and reads its current properties—not the values it had when you called console.log.

In your case, after pushing newProj into the projectiles array, it’s almost certainly that some other code (like an animation loop updating your projectiles’ positions, which you haven’t included here) is modifying the Vec objects inside the Projectile. By the time you expand the logged object in the console, those values have already changed, making it look like the log was wrong all along.

Even when you use fixed parameters like computeProjectile(12,10,50,50), if that animation loop is running, it will keep modifying the object’s properties after the log runs—hence the inconsistent values every time you check.

How to Verify This #

To see the actual value of the object at the moment you log it, convert it to a JSON string (which captures an immediate snapshot of the current state):

// In handleMouseUp
console.log('newProj snapshot', JSON.stringify(newProj));

// In computeProjectile
console.log('proj snapshot', JSON.stringify(proj));

You’ll see the correct, expected values here, because JSON.stringify reads the object’s properties right when it’s called.

Fixing Potential Underlying Issues #

While the console behavior is the main culprit, you should also double-check your Vec class methods to make sure they’re not modifying original objects by accident. For example, if your Vec.minus method looks like this:

static minus(a, b) {
  // ❌ Modifies the original 'a' object (side effect!)
  a.x -= b.x;
  a.y -= b.y;
  return a;
}

This would alter the original endVec you created in computeProjectile, which would affect the deltaVec stored in your Projectile. Instead, make it a pure function that returns a new Vec:

static minus(a, b) {
  // ✅ Returns a new Vec without modifying originals
  return new Vec(a.x - b.x, a.y - b.y);
}

This ensures that your initial startVec and deltaVec stay unchanged unless you intentionally modify them later.

Recap #

• The "changed" logged values are just the console showing you the object’s current state when you expand it, not when you logged it.
• Use JSON.stringify to see the true state at the exact moment of the log.
• Ensure your Vec methods don’t mutate original objects to avoid unintended side effects.

内容的提问来源于stack exchange，提问作者zoravur