ECMA Script 6_必须要知道的基础

ES6 为了保持兼容性，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性；

另一方面规定，let 命令、const 命令、class 命令声明的全局变量，不属于 window 的属性。

也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩

浏览器顶层对象指的是 window 对象

Node顶层对象指的是 global 对象，但其他环境都不支持

window 对象应该有实体含义，指的是浏览器的窗口对象

为了能够在各种环境，都能取到顶层对象，现在一般是使用 this变量。

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

综上所述，很难找到一种方法，可以在所有情况下，都取到顶层对象。下面是勉强可以使用的方法

• var getGod = function () {
      if (typeof global !== 'undefined'){
          return global;
      };
      if (typeof window !== 'undefined'){
          return window;
      };
      if (typeof self !== 'undefined'){
          return self;
      };
      throw new Error('unable to locate global object');
  };
  
  var God = getGod();

现在有一个提案，在语言标准的层面，引入global作为顶层对象。

也就是说，在所有环境下，global都是存在的，都可以从它拿到顶层对象。

垫片库system.global模拟了这个提案，可以在所有环境拿到global

•  // CommonJS的写法
  var global = require('system.global')();
  
  // ES6模块的写法
  import getGlobal from 'system.global';
  const global = getGlobal();

参考： http://es6.ruanyifeng.com/#docs/let

ES6 声明变量的六种方法

• var v = 0;
• function myyFunc(){};
• let   l = 0;
• const c = 0;
• import
• class

let age = 22;

• 声明一个变量
• 不会被预处理，不存在声明提升
• 不能重复声明            // Identifier 'a' has already been declared

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

作用域

• 全局作用域
• 函数作用域
• 块作用域            let 和 const 关键字定义的 变量 和 常量，function 关键字定义的函数        都存在块作用域

• "use strict";
          if (true) {
              var v = 0;
              let l = 0;
              const c = 0;
              function f() {
                  console.log('I am inside!');
              };
          };
          console.log(v);    //
          console.log(l);    // Uncaught ReferenceError: l is not defined
          console.log(c);    // Uncaught ReferenceError: c is not defined
          f();    // Uncaught TypeError: f is not a function

• 暂时性死区（Temporal Dead Zone，简称TDZ）

变量 x 使用 let 命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。

因此，typeof 运行时就会抛出一个 Reference Error。

作为比较，如果一个变量根本没有被声明，使用 typeof 反而不会报错

在没有 let 之前，typeof 运算符是百分之百安全的，永远不会报错。有了 let ，现在这一点不成立了

• 隐蔽的死区

• window.addEventListener("DOMContentLoaded", function(){
  'use strict';function bar(x = y, y = 2) {
          return [x, y];
      }
      console.log(bar(1, 2)); // 正常： let x=1;    let y=2;
      console.log(bar()); // 报错    let x=y; /* y 的变量死区 */    let y=2;
  }, false);

• "暂时性死区" 也意味着 typeof 不再是一个百分之百安全的操作

• if(true){
      typeof x;    // Reference Error
      let x;
  }

• 块级作用域内 let 又声明了一个局部变量 tmp，导致后者绑定这个块级作用域，所以在 let 声明变量前，对 tmp 赋值会报错

• var tmp = 123;
  
  if (true) {
      tmp = 'abc'; // Reference Error
      let tmp;     //
  }

• let a = 123;
  
  if(true){    // 块作用域
      let a = 456;
  };
  
  console.log(a);    //
  /**************************/
  for(){}
  
  for(var in ){}
  
  switch(x){}
  
  while(1){}

• 实例

• // 三个按键
  for(let i=0; i< btns.length; i++){
      btn[i].onclick = function(){
          alert(i+1);    // 每次按键都会打印自己的索引
      };
  };
  
  // let i =0
  
  // let i =1 
  
  // let i =2

• 关于 for(let i=0; i<max; i++){};    // 一定要知道，let i=0;    属于for 块作用域
• 比如 有三个按键 用 for 事件

• /****
          <div id="test_box">
              <div></div>
              <div></div>
              <div></div>
          </div>
  ****/
  window.addEventListener("DOMContentLoaded", function(){
      'use strict';
      var divs = document.getElementById("test_box").getElementsByTagName("div");
  
      /*
      for(let i=0; i<divs.length; i++){
          divs[i].onclick = function(){
              console.log(i+1);
          };
      };
      可以理解成:    就相当于:    ****/
  
      function add1(){
          let i=0;
          divs[i].onclick = function(){
              console.log(i+1);    //
          };
      };
  
      function add2(){
          let i=0;
          i += 1;
          divs[i].onclick = function(){
              console.log(i+1);    //
          };
      };
  
      function add3(){
          let i=0;
          i += 1;
          i += 1;
          divs[i].onclick = function(){
              console.log(i+1);    //
          };
      };
  
      add1();
      add2();
      add3();
  
      /**** 不能理解成下面这个样子
          function addEvent(){
              let i=0;
              divs[i].onclick = function(){
                  console.log(i+1);    // 3
              };
              i += 1;
              divs[i].onclick = function(){
                  console.log(i+1);    // 3
              };
              i += 1;
              divs[i].onclick = function(){
                  console.log(i+1);    // 3
              };
          };
      ****/
  }, false);

const PI = 3.1415926;

声明一个常量，不可被更改

不会被预处理，不存在声明提升

不能重复声明            // Identifier 'a' has already been declared

• 值得注意的是

在将一个 对象 声明为常量时，只能保证 这个常量永远指向这个对象，而还是能够操作这个对象的属性

• const foo = {};
  
  // 为 foo 添加一个属性，可以成功
  foo.prop = 123;
  foo.prop //
  
  // 将 foo 指向另一个对象，就会报错
  foo = {}; // TypeError: "foo" is read-only

如果真的想 连对象的属性都不可写，则必须使用 Object.freeze()

除了将对象本身冻结，对象的属性也应该冻结。

下面是一个将对象彻底冻结的函数

• function freezeObj(obj){
      Object.freeze(obj);
      Object.keys(obj).forEach(function(attr){
          if ( typeof obj[attr] === 'object' ) {
              freezeObj(obj[attr]);
          };
      });
  };