#ES6基础教程（一）

ES6基础教程（一）

一、let 和 const 命令

1、let命令

基础用法

• let 命令用来声明变量，用法类似于var，let声明变量只在let声明代码块中有效。

  {
   let a = 10
   var b = 5
  }
  a  //a is not defined
  b  //b=5
  

• for循环中使用let 命令

  for(let i = 0 ; i < 10 ; i++){
      ...
  }
  console.log(i)
  // i is not defined
  // let 声明的变量i 只在let声明的代码块中有效（即for循环中有效） 
  

• for循环中使用let 和 var命令对比

  // var 命令声明变量
  var a = [];
  for(var i = 0 ; i < 10 ; i++){
      a[i] = function(){
          console.log(i);
      }
  }
  a[6](); // 10
  // 变量i 使用var命令声明，在全局范围内有效，所以全局范围内只有一个变量i。每一次循环都会改变变量i的值，console.log(i)里面的i指向同一全局变量i，也就是说数组a中所有成员里的i都是指向同一变量i，因此运行输出的是最后一轮的i的值，也就是10。
  

  // let 命令声明变量
  var a =[];
  for(let i = 0; i < 10 ; i++){
      a[i] = function(){
          console.log(i)
      }
  }
  a[6](); // 6
  // 在for循环中 变量 i 使用let进行声明，在每一次循环输出时，变量i都是重新声明的。因此最后输出为6.
  

• let 命令在for循环中，还有特别之处，设置for循环变量那部分是一个父作用域，而循环体内则是另一个单独的作用域。

  for(let i = 0 ; i< 3 ; i++){
      let i = '123';
      console.log(i);
  }
  '123'
  '123'
  '123'
  

不存在变量提升

console.log(a) // undefinde
var a;

console.log(b) // err 
let b;

暂时性死区

var temp = '123';
if(true){
    temp = 'abc';
    console.log(temp) // err
    let temp;
    temp = 'abcd'
    console.log(temp) //abcd
}
// 在上述代码中，es6 中，如果代码块中存在let和const命令，这个代码块就会形成一个封闭状态的作用域，代码块中的变量，只在此代码块中声明后赋值后才起作用，代码块外声明的全局变量不起作用，这个现象为暂时性死区。

比较隐蔽的暂时性死区

// 比较隐蔽的"死区"
function bar(x=y,y=2){
    ...
}
// 此时会报错。参数x的赋值为y，此时的y并没赋值，形成"死区"。

// 不报错
var x = x;
// 报错
let x = x;

// 因为使用let声明变量时，只要变量还没有在声明完成前进行使用，就会报错。上述情况，参数x的声明还没有执行完成，就去取x的值。

变量不允许重复声明

let 不允许在相同作用域中，声明同一个变量。

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

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

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

2、块级作用域

为什么需要块级作用域？

场景一：内层变量覆盖外层变量。

var temp = 'abc';
function f(){
    console.log(temp);
    if(false){
        var temp = 'abcdf'
    }
}
f() // undefined

// 因为此时 执行 f()函数，输出temp变量，if代码块内部中声明的变量存在变量提升，导致内部的变量覆盖了外部全局的变量，因此输出undefined.

场景二：用来计数的循环变量，泄露成为全局变量

var s  = 'hello';
for(var i = 0 ;i < s.length ; i++){
    console.log(s[i])
}
console.log(i) // i = 5
// 此时i只是用来控制循环的次数，但在全局打印时，它并没有消失，而是以全局变量输出值5.

ES6中的块级作用域

let为JS新增了块级作用域

function f1(){
	let n = 5;
    if(true){
        let n = 10;
    }
    console.log(n)
}
f1() // n=5

// 此时let声明了两次变量n 形成了两个块级作用域，变量的值为在当前作用域所赋的值。因此，在if代码块外层的n值为5，输出即为5；如果在if代码块内层，输出变量n，则为10.

块级作用域与函数声明

ES5规定，函数只能在顶层作用域和函数作用域中声明，不能在块级作用域声明。

// 情况一
if(true){
    function f(){}
}

// 情况二
try{
 function f(){}
}catch(e){
    //...
}

上述两种声明函数的方法，在ES5的规定中都是非法的。

但是，浏览器为了兼容以前的旧代码，还是支持在块级作用域中声明函数，因此上面两种情况运行不会报错。

ES6引入块级作用域，明确允许函数在块级作用域中声明，在块级作用域中，函数声明语句类似于let，在块级作用域外不可引用。

function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());

上述代码在ES5环境中运行，会输出I am inside! ，那是因为if内部的函数f()会被提升到函数头部，实际代码如下：

// ES5 环境
function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());

ES6 就完全不一样了，理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let，对作用域之外没有影响。但是，如果你真的在 ES6 浏览器中运行一下上面的代码，是会报错的，这是为什么呢？

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

原来，如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 规定，浏览器的实现可以不遵守上面的规定，有自己的方式。

• 允许在块级作用域内声明函数。
• 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
• 同时，函数声明还会提升到所在的块级作用域的头部。

注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

根据这三条规则，浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于var声明的变量。上面的例子实际运行的代码如下。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句

// 块级作用域内部的函数声明语句，建议不要使用
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 块级作用域内部，优先使用函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

另外，还有一个需要注意的地方。ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。

// 第一种写法，报错
if (true) let x = 1;

// 第二种写法，不报错
if (true) {
  let x = 1;
}

上面代码中，第一种写法没有大括号，所以不存在块级作用域，而let只能出现在当前作用域的顶层，所以报错。第二种写法有大括号，所以块级作用域成立。

函数声明也是如此，严格模式下，函数只能声明在当前作用域的顶层。

// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}

3、const命令

基础用法

const声明一个只读的常量，变量一旦通过const命令进行声明，常量的值不可改变。

const声明的常量不得改变值，这就意味着声明的时候必须立即初始化常量的值，不能留到后面赋值。

• const的作用域与let命令相同。

• const命令声明的常量也是不可提升。

• const声明的常量也存在暂时性死区。

• const声明的常量，也和let命令一样不可重复声明。

const本质

const声明的变量，并不是变量的值不变，而是保证变量指向的存储地址不变。对于简单的数据类型（数值，字符串，布尔值），值就保存在变量指向的内存地址上，因此类似于常量。但对于复合类型的变量（对象、数组），值保存在(对象、数组)指向的内存地址上，const只能保证（对象，数组）的内存地址不变，但内部的属性则不能保证不变。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

ES6声明变量的六种方法

ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。

4、顶层对象的属性

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。

window.a = 1;
a // 1

a = 2;
window.a // 2

ES5中顶层对象的属性缺点：

首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）；其次，程序员很容易不知不觉地就创建了全局变量（比如打字出错）；最后，顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一方面，window对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。

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

5、globalthis对象

JavaScript 语言存在一个顶层对象，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行。但是，顶层对象在各种实现里面是不统一的。

• 浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。
• 浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
• Node 里面，顶层对象是global，但其他环境都不支持。

同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this关键字，但是有局限性。

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

综上所述，很难找到一种方法，可以在所有情况下，都取到顶层对象。

ES2020 在语言标准的层面，引入globalThis作为顶层对象。也就是说，任何环境下，globalThis都是存在的，都可以从它拿到顶层对象，指向全局环境下的this。