1、LET、CONST 以及 VAR 的区别是什么?
-
其是否会挂载到window上
var声明的变量会挂载在window上,而let和const声明的变量不会挂载到window上,它形成了一个块作用域 -
是否存在变量提升
var声明变量存在变量提升,let和const不存在变量提升 -
是否形成块作用域
let和const声明形成块作用域,var变量提升不会形成作用域 -
同一作用域下是否可以重复声明
同一作用域下let和const不允许重复声明,否则会报错,而var可以 -
是否可以修改
var和let可以可以修改声明的变量,const不可以。
const 声明的是一个只读的常量。一旦声明,常量的值就不能改变
( 如果声明的常量是一个对象的话,那么不能改变的是对象的引用地址
) -
暂时性死区
let 和 const 定义的变量在定义之前调用,会抛出错误(形成了暂时性死区),而 var 不会。 -
是否一旦声明,必须立即初始化赋值
var 和 let 声明的时候可以不初始化赋值,const声明时必须赋值。
2、全局作用域中,用CONST和LET声明的变量去哪了
2.1、在ES5中,全局变量直接挂载到全局对象WINDOW的属性上
,所以能在WINDOW上看到VAR和FUNCTION声明的全局变量
var a = 10;
function f(){};
console.log(window.a); // 10
console.log(window.f); // f(){}
2.2、在ES6中,全局变量从全局对象WINDOW中脱离
,但是为了保持兼容性,旧的不变
,所以VAR、FUNCTION声明的全局变量依然可以在WINDOW对象上看到,而LET、CONST声明的全局变量在WINDOW对象上看不到,在SCRIPT中形成了一个块级作用域,这样在全局就可以访问到
let a = 1;
const B = 2;
console.log(window.a); // undefined
console.log(window.B); // undefined
console.log(a); // 1, 通过块作用域访问到的
console.log(B); // 2, 通过块作用域访问到的
通过设置断点,看看浏览器是怎么处理的
通过上图也可以看到,在全局作用域中,用 let 和 const 声明的全局变量并没有在全局对象中,只是一个块级作用域(Script)中
。
那要怎么获取呢?在定义变量的块级作用域中就能获取啊。
可以发现let和const声明的变量不属于顶层对象Window,所以window.aa为undefined。若要访问,直接访问即可。
3、CONST 声明的值的不可改变性说明
const声明的值:
- 如果是基本类型(string,number,boolean,null,undefined),
不可修改声明的基本类型的值
。 - 如果是引用类型(Function,Array,Object ),
不可修改引用类型的指针(地址),但是具体的值是可以修改的
。
3.1、本质
const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动
。
对于基本类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
对于引用类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了
3.2、具体分析
const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错
上面代码中,常量a是一个数组,这个数组本身是可写的,但是如果将另一个数组赋值给a,就会报错。
如果真的想将对象冻结,应该使用Object.freeze方法。
const foo = Object.freeze({});
// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;
上面代码中,常量foo指向一个冻结的对象,所以添加新属性不起作用,严格模式时还会报错。
除了将对象本身冻结,对象的属性也应该冻结。下面是一个将对象彻底冻结的函数
var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, i) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};