JavaScript 执行顺序 注意事项

本文详细探讨了JavaScript中的变量提升概念,包括var、let和const的不同行为,以及它们在块级作用域中的表现。同时,分析了函数声明与函数表达式的变量提升特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.var变量提升

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

//1.正常情况
var a = 3;
console.log(a);
//输出结果:3

//2.只调用
console.log(a);
//输出结果:Uncaught ReferenceError: a is not defined

//3.先调用,后定义
console.log(a);
var a = 3;
//输出结果:undefined

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

var a;//编译阶段词法作用域
console.log(a);
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);
    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值