ES6之var、let、const

更多前端文章

一、变量提高

概述：变量可在声明以前使用。

console.log(a);//正常运行，控制台输出 undefined
var a = 1;
console.log(b);//报错，Uncaught ReferenceError: b is not defined
let b = 1;
console.log(c);//报错，Uncaught ReferenceError: c is not defined
const c = 1;
复制代码

var 命令常常会发生变量提高现象，按照通常逻辑，变量应该在声明以后使用才对。为了纠正这个现象，ES6 规定 let 和 const 命令不发生变量提高，使用 let 和 const 命令声明变量以前，该变量是不可用的。主要是为了减小运行时错误，防止变量声明前就使用这个变量，从而致使意料以外的行为。

二、暂时性死区

概述：若是在代码块中存在 let 或 const 命令，这个区块对这些命令声明的变量，从一开始就造成了封闭做用域。凡是在声明以前就使用这些变量，就会报错。

var tmp = 123;
if (true) {
	tmp = 'abc';//报错，Uncaught ReferenceError: tmp is not defined
	let tmp;
}
复制代码

剖析暂时性死区的原理，其实let/const一样也有提高的做用，可是和var的区别在于

• var在建立时就被初始化，而且赋值为undefined
• let/const在进入块级做用域后，会由于提高的缘由先建立，但不会被初始化，直到声明语句执行的时候才被初始化，初始化的时候若是使用let声明的变量没有赋值，则会默认赋值为undefined，而const必须在初始化的时候赋值。而建立到初始化之间的代码片断就造成了暂时性死区

三、不容许重复声明

let不容许在相同做用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}
function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错
复制代码

四、块级做用域

在es5中咱们会遇到下面这写状况 第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';//没有块级做用域tmp变量提高到函数做用域里致使tmp为undefined
  }
}
f(); // undefined
复制代码

第二种场景，用来计数的循环变量泄露为全局变量。

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5
复制代码

上面代码中，变量i只用来控制循环，可是循环结束后，它并无消失，泄露成了全局变量。

let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}
复制代码

let实际上为 JavaScript 新增了块级做用域。

五、const注意点

一、const声明变量的时候必须赋值，不然会报错，一样使用const声明的变量被修改了也会报错 二、const声明变量不能改变，若是声明的是一个引用类型，则不能改变它的内存地址

const c ; //Uncaught SyntaxError: Missing initializer in const declaration
const a= {a:1};
a.a=2;
a={d:2};// Uncaught TypeError: Assignment to constant variable.
复制代码

本质：const实际上保证的，并非变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，所以等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即老是指向另外一个固定的地址），至于它指向的数据结构是否是可变的，就彻底不能控制了

那么咱们想获得不可修改的const要怎么作呢？应该使用Object.freeze方法。

const foo = Object.freeze({});

// 常规模式时，下面一行不起做用；
// 严格模式时，该行会报错
foo.prop = 123;
// 除了将对象自己冻结，对象的属性也应该冻结。
var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};
复制代码

参考文章 ECMAScript 6 入门