本文深入解析 JavaScript 中变量提升与函数提升的核心机制。在 ES6 之前，JS 仅存在全局和函数作用域。变量声明会被提升至作用域顶部，而函数声明则整体提升。通过代码执行顺序的对比分析，阐明 console.log 输出 undefined 或函数引用的原因，帮助开发者理解代码预编译阶段的行为。
变量提升机制
一、变量提升
在 ES6 标准引入之前，JavaScript 语言并不支持块级作用域（即由一对花括号 {} 包裹的区域），仅具备全局作用域和函数作用域两种作用域类型。变量提升是指将变量的声明操作移动到其所在作用域的最顶端执行的行为。
参考以下示例：
console.log(global); // undefined
var global = 'global';
console.log(global); // global
function fn () {
console.log(a); // undefined
var a = 'aaa';
console.log(a); // aaa
}
fn();
产生上述打印结果的原因在于 JavaScript 的变量提升机制。实际上，上述代码在引擎内部的执行顺序如下：
var global; // 变量提升，全局作用域范围内，此时只是声明，并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // 打印出global
function fn () {
var a; // 变量提升，函数作用域范围内
console.log(a);
a = 'aaa';
console.log(a);
}
fn();
函数提升机制
二、函数提升
在 JavaScript 中，定义函数主要有两种方式：函数声明式和函数字面量式。需要注意的是，只有函数声明式才会发生函数提升。示例如下：
console.log(f1); // function f1() {}
console.log(f2); // undefined
function f1() {}
var f2 = function() {}之所以出现上述打印结果，是因为 JavaScript 的函数提升机制导致代码实际执行顺序如下：
function f1() {} // 函数提升，整个代码块提升到文件的最开始<br>console.log(f1);
console.log(f2);
var f2 = function() {}总结：基本内容即如上所述。若要熟练掌握这一概念，建议进行大量相关练习进行测试：
console.log(f1());
console.log(f2);
function f1() {console.log('aa')}
var f2 = function() {}
(function() {
console.log(a);
a = 'aaa';
var a = 'bbb';
console.log(a);
})();以上关于 JavaScript 变量提升和函数提升的详解内容分享完毕，希望能对读者有所帮助，也欢迎大家继续支持本站。