HTML5 基础知识，第 5 部分 ECMAScript 6 面向对象设计_介绍ECMAScript 6（简称 ES6）面向对象设计的知识与实践

一、ECMAScript 6的来龙去脉

ECMAScript 6（简称 ES6）是 JavaScript 语言的新标准版本，它的第一版本6.0，也称ECMAScript 2015（简称 ES2015）已经在 2015 年 6 月正式发布了。其目标为使得 JavaScript 语言可以用来编写复杂的大型应用程序，既可以作为前端开发语言，运行于桌面系统的浏览器环境，及移动终端App的WebView控件环境，或第三方平台的微信小程序环境等；又可以作为后端服务器开发语言，运行于Node.js服务器环境。使其成为跨平台与跨端（前后端，终端）的 企业级开发语言。

1.1 ECMAScript 和 JavaScript 的关系 、及其发展

JavaScript起源于互联网领域初始阶段的领导者Netscape 公司，并运行于该公司的Netscape浏览器中。1996 年 11 月，该公司决定将 JavaScript 提交给标准化组织 ECMA（欧洲计算机制造商协会，European Computer Manufacturers Association），希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

ECMAScript 1.0 是 1997 年发布的，接下来的两年，连续发布了 ECMAScript 2.0（1998 年 6 月）和 ECMAScript 3.0（1999 年 12 月）。3.0 版是一个巨大的成功，在业界得到广泛支持，成为通行标准，奠定了 JavaScript 语言的基本语法，以后的版本完全继承。很多初学者一开始学习 JavaScript，其实就是在学 3.0 版的语法。

2007 年 10 月，ECMAScript 4.0 版草案发布，各方对于是否通过这个标准，发生了严重分歧，2008 年 7 月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激烈，ECMA 开会决定，中止 ECMAScript 4.0 的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1。会后不久，ECMAScript 3.1 就改名为 ECMAScript 5。2009 年 12 月，ECMAScript 5.0 版正式发布。

2011 年 6 月，ECMAScript 5.1 版发布，并且成为 ISO 国际标准（ISO/IEC 16262:2011）。ECMAScript 5.1为ES5的最终版。

2015 年 6 月，ECMAScript 6 正式通过，成为国际标准。

1.2 ES6 与 ECMAScript 2015 的关系

在 2015 年 6 月，ES6 的第一个版本发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015），标准委员会决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的 6 月份，草案就自然变成了新一年的版本。这样一来，只要用年份标记就可以了。

2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，对应年份的ES2017、ES2018、ES2019也特指该年发布的正式版本的语言标准。

ES6是一个泛指，含义是 ECMAScript 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 、ES2018、ES2019等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。

二、let 和 const 命令

2.1 let 命令

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
    let a = 10;
    var b = 1;
}

a   // ReferenceError: 在代码块外访问a，表示a没有定义;
b   // 1，在代码块外访问b，表示b为1;

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。在这里表示，let声明的变量只在它所在的代码块有效。而var命令声明的变量，在全局范围内都有效。

for循环的循环变量，就很合适使用let命令：

for (let i = 0; i < 10; i++) {
     // 循环体内代码;
 }

console.log(i);   // ReferenceError: i 没有定义

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。

用let声明的变量是块作用域的， 它们仅存在于当前块中。使用var声明的私有变量是函数作用域的，如先前介绍函数表达式时所见。

左括号“ {”和右括号“}”之间的范围是一个块。 如果您来自Java或C / C ++的背景，那么块作用域的概念将非常熟悉。 在这些语言中，程序员引入了块只是为了定义范围。 但是，在JavaScript中，由于没有与之关联的范围，因此有必要习惯性地引入块。 但是，ES6允许您使用let关键字创建块作用域变量。 如您在前面的示例中所看到的，在块内创建的变量a在该块内可用。 在声明块作用域变量时，通常建议在块的顶部添加let声明。

来看另一个示例，以清楚地区分函数和块作用域：

function swap(a,b){       // <--函数范围从这里开始
    if(a>0 && b>0){       // <--块范围从这里开始
        let tmp=a;
        a=b;
        b=tmp;
    }                     // <--块作用域到此结束
    console.log(a,b);
    console.log(tmp);     //未定义tmp，因为它仅在块作用域中可用
    return [a,b];
}
swap(1,2);

如上所见，tmp是用let声明的，并且仅在定义它的块中可用。 出于所有实践目的，应该最大限度地使用块作用域变量。 除非尝试执行某些非常具体的操作，否则必须使用var声明，请确保使用块范围的变量。 但是，错误地使用let关键字可能会导致很多问题。 首先，不能使用let关键字在同一函数或块范围内重新声明同一变量：

function blocker(x){
    if(x){
        let zcj;
        let zcj;     // 重复声明变量“zcj”
    }
}

在ES6中，由let关键字声明的变量被提升到块作用域。 不过，在声明变量之前引用该变量是错误的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

2.2 const 命令

ES6中引入的另一个关键字是const。 用const关键字声明的变量创建对值的只读引用。 这并不意味着引用所保存的值是不可变的。 但是，变量标识符不能重新分配。 常量具有块范围作用域，就像使用let关键字创建的变量一样。 同样，必须在声明变量时为其分配一个值。

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

const car = {}
car.tyres = 4

在这里，将{}分配给一个常量car。 分配后，该引用将不再变化。 在ES6中，应该执行以下操作：

• 尽可能使用const，用于所有其值不变的变量。
• 避免使用var

三、箭头函数

函数是一种特殊的数据类型。 但是，事实证明，这还不止于此：函数实际上是对象。 有一个称为Function()的内置引用类型的构造函数，它允许使用另一种（但不一定推荐）创建函数的方式。

以下示例显示了定义函数的三种方法：

function sum(a, b) {         // 函数声明
    return a + b;
}
sum(1, 2);                   // 3

var sum = function (a, b) {  /