ES6-let与const篇

二、特性篇

1、let与const

1)var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined,但是let不行，变量未声明之前使用会报错

let
//声明变量，只在代码块内有效
//var 在代码块也有效,全局范围内都有效
//举例
function f(){
  let a = 10;
  var b = 1;
}

console.info(a) // ReferenceError: a is not defined.
console.info(b) // 1

//结果:0,1,2,3,4,5,6,7,8,9,sssss 6,undefined
var a = [];
for (let i = 0; i < 10; i++) {
    console.info(i);
	a[i] = function () {
	    console.log("sssss",i);
	};
}
console.info(a[6]())

// 0,1,2
for (let i = 0; i < 3; i++) {
	console.info(i);
}

//报错，初始化前无法访问“i”，Cannot access 'i' before initialization;js 访问到i被重新声明，console.info(i);报错
for (let i = 0; i < 3; i++) {
	console.info(i);
    let i = 'abc';
}

//abc,abc,abc
for (let i = 0; i < 3; i++) {
	let i = 'abc';
    console.info(i);
}

2)let有暂时性死区,ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。

//块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，
//对tmp赋值会报错。其实上面的例子二也提到了为啥会报错
var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError = Cannot access 'temp' before initialization
  let tmp;
}

//有些“死区”比较隐蔽，不太容易发现。
function bar(x = 2, y = x) {
  return [x, y];
}
bar(); // [2, 2]

function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 报错，原因：区域内，x=y,没错，x,y都是undefined,但是y=2就是会错

3）在没有let之前，typeof运算符是百分之百安全的，永远不会报错。

//undefined;
typeof(a);

//报错
typeof(a);
let a;

//undefined
let a;
typeof(a);

//3
let a = 3;
typeof(a);

4)不允许重复声明

// 报错
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() // 不报错

5）为什么需要块级作用域：ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

//在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。	
var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}
f(); // undefined

//泄漏成了全局变量
var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

6）ES6 的块级作用域，不同作用域内，不会相互影响

2、const

1、const定义的变量一般不能更改如（数值、字符串、布尔值），但是数组和对象就不确定了，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了 。

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

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

3、总结：

ES6 为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1

let b = 1;
window.b // undefined

4、This

1)顶层对象

• 浏览器里面，顶层对象是window;
• 浏览器和 Web Worker 里面，顶层对象是self
• Node 里面，顶层对象是global

2）this概念

• 全局环境中，this会返回顶层对象。但是，Node.js 模块中this返回的是当前模块，ES6 模块中this返回的是undefined。
• 函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。
• 不管是严格模式，还是普通模式，new Function('return this')()，总是会返回全局对象。但是，如果浏览器用了 CSP（Content Security Policy，内容安全策略），那么eval、new Function这些方法都可能无法使用。