class的继承详解(第二篇)——ES6篇

概述及用法

class可以通过extends关键字实现继承，在新定义的类中，通过super关键字，来表示父类的构造函数，用来新建父类的this对象 

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
	}
}

上面代码中，constructor方法和toString方法之中，都出现了super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象

ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面。ES6的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以先调用super方法），然后再用子类的构造函数修改this如果子类没有定义constructor方法，这个方法会被默认添加，也就是说，不管有没有显示定义，任何一个子类都有constructor方法在子类的构造函数之中，只有先调用super，才能使用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; //正确
	}
}

 父类的静态方法，也会被子类继承

class A {
	static hello() {
		console.log('hello world');
	}
}

class B extends A {

}

B.hello() //hello world

Object.getPrototypeOf()

Object.getPrototypeOf方法可以用来从子类上获取父类，可以使用这个方法判断，一个类是否继承了另一个类

Object.getPrototypeOf(ColorPoint) === Point
//true

super关键字

super这个关键字，既可以作为函数使用，也可以当做对象使用。在这两种情况下，他的用法完全不同

一：作为函数使用，代表父类的构造函数。ES6要求，子类的构造函数必须执行一次super函数。

class A{
	constructor() {
		console.log(new.target.name);
	}
}

class B extends A {
	constructor() {
		super();
	}
}

new A() 	//A
new B()		//B

上述代码中，new.target指向当前正在执行的函数，可以看出，在super()执行时，他指向的是子类B的构造函数，而不是父类A的构造函数。也就是说，super()内部的this指向的是B

二、super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类

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

class B extends A {
	constructor() {
		super();
		console.log(super.p());	//2
	}
}

let b = new B();

上述代码中，子类B当中的super.p()，就是将super当作一个对象使用。这时，super在普通方法之中，指向A.prototype，所以super.p()就相当于A.prototype.p()。

定义在父类实例上的方法或属性，是无法通过super调用的

class A{
	constructor() {
		this.p = 2;
	}
}

class B extends A {
	get m() {
		return super.p;
	}
}

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

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

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

class B extends A {
	constructor() {
		super();
		this.x = 2;
	}
	m() {
		super.print();
	}
}

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

上述代码中，super.print()虽然调用的是A.prototype.print()，但是A.prototype.print()内部的this指向子类B的实例，导致输出的是2，而不是1。
也就是说，实际上执行的是super.print.call(this)。

由于this指向子类实例，所以如果通过super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性。

class A {
	constructor() {
		this.x = 1;
	}
}

class B extends A {
	constructor() {
		super();
		this.x = 2;
		super.x = 3;
		console.log(super.x);//undefined
		console.log(this.x);// 3
	}
}

let b = new B();

上述代码中，super.x赋值为3，这时等同于对this.x赋值为3。而当读取super.x的时候，读的是A.prototype.x，所以返回undefined。

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);
	}

	myMethod(msg) {
		super.myMethod(msg);
	}
}

Child.myMethod(1);	//static 1

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

类的Prototype 属性和__proto__属性

class作为构造函数的语法糖，他拥有prototype和__proto__属性
1）子类的__proto__属性，表示构造函数的继承，总是指向父类
2）子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype

class A {

}

class B extends A {

}

B.__proto__ === A //true
B.prototype.__proto__ === A.prototype //true 


Object.setPrototypeOf(B.prototype, A.prototype);
//等同于
B.prototype.__proto__ = A.prototype;

Object.setPrototypeOf(B, A);
//等同于
B.__proto__ = A;

原生构造函数的继承

原生构造函数是指语言内置的构造函数，通常用来生成数据结构。
1）Boolean()
2）Number()
3）String()
4）Array()
5）Date()
6）Function()
7）RegExp()
8）Error()
9）Object()

ES6允许继承原生构造函数定义子类，因为ES6是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。而ES5不行

class MyArray extends Array {
	constructor(...args) {
		super(...args);
	}
}

var arr = new MyArray();
arr[0] = 12;
arr.length //1

arr.length = 0;
arr[0] //undefined

定义一个带版本功能的数组

class VersionedArray extends Array{
	constructor() {
		super();
		this.history = [[]];
	}
	commit() {
		this.history.push(this.slice());
	}
	revert() {
		this.splice(0, this.length, ...this.history[this.history.length-1]);
	}
}

var x = new VersionedArray();

x.push(1);
x.push(2);
x //[1,2]
x.history	//[[]]

x.commit();
x.history	//[[], [1,2]]

x.push(3);
x // [1,2,3]
x.history //[[],[1,2]]

x.revert();
x //[1,2]

上面代码中，VersionedArray会通过commit方法，将自己的当前状态生成一个版本快照，存入history属性。revert方法用来将数组重置为最新一次保存的版本。除此之外，VersionedArray依然是一个普通数组，所有原生的数组方法都可以在它上面调用。

下面是一个自定义Error子类的例子，可以用来定制报错时的行为

class ExtendableError extends Error{
	constructor(message) {
		super();
		this.message = message;
		this.stack = (new Error()).stack;
		this.name = this.constructor.name;
	}
}

class MyError extends ExtendableError {
	constructor(m) {
		super(m);
	}
}

var myerror = new MyError('11');
myerror.message //'11'
myerror instanceof Error //true
myerror.name	//MyError
myerror.stack
// Error
//     at MyError.ExtendableError
//     ...

注意，继承object的子类，有一个行为差异

class NewObj extends Object{
	constructor() {
		super(...arguments);
	}
}
var o = new NewObj({after: true});
o.attr === true //false

上面代码中，NewObJ继承了Object,但是没法通过super方法向父类Object穿餐。这是因为ES6改变了Object构造函数的行为，一旦发现object方法不是通过newObject()这种形式调用，ES6规定Object构造函数会忽略参数

Mixin模式的实现

Mixin指的是多个对象合成一个新的对象，新对象具有各个组成成员的接口。它最简单的实现如下。

const a = {
	a: 'a'
}
const b = {
	b: 'b'
}
const c = {...a, ...b};	//{a: 'a', b: 'b'}
//上面代码中，c对象是a对象和b对象的合成，具有两者的接口。

下面是更完备的实现，将多个类的接口‘混入’（mix in）另一个类

function mix(...mixins) {
	class Mix {}

	for(let mixin of mixins) {
		copyProperties(Mix.prototype, mixin);	//拷贝实例属性
		copyProperties(Mix.prototype,Reflect.getPrototypeOf(mixin));	//拷贝原型
	}
	return Mix;
}

function copyProperties(target, source) {
	for(let key of Reflect.ownKeys(source)) {
		if(key !== "constructor"
			&& key !== "prototype"
			&& key !== "name"
			) {
			let desc = Object.getOwnPropertyDescriptor(source, key);
			Object.defineProperty(target, key, desc);
		}
	}
}

上面的代码的mix函数，可以将多个对象合成一个类，使用的时候，只要继承这个类即可。

class DistributeEdit extends mix(Loggle,Serializable){
	//....
}