深入解析JavaScript变量作用域：一道经典面试题详解

这道题目对于深入理解JavaScript的作用域机制具有显著价值，作者在此重新梳理了解题思路，旨在为其他学习者提供参考。

JavaScript变量作用域基础回顾

首先，让我们来看具体的试题内容。

var arr = [1, 2, 3];
  for (var i = 0, j; j = arr[i++];) {
    console.log(j);
  }

  console.log('---------');
  console.log(i);
  console.log('---------');
  console.log(j);
  console.log('---------');

在解答题目之前，有必要回顾JavaScript中关于变量作用域的核心概念。

全局变量（Global）指的是可以在任何地方访问的变量，主要存在两种情况：一是在函数外部声明，无论是否使用var关键字；二是在函数内部声明且不使用var关键字，但前提是声明语句必须被执行。局部变量（Local）则仅限于在声明它的函数内部被访问，通常是在函数内部使用var关键字声明。

在 function 外部声明变量，无论是否使用 var 关键字 在 function 内部声明变量，若不使用 var 关键字，需确保声明语句被执行方可生效 局部变量 (Local) 局部变量仅能在其被声明的 function 内部访问 在 function 内部声明变量，若使用 var 关键字 需注意的两个要点

接下来通过具体代码进行演示。

alert(i); // 输出 undefined
 
 for (var i = 0; i < 1; i++){};
 
 alert(i); // 输出1

for循环中的变量提升与执行细节

JavaScript中没有语句级别的作用域，在语句内部定义的变量会“泄漏”到外部。例如，变量i虽然在for循环语句中声明，但在循环外部依然可以访问。需要注意的是，在for循环执行前，i已经存在但尚未被赋值。

这里的关键在于i++的执行时机：它是在使用i的值之后才进行自增操作。

第一次循环执行时，j被赋值为arr[0]（即1），随后i变为1，此时console.log(j)输出1。

第二次循环执行时，j被赋值为arr[1]（即2），随后i变为2，console.log(j)输出2。

第三次循环执行时，j被赋值为arr[2]（即3），随后i变为3，console.log(j)输出3。

第四次尝试执行时，由于i=3，arr[3]为undefined，导致j=undefined。此时i变为4，不满足for循环条件，console.log(j)不再执行，循环退出。

for循环执行结束后，根据上述分析，console.log(i)将输出4，而console.log(j)将输出undefined。

最终的控制台输出结果如下所示。

2
---------
---------
undefined
---------

经典面试题变体解析

基于上述分析和结果，相信大家对作用域有了更清晰的认识。接下来，我们通过变体题目进行举一反三的练习。

变体题目一： 题目： var arr = [1, 2, 3];

  for (var i = 0, j; j = arr[++i];) {
    console.log(j);
  }

  console.log('---------');
  console.log(i);
  console.log('---------');
  console.log(j);
  console.log('---------');

答案：

2
3
---------
3
---------
undefined
---------

变体题目二： 题目：

function xxx() {
    var arr = [1, 2, 3];
    for (var i = 0, j; j = arr[i++];) {
      console.log(j);
    }
  }
  xxx();

  console.log('---------');
  console.log(i);
  console.log('---------');
  console.log(j);
  console.log('---------');

答案：

1
2
3
---------
报错：Uncaught ReferenceError: i is not defined

以上就是本次分享的内容，希望这能帮助大家更好地理解JavaScript的作用域机制。