现代 JavaScript 开发中,var 已经基本被 let 和 const 取代。

1. 作用域(Scope)

var - 函数作用域

function testVar() {
    if (true) {
        var x = 10; // 函数作用域
        console.log('块内:', x); // 10
    }
    console.log('函数内:', x); // 10 - 变量提升到函数顶部
}
testVar();
console.log('全局:', typeof x); // undefined - 不在全局作用域

let/const - 块级作用域

function testLet() {
    if (true) {
        let x = 10; // 块级作用域
        const y = 20; // 块级作用域
        console.log('块内:', x, y); // 10 20
    }
    console.log('函数内:', typeof x, typeof y); // undefined undefined
}
testLet();

// 块级作用域示例
{
    let blockScoped = "只在块内有效";
    const constantValue = "常量";
    console.log(blockScoped); // 正常工作
}
// console.log(blockScoped); // ReferenceError
// console.log(constantValue); // ReferenceError

2. 变量提升(Hoisting)

var - 提升并初始化为 undefined

//先定义后赋值
console.log(a); // undefined - 变量提升
var a = 10;
console.log(a); // 10

// 实际执行顺序:
// var a;          // 提升,初始化为 undefined
// console.log(a); // undefined
// a = 10;         // 赋值
// console.log(a); // 10

let/const - 提升但不初始化(暂时性死区)

// console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

// console.log(c); // ReferenceError: Cannot access 'c' before initialization  
const c = 30;
console.log(c); // 30

// 暂时性死区(Temporal Dead Zone)
function temporalDeadZone() {
    console.log('进入函数');
    // 这里开始到 let 声明之间是暂时性死区
    // console.log(value); // ReferenceError
    let value = 100;
    console.log(value); // 100
}

3. 重复声明

var - 允许重复声明

var x = 10;
console.log(x); // 10

var x = 20; // 允许重复声明
console.log(x); // 20

var x; // 再次声明,值不变
console.log(x); // 20

let/const - 不允许重复声明

let y = 10;
// let y = 20; // SyntaxError: Identifier 'y' has already been declared

const z = 30;
// const z = 40; // SyntaxError: Identifier 'z' has already been declared

// 在不同作用域中可以重复声明
{
    let y = 100; // 不同的块级作用域
    console.log(y); // 100
}
console.log(y); // 10

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐