谈谈 JavaScript中var, let, const 的区别

1. 变量定义都有谁

        es6之前：var

        es6: let、const

2. 变量定义解释：

       ！！！此代码为了省事，所以都没有注释，在测试前做好注释，逐一测试。

// ------ 特殊的 var 

/** 作用域
 * var 函数作用域
 * let 块级作用域
 * const 块级作用域
 */

// ---- var 的函数作用域
function scope () {  
    scopeVar = 'name' // 如果不用var 声明，那么 scopeVar 默认是全局作用域(项目开发不建议这么写，不好维护)
    console.log(scopeVar); // name 
}
scope()
console.log(scopeVar);  // name

function scope1 () {
    var scopeVar = 'name'
    console.log(scopeVar); // name (在函数作用域内打印正确)
}
scope1()
console.log(scopeVar);  // Uncaught ReferenceError: scopeVar is not defined (错误原因是应为函数结束后会销毁 var 定义的变量, 这个也从侧面说明了 var 的函数作用域。如果 var 是全局作用域，这边应该是)


// ------ var let const 作用域对比 --------------
// -- var (函数作用域)
if(true){
    var message_var = 'message_var'
    console.log(message_var); // message_var
}
console.log(message_var); // message_var (这里 可以吧 window 当做一个函数，所以他将 message_var 声明到了最上层)

// -- let 
if(true){
    let message_let = 'message_var'
    console.log(message_let); // message_var
}
console.log(message_let); // index.js:40 Uncaught ReferenceError: message_let is not defined (这个证实了 let 是块级作用域， 只作用于if 块里面)

// -- const 
if(true){
    const message_const = 'message_const'
    console.log(message_const); // message_const
}
console.log(message_const); // index.js:45 Uncaught ReferenceError: message_const is not defined (这个证实了 const 是块级作用域， 只作用于if 块里面)



/**
 * 变量提升
 * var 可以
 * let && const 不可以
 */

// // -- var 
console.log(hoist_var); // undefined (这个是在执行上下文时，识别了 var 关键字然后被提升到当前作用域顶层并设初始值：undefined)
var hoist_var = 'hoist_var'
console.log(hoist_var); // hoist_var

// // -- let 
console.log(hoist_let); // Uncaught ReferenceError: Cannot access 'hoist_let' before initialization
var hoist_let = 'hoist_let'; //(因为变量不能提升，所以报错)
console.log(hoist_let); // 因为报错所以不打印

// -- const 
console.log(hoist_const);
const hoist_const = 'hoist_const'; // index.js:64 Uncaught ReferenceError: Cannot access 'hoist_const' before initialization (因为变量不能提升，所以报错)
console.log(hoist_const); // 因为报错所以不打印


/**
 * 赋值操作
 * var: 定义变量，且可重复定义，可以更改
 * let: 定义变量，且不可重复定义，可以更改
 * const: 定义常量，且不可重复定义，不可以更改
 */

// -- var 
var mesVar = '222';
mesVar = '333';
console.log(mesVar); // 333 (可以改)
var mesVar = '444';
console.log(mesVar); // 444 (可以重复定义)

// -- let 
let mesLet = '222';
mesLet = '333';
console.log(mesLet); // 333 (可以改)
let mesLet = '444';
console.log(mesLet); // Uncaught SyntaxError: Identifier 'mesLet' has already been declared (不可以重复定义)

// -- const (定义的那个东西不可以改，1.  如果定义基本类型，就是定义的值。2. 如果定义的是复杂类型，那么定义的就是地址，地址不可以改，地址里面的数据可以改)
const mesConst = '222'
mesConst = '333'
console.log(mesConst); // index.js:94 Uncaught TypeError: Assignment to constant variable.(不可以更改)

const obj = {name: '小红'}
obj.age = 13;
console.log(obj); // {name: '小红', age: 13} 
obj = [];
console.log(obj); // TypeError: Assignment to constant variable.


/**
 * 使用规范
 * 1. 不建议使用 var
 *  - 有了 let 和 const，大多数开发者会发现自己不再需要 var 了。限制自己只使用 let 和 const有助于提升代码质量，因为变量有了明确的作用域、声明位置，以及不变的值
 * 2. const 优先，let 次之
 *  - 使用 const 声明可以让浏览器运行时强制保持变量不变，也可以让静态代码分析工具提前发现不合法的赋值操作。因此，很多开发者认为应该优先使用 const 来声明变量，只在提前知道未来会有修改时，再使用 let。这样可以让开发者更有信心地推断某些变量的值永远不会变，同时也能迅速发现因意外赋值导致的非预期行为。
 */