JavaScript：引用调用与直接调用方法的差异及输出异常解惑

嘿，这种情况大概率是隐式全局变量与局部变量的作用域冲突导致的——哪怕你去掉了var，JavaScript的作用域规则还是可能让你的赋值操作没有作用到预期的变量上。我给你拆解最常见的场景：

典型场景：隐式全局变量未修改目标局部变量 #

假设你的代码结构类似这样：

function test() {
  // 局部作用域的变量
  let x = 10;

  function inner() {
    // 去掉var后，这里的x会被当作隐式全局变量（挂载到window/global对象）
    x = 20;
  }

  inner();
  // 这里打印的是test作用域内的局部x，而非全局x
  console.log(x); // 输出10
}
test();
// 如果你打印全局x，会发现它是20
// console.log(x); // 输出20

原因解析： #

当你在inner函数里写x = 20时，因为没有用let/const/var声明变量，JavaScript会沿着作用域链向上查找x：

1. 首先查找inner函数的局部作用域，找不到x；
2. 接着查找外层的test函数作用域，虽然这里有let x = 10，但**let/const声明的变量不会被挂载到全局对象，也不会被隐式赋值覆盖**；
3. 最终JavaScript会在全局作用域创建一个新的x变量，并赋值为20。

而你console.log(x)的位置是在test函数的局部作用域，这里的x是一开始声明的10，自然输出10。

其他可能的场景 #

• 变量提升残留：如果你之前的代码里有var x在某个块级作用域（比如if/for），哪怕你去掉了var，如果后续有同名的let/const声明，可能会出现意外的作用域绑定；
• 重复变量声明：如果在代码的其他位置（比如外层作用域）有同名变量，你的赋值可能不小心修改了另一个变量。

解决方案 #

要让赋值作用到目标变量上，你需要明确指定作用域：

1. 如果要修改局部变量，确保在赋值前该变量已经在当前或外层作用域用let/const声明，并且赋值时没有创建新的隐式全局变量：

function test() {
  let x = 10;

  function inner() {
    // 明确引用外层的x，或者用闭包确保作用域
    x = 20;
  }

  inner();
  console.log(x); // 输出20
}
test();

2. 避免隐式全局变量：始终用let/const声明变量，不要省略声明关键字——这是JavaScript开发的最佳实践，能避免绝大多数作用域问题。

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