1、变量提升
变量提升是JavaScript 中比较“奇怪”的现象,它允许在变量声明之前即被访问 (仅存在于var声明变量)
注意:
1.变量在未声明即被访问时会报语法错误
2.变量在var声明之前即被访问,变量的值为 undefined
3.let/const声明的变量不存在变量提升
4.变量提升出现在相同作用域当中
5.实际开发中推荐先声明再访问变量
变量提升核心:
代码在执行之前,先去检测当前作用域下所有var声明的变量
并把var声明的变量,提升到当前作用域的最前面。
只提升变量,不提升赋值。
<script>
console.log(num+"件");
var num=10;
</script>
上面的代码,就相当于:
<script>
var num//只提升变量
console.log(num+"件");
num=10;//赋值不提升
</script>
又例如:
function fn() {
console.log(num + "件");
var num = 10;
}
fn();
function fn() {
var num//变量提上
console.log(num + "件");
num = 10;//赋值不提升
}
fn();
初学者经常花很多时间才能习惯变量提升,还经常出现一些意想不到的bug,正因为如此,ES6 引入了块级作用域用let 或者const声明变量,让代码写法更加规范和人性化。
2、函数提升
会把所有的函数声明到当前作用域的最前面
只提升函数声明,不提升函数调用
fn();
function fn() {
console.log('函数提升');
}
就相当于:
function fn() {
console.log('函数提升');
}
fn();
函数表达式必须先声明,再调用
fn();
var fn=function(){
console.log('函数表达式');
}
因为var fn=function(){
console.log(‘函数表达式’);
}
相当于赋值,可以理解成普通变量的赋值,
然后var 声明的变量会有变量提升。
即:
var fn
fn();
fn=function(){
console.log('函数表达式');
}
第二行的fn(); 相当于调用函数,但var fn不是一个函数