ES6 详解

[fredshare]

ES6详解

ES6主要改进点

在使用ES6之前，我们使用ES5规范的javascript，那使用过程中有哪些地方是我们觉得比较麻烦的地方，基本上就是ES6改进的点，包括：js继承、数据模板、js模块化、js回调、js异步和一些基本方法不完善等。

一、js继承

ES5通过构造函数，定义并生成新对象。下面是一个例子。

function Point(x,y){
    this.x = x;
    this.y = y;
}
Point.prototype.toString = function () {
    return '('+this.x+', '+this.y+')';
}

ES6引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。上面的代码用“类”改写，就是下面这样。

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '('+this.x+', '+this.y+')';
  }
}
var point = new Point(2,3);
point.toString() // (2, 3)

上面代码定义了一个“类”，可以看到里面有一个constructor函数，这就是构造函数，而this关键字则代表实例对象。这个类除了构造方法，还定义了一个toString方法。注意，定义方法的时候，前面不需要加上function这个保留字，直接把函数定义放进去了就可以了。

Class之间可以通过extends关键字，实现继承。

class ColorPoint extends Point {}

上面代码定义了一个ColorPoint类，该类通过extends关键字，继承了Point类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个Point类。下面，我们在ColorPoint内部加上代码。

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 等同于super.constructor(x, y)
    this.color = color;
  }
  toString() {
    return this.color+' '+super();
  }
}

上面代码中，constructor方法和toString方法之中，都出现了super关键字，它指代父类的同名方法。在constructor方法内，super指代父类的constructor方法；在toString方法内，super指代父类的toString方法。

二、模板操作

我们一般如何进行模板替换

<script type="text/html" id="tpl_coupon_show">
    <div class="card_ticket_wrp">
        <div class="card_ticket">
              {data.brand_name}
        </div>
    </div>
</script>

三、js模块化

在ES6之前，js没有模块化的概念，想要使用模块化开发，就需要依赖外部库比如requireJs、seaJs、labJs或者按照AMD或者CMD规范定义自己写类似的定义函数。那ES6是怎么做的了？ ES6实现了模块功能，试图解决JavaScript代码的依赖和部署上的问题，取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

模块功能有两个关键字：export和import。export用于用户自定义模块，规定对外接口；import用于输入其他模块提供的功能，同时创造命名空间（namespace），防止函数名冲突。

ES6允许将独立的JS文件作为模块，也就是说，允许一个JavaScript脚本文件调用另一个脚本文件。该文件内部的所有变量，外部无法获取，必须使用export关键字输出变量。下面是一个JS文件，里面使用export关键字输出变量。

// profile.js
export var firstName = 'David';
export var lastName = 'Belle';
export var year = 1973;

上面是profile.js文件，ES6将其视为一个模块，里面用export关键字输出了三个变量。export的写法，除了像上面这样，还有另外一种。

// profile.js
var firstName = 'David';
var lastName = 'Belle';
var year = 1973;

export {firstName, lastName, year};

上面代码在export关键字后，使用大括号输出一组变量，它与前一种写法是等价的。 使用export定义模块以后，其他JS文件就可以通过import关键字加载这个模块（文件）。

import {firstName, lastName, year} from './profile';
function setHeader(element) {
  element.textContent = firstName + ' ' + lastName;
}

四、回调

五、数据绑定

六、异步处理模式

总结

参考 ECMAScript 6入门 es6features

[yinone]

   class ColorPoint extends Point {
     constructor(x, y, color) {
        super(x, y); // 等同于super.constructor(x, y)
        this.color = color;
     }
     toString() {
        return this.color+' '+super(); // 这个super貌似报语法错误，super作为方法的时候只能在constructor中使用，应该是 super.toString() 吧
     }
   }