ES6新特性—CLass类

1.class类

1.1原型链相关知识

  正式学习之前，我们先温习下原型链的相关知识：（图片来源：Javascript的原型链图）

  图片中有待补充的内容包括：每一个new出来的对象或者函数有一个constructor 属性指向构造函数，例子如下：

var b = new Function();b.constructor === Function;  //true

  先对照图片对下面的例子做出解释

var a = {};console.log(a.prototype);  //=> undefined (实例化出来的对象)var b = function(){};console.log(b.prototype);  //=> {} (对应Foo.prototype)var c = 'Hello';console.log(c.prototype);  //=> undefined (实例出来的字符串)

补充知识点：

var o1 = new Object();typeof(o1);      //=> 'object'var o2 = {};typeof(o2);     //=> 'object'typeof(Object); //=> 'function'

  我们不难得出一个结论，typeof所的到的对象类型和对象的__proto__类型相同，Function.prototype除外。

typeof Function.prototype.__proto__ ;  //=> 'object'

---

1.2 class类

1.2.1 class类简介

  开始学习，先看例子（参考阅读：ES6入门-阮一峰）

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

  上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5 的构造函数Point，对应 ES6 的Point类的构造方法。
  Point类除了构造方法，还定义了一个toString方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

ES6 的类，完全可以看作构造函数的另一种写法。

class Point {  constructor() {    // ...  }  toString() {    // ...  }  toValue() {    // ...  }}// 等同于Point.prototype = {  constructor() {},  toString() {},  toValue() {},};

1.2.2 constructor方法

  constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

class Point {}// 等同于class Point {  constructor() {}}

1.2.3 class类的实例化

  生成类的实例对象的写法，与 ES5 完全一样，也是使用new命令。前面说过，如果忘记加上new，像函数那样调用Class，将会报错。

class Point {  // ...}// 报错var point = Point(2, 3);// 正确var point = new Point(2, 3);

  与 ES5 一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在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)point.hasOwnProperty('x') // truepoint.hasOwnProperty('y') // truepoint.hasOwnProperty('toString') // falsepoint.__proto__.hasOwnProperty('toString') // true

1.2.4 this的指向

  类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。

class Logger {  printName(name = 'there') {    this.print(`Hello ${name}`);  }  print(text) {    console.log(text);  }}const logger = new Logger();const { printName } = logger;printName(); // TypeError: Cannot read property 'print' of undefined

  上面代码中，printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境，因为找不到print方法而导致报错。

---

2.Class的继承

  老规矩，我们先温习下ES5中的继承以及与原型链相关的call()，apply()等函数。

2.1 ES5中的继承

（相关阅读：ES5和ES6中的继承）

2.1.1 原型链方法

  首先我们看一个ES5继承的基本例子

//先来个父类，带些属性function Super(){    this.flag = true;}//为了提高复用性，方法绑定在父类原型属性上Super.prototype.getFlag = function(){    return this.flag;}//来个子类function Sub(){    this.subFlag = false;}//实现继承Sub.prototype = new Super;//给子类添加子类特有的方法，注意顺序要在继承之后Sub.prototype.getSubFlag = function(){    return this.subFlag;}//构造实例var es5 = new Sub;

2.1.2 call方法

  call方法，它的第一个参数用作 this 的对象。其他参数都直接传递给函数自身。

function sayColor(sPrefix,sSuffix) {    alert(sPrefix + this.color + sSuffix);};var obj = new Object();obj.color = "blue";sayColor.call(obj, "The color is ", "a very nice color indeed.");

  但是原型链这种方式会出现两个问题：

• 原型中属性的改变会反应到所有的实例上
• 创建子类的实例时，不能向父类的构造函数传递参数

  例子如下：

function Super(){    this.flag = true;}function Sub(){   this.subFlag = false;}Sub.prototype = new Super;var obj = new Sub();obj.flag = flase;  //修改之后，由于是原型上的属性，之后创建的所有实例都会受到影响var obj_2 = new Sub();console.log(obj.flag)  //false；

  在这个例子中，函数 sayColor() 在对象外定义，即使它不属于任何对象，也可以引用关键字 this。对象 obj 的 color 属性等于 blue。调用 call() 方法时，第一个参数是 obj，说明应该赋予 sayColor() 函数中的 this 关键字值是 obj。第二个和第三个参数是字符串。它们与 sayColor() 函数中的参数 sPrefix 和 sSuffix 匹配，最后生成的消息 “The color is blue, a very nice color indeed.” 将被显示出来。

2.1.3 混合方式

---

2.2 ES6中的继承