js中的super的使用

更新日期: 2019-07-16阅读: 6.8k标签: 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://www.fly63.com/article/detial/4207

ES6 类继承 和 super的使用

ES6中继承的子类中,如果使用构造函数constructor()那么就必须使用 super()方法初始化,这样下面才可以调用this关键字。super()只能用在子类的构造函数之中,用在其他地方就会报错。

谈谈super(props) 的重要性

我听说 Hooks 最近很火。讽刺的是,我想用一些关于 class 组件的有趣故事来开始这篇文章。你觉得如何?本文中这些坑对于你正常使用 React 并不是很重要。 但是假如你想更深入的了解它的运作方式,就会发现实际上它们很有趣。

ES6 class继承与super关键词深入探索

在ES6版本之前,JavaScript语言并没有传统面向对象语言的class写法,ES6发布之后,Babel迅速跟进,广大开发者也很快喜欢上ES6带来的新的编程体验。当然,在这门“混乱”而又精妙的语言中,许多每天出现我们视野中的东西却常常被我们忽略。

为什么我们要写 super(props) ?

据说 Hooks 势头正盛,不过我还是想略带调侃地从 class 的有趣之处开始这篇博客。可还行?这些梗对于使用 React 输出产品并不重要

jses6语法:class类 class继承 super关键字

Class可以通过extends关键字实现继承,这比ES5通过修改原型链实现继承,super关键字既可以当做函数使用,也可以当做对象使用,当做函数使用的时候,代表的是父类的构造函数

es6中class类、super和estends关键词

JavaScript 语言在ES6中引入了 class 这一个关键字,在学习面试的中,经常会遇到面试官问到谈一下你对 ES6 中class的认识,同时我们的代码中如何去使用这个关键字,使用这个关键字需要注意什么,这篇来总结一下相关知识点。

面试官:this和super有什么区别?this能调用到父类吗?

this 和 super 都是 Java 中的关键字,都起指代作用,当显示使用它们时,都需要将它们放在方法的首行(否则编译器会报错)。this 表示当前对象,super 用来指代父类对象

ES6中class方法及super关键字

记录下class中的原型,实例,super之间的关系,构造器中的this指向实例对象,在构造函数上定义的属性和方法相当于定义在类实例上的,而不是原型对象上

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!