ES6 创建对象与对象继承

创建对象

ES6 提供了更接近传统语言的写法来进行创建对象~

还是直接先上栗子吧，这样更直观

ES6之前的写法：

function Point(x, y) {
  this.x = x;
  this.y = y;
}

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

var p = new Point(1, 2);

ES6写法：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

属性与方法介绍

constructor()：

顾名思义就是构造方法

constructor()方法必须存在噢，如果没显式定义，一个空的constructor()方法会被js引擎默认添加

constructor()方法默认返回实例对象（this），也可以指定返回另外一个对象，其实就是用在constructor方法 加上return 某对象即可。

this：实例对象

这里的toString() 是自定义方法，可以加多个自己定义的方法噢。

另外不管是不是自定义的方法，所有方法都是在Point的原型上的方法：

class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }
}

// 等同

Point.prototype = {
  constructor() {},
  toString() {}
};

也就是说 在类的实例上面调用方法，其实就是调用原型上的方法，比如：

class Point {}
const point = new Point();

point.constructor === Point.prototype.constructor // true

1、ES6和ES5一致的地方

1.） prototype对象的constructor属性，就是类本身。

Point.prototype.constructor === Point // true

2）类的所有实例共享一个原型对象。

var p1 = new Point(2,3);
var p2 = new Point(3,2);

// p1、p2的原型对象都是Point.prototype
p1.__proto__ === p2.__proto__  // true

3） 在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

3、ES6和ES5不一致的地方

1） 类内部所有定义的方法，都是不可枚举的（non-enumerable），比如toString方法

2） 类不存在变量提升。需要先定义类后再使用

3）  静态方法 static。在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用

class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod() // TypeError: foo.classMethod is not a function

注意，如果静态方法包含this关键字，这个this指的是类，而不是实例

对象继承

ES6使用 Class 通过 extends关键字实现继承

还是直接上栗子

class Point {
}

// ColorPoint继承了Point 
class ColorPoint extends Point {
}

由于此时子类ColorPoint内部没有任何代码，相当于复制了一个Point类

现在在ColorPoint子类里加上代码

class Point {/* ... */}

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y);                                // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

这里的super关键字，表示父类的构造函数，用来新建父类的this对象

（说明下super有两种用法，这里是其中一种，被当做构造函数使用，另外一种被当做对象的用法后面有讲）

子类想得到this对象，必须先通过父类的构造函数，来得到和父类一样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。所以之类必须在constructor中调用super方法新建父类的this对象，这样子类才能得到this对象，才能去使用this对象，否则会报错。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    this.color = color; // ReferenceError 这里会报错
    super(x, y);
    this.color = color; // 正确
  }
}

ES6规定，子类的构造函数必须执行一次super函数，也意味着前面栗子中子类ColorPoint中代码为空是复制了父类Point的说法，还说明了子类默认会添加constructor方法，并在constructor方法中执行了super方法。

class ColorPoint extends Point {
}

// 等同于
class ColorPoint extends Point {
  constructor(...args) {
    // 只要定义了constructor方法就必须执行super方法，也就是这里constructor必须要写super方法
    super(...args); 
  } 
}

super关键字用法：必须显式指定是作为函数、还是作为对象使用，否则会报错。

1. 作为父类的构造函数。

这里super() 在子类的构造函数中使用，在其他地方用会报错。

另外super()内的this指向是子类噢。

2. 作为对象。

1）在普通方法中指向父类的原型对象

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    // 这里super是当做一个对象使用，存在普通方法constructor中，因此指向父类原型对象A.prototype
    console.log(super.p()); // 2
  }
}

let b = new B();

ES6 规定子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例 

class A {
  constructor() {
    this.x = 1;  // x是父类A实例属性，所以子类普通方法中super对象是引用不到x实例属性的
  }
  print() {
    console.log(this.x);
  }
}

A.prototype.y = 2; //y是父类原型对象的属性，所以子类普通方法中的super对象是可以取到属性y的值   

class B extends A {
  constructor() {
    super();       // 前面说过，这里是当做父类构造函数使用的
    this.x = 3;    
  }
  m() {
    super.print(); // 子类普通方法中super对象调用父类的方法，该父类方法内部的this指向当前的子类实例
  }
}

let b = new B();
b.m()              // 3 

2）在静态方法中指向父类

class Parent {
  static myMethod(msg) { 
    console.log('static', msg);
  }

  myMethod(msg) {
    console.log('instance', msg);
  }
}

class Child extends Parent {
  static myMethod(msg) {
    super.myMethod(msg);  // 在静态方法中，super对象指向父类
  }

  myMethod(msg) {
    super.myMethod(msg);  // 在普通方法中，super对象指向父类的原型    
  }
}

Child.myMethod(1); // static 1

var child = new Child();
child.myMethod(2); // instance 2

另外，在子类的静态方法中通过super调用父类的方法时，调用父类的方法内部的this指向当前的子类，而不是子类的实例。

class A {
  constructor() {
    this.x = 1;
  }
  static print() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();       // 前面说过，这里super函数指的是父类的构造函数，必须在construtor中执行一次
    this.x = 2;
  }
  static m() {
    super.print(); // 在静态方法中，super对象指向父类，调用父类方法时，该方法的this指向当前子类
  }
}

B.x = 3;
B.m() // 3

 参考：ES6 入门教程