var,let,const的区别

var 的核心特性

作用域：函数作用域 或 全局作用域

变量提升：声明被提升，初始化为undefined

重复声明：允许

可变性：可以重新赋值

var 的痛点

1.变量的提升

• 在声明前访问，不报错，值为undefined
• 违反编码直觉，易导致bug

2.缺乏块级作用域

• if 块内的变量会”泄露“到外部
• for循环中的变量会”泄露“到外部

function varExample() {
    console.log(a); // 提升，值为undefined
    
    var a = 10；
    console.log(a); // 赋值后，值为10
    
    if (true) {
        var a = 20; // 覆盖了外层的a
        console.log(a); // 输出为 20
    }
    console.log(a); // 值被if块修改，输出20
}

ES6的解决方案

let&const

let：新一代声明变量

• 作用域：块级作用域({…})

• 暂时性死区(TDZ):声明前无法访问

• 重复声明：同一作用域内不允许

• 可变性：可以重新赋值

function letExample() {
    // console.log(b); // ReferenceError：TDZ
    
    let b = 10；
    console.log(b); // 输出 10
    
    if (true) {
        let b = 20; // 这是if块内的新变量
        console.log(b); // 输出 20
    }
    console.log(b); // 不受if影响，输出10
}

const：声明即永恒

• 作用域：块级作用域({…})
• 暂时性死区(TDZ)：声明前无法访问
• 可变性：不能重新赋值
• 核心：保证变量引用的不变性

基本用法

function constExample() {
    const c = 30;
    // c = 40; // TypeError!
}

const与引用类型

允许修改内部,不允许修改指针指向

const obj = {name： 'React'};
// fragment
// 修改对象内部的属性？ -> 允许！
obj.name = 'Vue';
console.log(boj.name); // 'Vue'

// fragment
// 将 obj 指向一个新对象？ -> 不允许！
obj = {}；// TypeError！

关键概念

关键点1：暂时性死区（TDZ）

• 适用于let和const
• 区域：从作用域{开始，到声明let/const…结束}
• 行为：在此区域内访问变量，抛出ReferenceError

关键点2：全局对象

• var：在全局作用域声明，会成为window的属性

var globalVar = "I'm everywhere";
console.log(window.globalVar); // "I'm everywhere"

• let/const:不会成为widow的属性

let globalLet = "Scoped";
console.log(window.globalLet); // undefined

关键点3：开发最佳实践

1.优先使用const

• 增强代码可预测性，避免意外修改

2.当变量需要重新赋值时，使用let

• 例如：循环计数器，状态切换

3.告别var

• 在现代JS项目中，应避免使用var

请谈谈var，let，const的区别

回答：

1.作用域规则不同

• var：函数作用域
• let/const：块级作用域（{…}）
  • 解决了var在if/for中变量泄露的问题

2.提升与TDZ（暂时性死区）

• var：变量提升
  • 声明前可访问，值为undefined
• let/const：存在暂时性死区（TDZ）
  • 声明前访问，直接抛出ReferenceError

3.赋值与声明

• var：可重复声明，可重新赋值
• let：不可重复声明，可重新赋值
• const： 不可重新声明，不可重新赋值
  • 解释const对引用类型（对象/数组）的含义

核心总结

• 块级作用域

  let和const提供了更可靠的变量隔离

• 暂时性死区（TDZ）

  let和const让变量访问更安全，更符合直觉

• 优先const

  默认使用const，仅在需要重新赋值时改用let