JavaScript中var、let和const的区别与应用具体代码示例

// 早期的JS 就用来页面交互，有一些缺失甚至设计不合理的地方
// 语言精粹， The Good Parts, The Bad Parts
// es5 只有var 声明变量，没有常量
var age = 18; // js 弱类型，由值决定
age++;
var PI = 3.1415926; // 变量大写 约定就不应该改变 编程习惯
console.log(age);

// var age=18;// undefined
// age = 18; // 赋值
// JS 脚本语言，它的编译阶段和执行阶段不像Java/C++ 一样分开的那么清晰
// 编译阶段有，就在代码执行之前的一霎那，var 就变量提升了
// 接下来代码进入执行阶段
// 变量提升 不利于代码的可读性，应该废弃的糟粕

{   // 块级作用域
    var age=18; // 不支持块级作用域
    let height = 188; // 支持块级作用域 最大型项目或高级语言的核心
}

console.log(age); // 输出18，var声明的变量在块级作用域外仍可访问
console.log(height); // 报错：ReferenceError: height is not defined

// 暂时性死区
// 在编译阶段的变量提升是为了编译阶段就知道有哪些变量和常量
// let/const + 暂时性死区 解决了变量提升的问题
let height=188;

const PI = 3.1415926;
const person={
    name: "nwk",
    age: 20
}
// person = 'hahaha'; // 报错：TypeError: Assignment to constant variable
person.age=21; // 允许修改对象属性
console.log(person); // 输出：{ name: 'nwk', age: 21 }

const wes = Object.freeze(person); // 冻结对象
console.log(wes);
wes.age = 17; // 尝试修改冻结对象的属性，不会生效也不会报错
console.log(wes); // 输出：{ name: 'nwk', age: 21 }

// js 中函数是一等公民，编译阶段就会进行函数提升
// 和var 相同的地方都会提升，不同的地方在于var只会提升变量声明
// 而函数不只提升声明，连赋值也一起提升
setWidth(); // 可以在函数声明前调用，因为函数被完全提升

// 全局作用域
function setWidth(){
    // 函数作用域 局部
    var width=100;
    { // 块级作用域
        let a=1;
    }
    console.log(width); // 输出100
}

setWidth();
// console.log(width); // 报错：ReferenceError: width is not defined