JavaScript 提升机制详解：变量与函数的执行顺序

正文

在许多编程语言中，代码的执行过程是逐行解释执行的，这被称为代码解释模式。

而在另一些语言中，翻译工作在执行前已完成，称为代码编译模式，程序直接运行预先编译好的指令。

JavaScript 常被归类为解释型语言，因为每次运行源码时都需要进行处理。然而，这种说法并不完全准确。实际上，JavaScript 引擎采用动态编译策略：先编译代码，随后立即执行编译后的结果。变量和函数的提升现象，正是源于编译阶段编译器所执行的操作。

在提升过程中，尽管代码书写顺序看似未变，但函数和变量的声明在编译阶段已被提取并添加到内存中。

一.变量提升

对于变量和常量，关键字 var 声明会被提升，而 let 和 const 声明则不会发生提升。

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

在上述示例中，变量 a 在声明之前被使用。程序运行后输出结果为 5。该程序的实际执行逻辑如下：

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

然而，在 JavaScript 中，变量的初始化操作并不会被提升。

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

上述程序的实际执行逻辑如下：

var a;
console.log(a);
a = 5;

在编译阶段，只有变量的声明部分被移动到内存中。因此，当打印变量 a 时，其值为 undefined，因为此时 a 尚未初始化。需要注意的是，如果变量在函数内部使用，其提升范围仅限于该函数的顶部。

var a = 4;
function greet() {
    b = 'hello';
    console.log(b); 
    var b;
}
greet(); // hello
console.log(b);//Uncaught ReferenceError: b is not defined

如果使用 let 或 const 关键字声明变量，则该变量不会发生提升。

a = 5;
console.log(a);// error
let a; 

换个角度理解，使用 let 或 const 声明的变量会被提升至暂时性死区（TDZ）。只有当程序执行流到达该变量的 let 或 const 声明语句时，变量才会从 TDZ 中释放出来。

二.函数提升

由于函数声明和变量声明都会发生提升，且函数声明的优先级高于变量声明，因此后续的函数声明会覆盖前面的同名声明。

代码示例：

foo();
var foo;
function foo(){
	console.log(1);
}
foo = function(){
	console.log(2);
};

最终输出结果为 1。这是因为函数声明会被提升，而函数表达式不会被提升。这段代码可以理解为：

function foo(){
	console.log(1);
}
foo();
foo = function(){
	console.log(2);
};

三.判断顺序

当执行函数中的第一行代码时，如何确定该函数的词法作用域中包含哪些变量及其含义？判断步骤如下：

• 将参数列表中的参数作为变量标识符存入作用域，初始值为 undefined；
• 将传入的实际参数值赋给对应的参数列表标识符；
• 执行函数提升；若作用域中已存在与函数名同名的标识符，则该函数声明取代该标识符的值；
• 执行 var 提升；若作用域中已存在同名标识符，则不做任何改变；否则在作用域中添加该标识符，并赋予值 undefined；
• 执行第一行代码。

四.其他“提升”

1.作为 import 结果的声明是“提升的”；

foo();
import { foo } from "foo";

上述代码中，foo() 可以正常执行。这不仅是因为 import... 语句的静态决议在编译过程中确定了 foo 的值，还因为它在模块作用域的顶层“提升”了该声明，使其在模块的任何位置均可用。

以上就是 JS 中的提升机制变量提升函数提升实例详解的详细内容，更多关于 JS 变量提升函数提升的资料请关注本站其它相关文章！