JavaScript中为何循环外的var变量会被循环内的var变量修改？

是的，你完全猜对了——循环内外的var total本质就是同一个变量，问题根源就是var的变量提升特性，以及它没有块级作用域。

核心原因拆解： #

• 变量提升：所有用var声明的变量，会被JS引擎提前到当前作用域的最顶部。不管你把var total写在循环内还是循环外，引擎都会先完成这个变量的声明，不会因为位置不同创建新变量。
• 无块级作用域：for循环的花括号{}不会形成独立的作用域，所以循环内的var total和外部的var total都属于同一个作用域（这里是全局作用域）。

代码实际执行逻辑： #

你的代码会被JS引擎解析成这样（变量提升后的等效代码）：

// 先提升所有var变量的声明
var numbers;
var total;
var i;

// 再执行赋值和循环逻辑
numbers = [10, 15, 20, 35];
total = 0;

for (i = 0; i < numbers.length; i++) {
  // 这里的var total已经被提升过，只是重复赋值，不会创建新变量
  total = total + numbers[i];
}

console.log(total);

循环里的var total属于无效的重复声明——JS允许用var重复声明同一变量，但不会生成新的内存空间，只是对原有变量重新赋值。

实现独立变量的方法： #

如果想让循环内的total成为独立变量，改用ES6的let（有块级作用域）即可：

var numbers = [10, 15, 20, 35];
var total = 0;

for (var i = 0; i < numbers.length; i++) {
  let total = total + numbers[i]; // 此total是循环块内的独立变量
  console.log(total); // 依次输出10、25、45、80
}

console.log(total); // 外部total仍为0

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