JavaScript 变量和函数提升问题总结
程序员文章站
2022-09-26 17:14:31
一 什么是JavaScript 变量提升？ -- JS程序运行时， （a）变量的声明会被解释器"提升"到方法体内的顶部，初始化赋值操作不提升按顺序执行 （b）函数体内未声明的变量，解释器会在函数体外声明变量，成为全局变量 （c）声明过的函数，整个函数体会被解释器提升到方法体的顶部，初始化赋值操作按顺 ......
一 什么是JavaScript 变量提升？
-- JS程序运行时，
（a）变量的声明会被解释器"提升"到方法体内的顶部，初始化赋值操作不提升按顺序执行
（b）函数体内未声明的变量，解释器会在函数体外声明变量，成为全局变量
（c）声明过的函数，整个函数体会被解释器提升到方法体的顶部，初始化赋值操作按顺序执行
1-1 变量提升
eg：变量的声明提升，初始化赋值不提升。
<script>
console.log(a); // undefined
var a=3; // 若没有var声明，会报错 a is not defined
console.log(a); // 3
function fn() {
console.log(a); // undefined
var a = 'a'; //此a为局部变量，没有这一句上下输出的结果都变为3
console.log(a); // a
}
fn();
console.log(a); // 3
</script>
上述代码相当如下：
<body>
<script>
var a;
console.log(a); // undefined
a=3; // 若没有var声明，会报错 a is not defined
console.log(a); // 3
function fn() {
var a;
console.log(a); // undefined
a = 'a'; //没有这一句上下输出的结果都变为3
console.log(a); // a
}
fn();
console.log(a); // 3
</script>
</body>
对比改掉函数中a的var声明
<script>
console.log(a); // undefined
var a=3; // 若没有var声明，会报错 a is not defined
console.log(a); // 3
function fn() {
console.log(a); //变成了 3
a = 'a'; //此a变成全局变量，没有这一句上下输出的结果都变为3
console.log(a); // a
}
fn();
console.log(a); //变成了 a
</script>
上述代码相当如下：
<script>
console.log(a); // undefined
var a=3; // 若没有var声明，会报错 a is not defined
console.log(a); // 3
var a;
function fn() {
console.log(a); // 3
a = 'a'; //没有这一句上下输出的结果都变为3
console.log(a); // a
}
fn();
console.log(a); // a
</script>
ps：所以为避免调用函数后，可能修改了外部的变量，函数内的变量都要声明初始化，规范化。
1-2 函数提升
eg：声明式函数将整个函数体提升到顶部，字面量式函数只提升声明过的变量
<script>
console.log(f1); //function f1() {}
console.log(f2); //undefined
function f1() {}
var f2 = function () {}; //若没有var声明，上面结果报错f2 is not defined
console.log(f2); //function () {}
</script>
上述代码相当如下：
<script>
function f1() {} //提前
var f2; //提前
console.log(f1); //function f1() {}
console.log(f2); //undefined
f2 = function () {}; //若没有var声明，上面结果报错f2 is not defined
console.log(f2); //function () {}
</script>
ps：为避免出现一些意料不到的变量提升的错误，在每一个变量的作用域开始之前，声明并初始化变量，留意函数体中未声明的变量自动变成全局变量后，导致的种种情况
上一篇： Vue.js 相关知识（动画）