es6 class继承及super特性详解

一、类的继承

class通过extends关键字来继承

class a{
     
	constructor(x, y) {
     
	    this.x = x;
		this.y = y;
	}
	toString(){
     
		return this.x+' '+this.y;
	}
}
// 继承a，自己新创建了一个z属性
class b extends a{
     
	constructor(x, y, z) {
     
		super(x, y);//要在this的前面
		this.z = z;
	}
	toString2(){
     
		return super.toString()+' '+this.z
	}
}

usper在上面的例子中，创建了父类的实例对象this

二、super详解

super关键字可以当作函数（ super() ）使用，也可以当作对象（ super ）使用

1. super表示父类的构造函数，并且子类的构造函数必须执行一次super

constructor(x, y, z) {
     
	super(x, y);//要在this的前面
	this.z = z;
}

super虽然代表了父类a的构造函数，但是返回的是子类b的实例，super内部的this指向的b
即super()相当于a.prototype.constructor.call(this)

2. super作为函数时候只能在子类的构造函数中，用在自定义函数中就会报错

class a{
     }
class b extends a{
     
	m(){
     
		super();//报错
	}
}

3. super作为对象，在静态方法中指向父类，在普通方法中指向父类的原型。

下面演示普通方法

class a{
     
	aa(){
      return 233 }
}
class b extends a{
     
	constructor(){
     
		super();
		console.log(super.aa()); 
	}
}

var c = new b; //输出 233

上面的代码中，子类b的super.aa()就是将super当作一个对象来使用。这时候super在普通方法中指向a.prototype,所以super.aa()就相当于a.prototype.aa()（类的所有方法都定义在类的prototype上，constructor除外）。

注：因为super指向父类的原型对象，所以定义在父类实例上的方法或属性无法通过super调用，但是定义在原型上的属性和方法可以获取到（如：a.prototype.x = 233）。

4. super在调用父类的方法时，super会绑定子类的this

 class a{
     
 	constructor(){
     
		this.x = 1 
	}
	cout(){
      
		console.log(this.x);
	 }
}
class b extends a{
     
	constructor(){
     
		super();
		this.x = 2 
	}
	bd(){
     
		super.cout();
	}
}

var c = new b;  
b.bd() // 2

以上结果输出的值为2，因为虽然super.cout()调用的是a.prototype.cout()，但是a的prototype.cout()绑定的是b的this
实际上执行的是super.cout.call(this)