js中的super的使用

1.this和super的区别：

this关键词指向函数所在的当前对象
super指向的是当前对象的原型对象

2.super的简单应用

const person = {
	name:'jack'
}

const man = {
	sayName(){
		return super.name;
	}
}

Object.setPrototypeOf( man, person );

let n = man.sayName();

console.log( n )	//jack

3.super的另类实现

super.name  
等同于   
Object.getPrototypeOf(this).name【属性】  
等同于   
Object.getPrototypeOf(this).name.call(this)【方法】

4.super中的this指向（易混淆）

super.name指向的是原型对象person 中的name，但是绑定的this还是当前的man对象。

const person = {
	age:'20多了',
	name(){
		return this.age;
	}
}
const man = {
	age:'18岁了',
	sayName(){
		return super.name();
	}
}
Object.setPrototypeOf( man, person );
let n = man.sayName();
console.log( n )	//18岁了

Object.getPrototypeOf(this).name指向的是person的name，绑定的this也是person

const person = {
	age:'20多了',
	name(){
		return this.age;
	}
}

const man = {
	age:'18岁了',
	sayName(){
		return Object.getPrototypeOf(this).name();
	}
}

Object.setPrototypeOf( man, person );
let n = man.sayName();
console.log( n )		//20多了

Object.getPrototypeOf(this).name.call(this)指向的是person的name，不过通过call改变了函数的执行上下文，所以this指向的还是man

const person = {
	age:'20多了',
	name(){
		return this.age;
	}
}
const man = {
	age:'18岁了',
	sayName(){
		return Object.getPrototypeOf(this).name.call(this)
	}
}
Object.setPrototypeOf( man, person );
let n = man.sayName();
console.log( n )	//18岁了

4.Class中的super

（1）Class中的 super()，它在这里表示父类的构造函数，用来新建父类的 this 对象

super()相当于Parent.prototype.constructor.call(this)

 class Demo{
			 
	 constructor(x,y) {
	     this.x = x;
		 this.y = y;
	 }
	 
	 customSplit(){
		 return [...this.y]
	 }
	 
 }
 
 class Demo2 extends Demo{
	 constructor(x,y){
		 super(x,y);
	 }
	 
	 customSplit(){
	 	return [...this.x]
	 }
	 
	 task1(){
		 return super.customSplit();
	 }
	 
	 task2(){
	 	return this.customSplit();
	 }
 }
 
 let d = new Demo2('hello','world');
 d.task1()	//["w", "o", "r", "l", "d"]
 d.task2()	//["h", "e", "l", "l", "o"]

（2）子类没有自己的this对象，而是继承父亲的this对象，然后进行加工。如果不调用super，子类就得不到this对象

class Demo2 extends Demo{
	constructor(x,y){
		 this.x = x;		//this is not defined
	 }
 }

ES5的继承，实质上是先创造子类的实例对象this，然后再将父类的方法添加到this上（Parent.call(this)）. ES6的继承，需要先创建父类的this，子类调用super继承父类的this对象，然后再加工。

如果子类没有创建constructor，这个方法会被默认添加:

class Demo{ 
	 constructor(x) {
	   this.x = x;
	 }
}

class Demo2 extends Demo{}

let d = new Demo2('hello');

d.x 		//hello
复制代码

（3） super 在静态方法之中指向父类，在普通方法之中指向父类的原型对象

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

链接: https://fly63.com/article/detial/4207