js中的super

原创
2020/10/26 16:56
阅读数 0

1.this和super的区别:

  • this关键词指向函数所在的当前对象

  • super指向的是当前对象的原型对象

const person = {
	name:'jack'
}

const man = {
	sayName(){
		return super.name;  //指向的是原型对象
	}
}

Object.setPrototypeOf( man, person );

let n = man.sayName();

console.log( n )	//jack

  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.getPrototypeOf(this)绑定的是原型的上下文
	}
}

Object.setPrototypeOf( man, person );

let n = man.sayName();

console.log( n )		//20多了

=-----------------------

Class中的super

Class中的 super(),它在这里表示父类的构造函数,用来新建父类的 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);    //super初始化this 
	 }
	 
	 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"]

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

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部