【JavaScript】ES6—let、const、var

---

• let、const是ES6新增的两种新的声明格式，用于补全ES5标准中var声明变量的不足。
• 在JavaScript中用’var’来声明变量会出现变量提升的情况，
• 通过"var"声明的变量系统都会把声明隐式的升至顶部，这样的特性往往会让刚接触JavaScript及习惯其他语言的开发人员不适应，导致程序出现问题。

---

作用域

全局变量—全局作用域：

• 在函数外部定义的变量(显式定义)
• 或在函数内部不用var定义的变量(隐式定义) 如果变量在当前作用域下不存在，会自动向上级作用域查找变量。
• 在浏览器页面关闭后才会销毁，比较占用内存资源

局部变量—函数作用域：

• 在函数内部利用var关键字定义的变量
• 在函数执行完成后销毁，比较节省内存资源

块级变量—块级作用域：

• ES6中使用let关键字在语句块中定义的变量
• 在语句块执行结束后销毁

函数内部块级作用域：
	function test() {
		let a = 20
	}
	test()
	console.log(a)


在字符{}之间的区域：
	{
		 let a = 10
	}
	console.log(a)
	for(let i=0;i<100;i++) {
		 let sum = 0;
         sum = sum+i
	 }

---

作用域链

• 当在一个函数内部声明另一个函数时，内层函数只能在外层函数作用域内执行。在内层函数执行的过程中，若需要引入某个变量，首先会在当前作用域中寻找，若未找到，则继续向上一层级的作用域中寻找，直到全局作用域。称这种链式的查询关系为作用域链。
• 决定了各级上下文中的代码在访问变量和函数时的顺序。
• 作用域链中的下一个变量对象来自包含上下文，再下一个对象来自下一个包含上下文。
• 全局上下文的变量对象始终是作用域的最后一个变量对象。

var color = "blue"; 
function changeColor() { 
    let anotherColor = "red"; 

    function swapColors() { 
        let tempColor = anotherColor; 
        anotherColor = color; 
        color = tempColor; 
        // 这里可以访问 color、anotherColor 和 tempColor 
    } 

    // 这里可以访问 color 和 anotherColor，但访问不到 tempColor 
    swapColors(); 

} 

// 这里只能访问 color 
changeColor(); 

---

const命令、冻结对象

• 使用const声明的是常量，常量的值不能通过重新赋值来改变，并且不能重新声明，所以每次通过const来声明的常量必须进行初始化。

• const在使用过程中如果声明的是对象,需要注意可以修改对象的属性值,但不允许修改已经声明的对象

const obj = {
    name: '张三',
    age: 20
}

// 属性值可以直接修改
obj.name = '李四';
console.log(obj); // { name: '李四', age: 20 }

// 直接修改对象会报错
obj = {};

• 如果想让对象属性不能修改,可以借助Object.freeze()函数来冻结对象

const obj = {
    name: '张三',
    age: 20
}

Object.freeze(obj);

obj.name = '李四';  // { name: '张三', age: 20 }
console.log(obj); 

• 通过Object.freeze冻结对象需要注意的是：不能冻结多层对象

const obj = {
    name: '张三',
    age: 20,
    family: {
        father: {
            name: '李四',
            age: 48
        }
    }
}

Object.freeze(obj);
obj.family.father.name = '小王'; // //family对象里的属性不能被冻结
// { name: '张三', age: 20, family: { father: { name: '小王', age: 48 } } }
console.log(obj);

• 实现多层冻结—可以通过封装一个deepFreeze函数通过递归来实现

// 函数 实现多层冻结
function deepFreeze(obj) {
    Object.freeze(obj);
    for(let key in obj) {
        if(obj.hasOwnProperty(key) && typeof obj[key] === 'object') {
            deepFreeze(obj[key])
        }
    }
}

const obj = {
    name: '张三',
    age: 20,
    family: {
        father: {
            name: '李四',
            age: 48
        }
    }
}

deepFreeze(obj);
obj.family.father.name = '小王'; // //family对象里的属性不能被冻结
// { name: '张三', age: 20, family: { father: { name: '李四', age: 48 } } }
console.log(obj);

---

临时死区

• let和const都是块级标识符,所以let和const都是在当前代码块内有效,常量不存在变量提升的情况。
• 通过let和const声明的常量,会放在临时死区(temporal dead zone)
• JavaScript引擎在扫描代码变量时,要么会把变量提升至顶部,要么会把变量放在临时死区。