var 和let、const的区别

1、let、const 以及 var 的区别是什么？

• 其是否会挂载到window上
  var声明的变量会挂载在window上，而let和const声明的变量不会挂载到window上，它形成了一个块作用域

• 是否存在变量提升
  var声明变量存在变量提升，let和const不存在变量提升

• 暂时性死区
  let 和 const 定义的变量在定义之前调用，会抛出错误(形成了暂时性死区)，而 var 不会。

• 是否一旦声明，必须立即初始化赋值
  var 和 let 声明的时候可以不初始化赋值，const声明时必须赋值。

• 是否形成块作用域
  let和const声明形成块作用域，var变量提升不会形成作用域

• 同一作用域下是否可以重复声明
  同一作用域下let和const不允许重复声明，否则会报错，而var可以

• 是否可以修改
  var和let可以可以修改声明的变量，const不可以。
  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] );
    }
  });
};

 

参考链接：https://es6.ruanyifeng.com/#docs/let

 {","marks":[]}]}]},{"type":"block","id":"Ti5Y-1653713598907","name":"code-line","data":{},"nodes":[{"type":"text","id":"zEzZ-1653713598906","leaves":[{"text":" Object.freeze(obj);","marks":[]}]}]},{"type":"block","id":"h7oh-1653713598909","name":"code-line","data":{},"nodes":[{"type":"text","id":"q4IY-1653713598908","leaves":[{"text":" Object.keys(obj).forEach( (key, i) => {","marks":[]}]}]},{"type":"block","id":"8S2I-1653713598911","name":"code-line","data":{},"nodes":[{"type":"text","id":"eFtG-1653713598910","leaves":[{"text":" if ( typeof obj[key] === 'object' ) {","marks":[]}]}]},{"type":"block","id":"OfK9-1653713598913","name":"code-line","data":{},"nodes":[{"type":"text","id":"T78D-1653713598912","leaves":[{"text":" constantize( obj[key] );","marks":[]}]}]},{"type":"block","id":"DUcY-1653713598915","name":"code-line","data":{},"nodes":[{"type":"text","id":"iKyI-1653713598914","leaves":[{"text":" }","marks":[]}]}]},{"type":"block","id":"ALD7-1653713598917","name":"code-line","data":{},"nodes":[{"type":"text","id":"IPlO-1653713598916","leaves":[{"text":" });","marks":[]}]}]},{"type":"block","id":"32MX-1653713598919","name":"code-line","data":{},"nodes":[{"type":"text","id":"wxe6-1653713598918","leaves":[{"text":"};","marks":[]}]}]},{"type":"block","id":"ZfOw-1653713598921","name":"code-line","data":{},"nodes":[{"type":"text","id":"k4wv-1653713598920","leaves":[{"text":"12345678","marks":[]}]}]}],"state":{}}]'>

、let、const 以及 var 的区别是什么？

• 其是否会挂载到window上var声明的变量会挂载在window上，而let和const声明的变量不会挂载到window上，它形成了一个块作用域
• 是否存在变量提升var声明变量存在变量提升，let和const不存在变量提升
• 暂时性死区let 和 const 定义的变量在定义之前调用，会抛出错误(形成了暂时性死区)，而 var 不会。
• 是否一旦声明，必须立即初始化赋值var 和 let 声明的时候可以不初始化赋值，const声明时必须赋值。
• 是否形成块作用域let和const声明形成块作用域，var变量提升不会形成作用域
• 同一作用域下是否可以重复声明同一作用域下let和const不允许重复声明，否则会报错，而var可以
• 是否可以修改var和let可以可以修改声明的变量，const不可以。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(){} 12345

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， 通过块作用域访问到的 1234567

通过设置断点，看看浏览器是怎么处理的

通过上图也可以看到，在全局作用域中，用 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']; // 报错 1234

上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。

如果真的想将对象冻结，应该使用Object.freeze方法。

const foo = Object.freeze({}); // 常规模式时，下面一行不起作用； // 严格模式时，该行会报错 foo.prop = 123; 12345

上面代码中，常量foo指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。

除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数

var constantize = (obj) => { Object.freeze(obj); Object.keys(obj).forEach( (key, i) => { if ( typeof obj[key] === 'object' ) { constantize( obj[key] ); } }); }; 12345678