JavaScript嵌套函数更新全局变量失效：while循环中move函数无法修改x、y的原因及修复

• JavaScript 基础类型参数按值传递：传入函数的是变量值的拷贝，而非变量本身的引用。move函数内部对形参x/y的所有修改，都仅作用于这个临时的局部拷贝，完全不会影响函数外的原始变量。
• 同名参数的作用域遮蔽：simulate和move的形参名和全局变量x/y完全重名，函数执行时会优先匹配局部形参，哪怕你尝试直接修改全局坐标，也会被局部形参的作用域挡住，找不到需要更新的全局变量。
• 上述两个问题共同作用，会导致while循环的判断条件永远基于初始的坐标值（x=10、y=7）成立，程序无法跳出循环，最终表现为move函数完全没有生效。

方案1：移除同名形参，直接同步更新全局坐标 #

直接删掉和全局变量重名的形参，让函数内部直接引用全局变量做修改，循环判断也直接读取全局变量的实时值，最小改动即可实现预期逻辑：

// 全局坐标初始化
let x = 10;
let y = 7;
const destX = 5;
const destY = 5;

function move() {
  // 无同名形参遮蔽，直接操作全局x/y
  if (x > destX) x--;
  if (x < destX) x++;
  if (y > destY) y--;
  if (y < destY) y++;
}

function simulate() {
  // 循环判断全局坐标是否抵达目标
  while (x !== destX || y !== destY) {
    move();
  }
  console.log('arrived');
}

// 触发执行
simulate();

方案2：函数返回新坐标，消除全局依赖（更推荐） #

避免全局变量污染，通过返回值在函数间传递坐标，从设计上消除作用域遮蔽、按值传递带来的问题，代码可维护性更强：

const initX = 10;
const initY = 7;
const destX = 5;
const destY = 5;

// 接收当前坐标，返回移动后的新坐标值
function move(currX, currY) {
  let newX = currX;
  let newY = currY;
  if (newX > destX) newX--;
  if (newX < destX) newX++;
  if (newY > destY) newY--;
  if (newY < destY) newY++;
  return [newX, newY];
}

function simulate(startX, startY) {
  // 用局部变量存当前坐标，避免作用域混乱
  let currX = startX;
  let currY = startY;
  while (currX !== destX || currY !== destY) {
    // 接收move返回的新坐标，更新局部状态
    [currX, currY] = move(currX, currY);
  }
  console.log('arrived');
}

// 触发执行
simulate(initX, initY);

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