JavaScript运行过程中的“预编译阶段”和“执行阶段”

JavaScript代码的运行分为两个阶段：预编译阶段和执行阶段。在预编译阶段，JavaScript引擎会进行一些预处理操作，包括变量声明、函数声明、变量提升等。执行阶段则是按照预处理结果进行实际代码的执行。

预编译阶段

变量声明

在预编译阶段，JavaScript引擎会将代码中所有的变量声明存储到作用域中。例如：

console.log(a); // undefined
var a = 1;

对于以上代码，在预编译阶段，JavaScript引擎会将变量a声明并存储到全局作用域中。在执行阶段，代码console.log(a)会被执行，此时变量a的值是undefined。

函数声明

在预编译阶段，JavaScript引擎会将代码中所有的函数声明存储到作用域中。例如：

foo();
function foo() {
  console.log('hello');
}

对于以上代码，在预编译阶段，JavaScript引擎会将函数foo声明并存储到全局作用域中。在执行阶段，代码foo()会被执行，输出hello。

执行阶段

在执行阶段，JavaScript引擎会按照预处理结果进行实际代码的执行。例如：

var a = 1;
console.log(a); // 1

foo();
function foo() {
  console.log('hello');
}

在执行阶段，变量a的值为1，代码console.log(a)会输出1。函数foo在预处理阶段已经声明，因此在执行阶段代码foo()会输出hello。

示例

示例1：变量提升问题

console.log(a); // undefined
var a = 1;

在执行阶段，变量a的值是undefined，因此代码console.log(a)会输出undefined。

示例2：变量和函数名同名问题

var foo = 'hello';
function foo() {
  console.log('world');
}
console.log(foo); // 'hello'

在预处理阶段，变量foo和函数foo都会存储到全局作用域中。同时，变量foo在赋值为'hello'。在执行阶段，代码console.log(foo)会输出hello，因为此时foo指向的是变量，而不是函数。