JavaScript 执行顺序 注意事项

1.var变量提升

var是ES5中用于定义变量的保留字。

 1 //1.正常情况
 2 var a = 3;
 3 console.log(a);
 4//输出结果：3
 5 
 6 //2.只调用
 7 console.log(a);
 8 //输出结果：Uncaught ReferenceError: a is not defined
 9 
10 //3.先调用，后定义
11 console.log(a);
12 var a = 3;
13 //输出结果：undefined

第3种情况，JS会有一个预编译的过程。实际的过程可以写成下面的代码。这就是var变量的提升。

1 var a;//编译阶段词法作用域
2 console.log(a);
3 a = 3;//赋值操是在代码执行阶段进行。

 

2. let const 的“暂时性死区（TDZ）”

let声明的变量和var声明变量十分相似，但是let不会提升变量，会存在TDZ。

• 不存在变量提升，拥有一个暂时性死区

//请在声明之后，使用之前赋值
a = 2;//Uncaught ReferenceError: a is not defined
console.log(a);//Uncaught ReferenceError: a is not defined
let a;
console.log(a);//Uncaught ReferenceError: a is not defined
a = 3;

• 不能重复声明

let a;
var a;//Uncaught SyntaxError: Identifier 'a' has already been declared
let a;//Uncaught SyntaxError: Identifier 'a' has already been declared

• 块级作用域，会强行绑定在这个区域

//案例一
var a = 10;
if(true){
    let a = 1; //块级作用域，let会强行绑定在这个区域
    console.log(a);//1
}
console.log(a);//10

//案例二
var a = 10;
if(true){
    var a = 1; //块级作用域，var只会修改变量的值不会产生死区
    console.log(a);//1
}
console.log(a);//1

 

const声明的常量和let非常类似，唯一区别就是const不允许修改变量值，并且初始化的时候就要赋值。常量变量名请大写。

const MAX = 99;
MAX = 100;//Uncaught TypeError: Assignment to constant variable.

• 不存在变量提升，拥有一个暂时性死区

• 不能重复申明

• 是块级作用域，会强行绑定在这个区域

3. 函数声明和函数表达式

function函数是一种特殊的变量，也拥有作用域，变量名，变量提升。

foo();
function foo(){//foo变量提升，先声明再执行
    console.log("foo执行！");
}

与var的关系：函数是JavaScript的第一等公民，所以优先级很高(最高)

console.log(foo);//ƒ foo(){console.log(1)}
function foo(){
    console.log(1);
}
var foo = 2;
console.log(foo);//代码执行顺序被强行修改成了数值类型

var和function同为变量声明，同有变量提升，但是function是第一等公民，优先级高，所以通过var和function声明的变量只有function的生效。

if(true){
    console.log(foo);//undefined，此时foo变量声明了但是没有赋值。
}else{
    function foo(){
        console.log(1);
    }
}