深入理解ES6之块级绑定

说在前面

开始学习深入理解ES6这本书，有些在看以前的ES6的书本时未理解的东西在逐渐解惑，记录一下，也算是一种别样的收获

块级作用域、块级绑定及js

• 块级作用域

任何一对花括号中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。

• js在ES6之前是没有所谓的块级作用域的，我们一直强调的是函数作用域。
• ES6增加了块级作用域，对于if语句中的{},对于该部分之内的部分js操作，外界是不可见的。
• 对于ES6，var没有改变它的内涵，它也不受块级作用域的限制
• 对于ES6，块级作用域的对象是let以及const所声明的值。

---

var声明与变量提升

es5使用的最多的是var声明，它的特性

• 可以多次赋值
• 有变量提升功效，定义在后,如下代码，也是不会报错的

console.log(s); //undefined
var s; 

• 对于作用域，var只受到函数作用域的限制，对于if语句，是不区分作用域的

if(true) {
  var s = 4
  console.log(s);//s = 4
} 
console.log(s);//s = 4,可访问

es6的块级声明

let

与var相近的‘块级’变量

• es6块级作用域的实现者，{}为其作用域,作用域之外不可绑定

if(true) {
let p = 4;
console.log(p);//4
} 
console.log(p );//Uncaught ReferenceError: p is not defined

• 与var使用含义相近，但只可重复赋值，但不可重复声明

var K = 5;
let K;//Uncaught SyntaxError: Identifier 'K' has already been declared, 已经声明过
let l = 3;//undefined
l = 4//4，重新赋值未报错

• 没有变量提升, 在未声明之前使用会报错

console.log(j);
let j;
 //Uncaught ReferenceError: j is not defined

const

es6新增的常量声明

• es6块级作用域的实现者，{}为其作用域,作用域之外不可绑定(与let相似)
• 定义默认常量：不可重复声明、不可重复赋值

const n = 3;
 n= 4;//Uncaught TypeError: Assignment to constant variable
var n = 6;//Uncaught SyntaxError: Identifier 'n' has already been declared

• 只声明不初始化会报错：本意作为默认值，所以不可以不初始化

const e ;//Uncaught SyntaxError: Missing initializer in const declaration

• 没有变量提升, 在未声明之前使用会报错(与let类似)

---

块级声明特性

暂时性死区( temporal dead zone ， TDZ)

• let与const都没有变量提升，未声明之前使用，报错的原因即为es6中有一个暂时性死区的概念

 typeof l;
 let l = 5;//Uncaught SyntaxError: Identifier 'l' has already been declared

• 暂时性死区是let与const块级声明的一种特性
  对于let、const声明的值，当 JS 引擎检视接下来的代码块并发现变量声明时，它会在面对 var 的情况下将声明提升到函数或全局作用域的顶部，而面对 let 或 const 时会将声明放在暂时性死区内。任何在暂时性死区内访问变量的企图都会导致“运行时”错误（runtime error）。只有执行到变量的声明语句时，该变量才会从暂时性死区内被移除并可以安全使用

块级循环

• var循环

for (var i = 0; i < 10; i++) {
  process(items[i]);
}
// i 在此处仍然可被访问
console.log(i);

• let 循环

for (let i = 0; i < 10; i++) {
  process(items[i]);
}
// i 在此处不可访问，抛出错误
console.log(i);

• for循环绑定变量
  • var绑定

  var funcs = [];
  for (var i = 0; i < 10; i++) {
      funcs.push(function() { console.log(i); });
   }
  funcs.forEach(function(func) {
    func(); // 输出数值 "10" 十次
   });
  

  • let绑定

  var funcs = [];
  for (let i = 0; i < 10; i++) {
    funcs.push(function() {
        console.log(i);
     });
  }
  funcs.forEach(function(func) {
      func(); // 从 0 到 9 依次输出
  })
  

  • 不同：
    var最后访问的均是i，其实是全局变量中的i，为最后的10，如果想输出0-9，必须在for循环中使用立即执行函数将i传入单个函数中。
    lat 在循环中，深入理解es6书中说是：

    声明每次都创建了一个新的 i 变量，因此在循环内部创建的函数获得了各自的 i 副本，而每个 i 副本的值都在每次循环迭代声明变量的时候被确定了

    我觉得这种说法其实与立即执行函数将var定义的值传入在函数中保留副本是一致的（只能在该作用域中使用的副本）

  • 疑问
    这里还是不能明白这个副本是怎样的一种存在，跟块级作用域的作用域是否有一定的关系，还不清楚，待补充吧~（查找源码但是没有找到对应的文件，有点难过。。。）

  • const
    对于const，for循环中因为有i++，所以使用它是会报错的，但是对于for-in和for -of是与let一致的，都可以使用。一致的

---

全局绑定

var在全局中声明的变量，与window对象下面所有的属性是一致的，但是let与const，不会在window下面创建该属性，即两者是不能互通的

 var wm = '3334';
window.wm//"3334"
let wy = 'ppp';
window.wy//undefined

所以若想让代码能从全局对象中被访问,你仍然需要使用 var :在浏览器中跨越帧或窗口去访问代码时，这种做法非常普遍。

---

最佳实践

• 不需要修改的默认值使用const
• 定义变量尽量使用let，避免一些var作用域引起的错误
  另： 全局变量的赋值，可能无法避免的使用var