ES6的继承里,有用到`super`这个关键词。它既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。
<br>
**一、作为函数调用时,代表父类的构造函数**
```
class A {}
class B extends A {
constructor() {
super();
}
}
```
注意,`super`虽然代表了父类A的构造函数,但是返回的是子类B的实例,即`super`内部的this指的是B的实例。而且,作为函数时,super()只能用在子类的构造函数之中,用在其他地方就会报错
<br>
**二、super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类**
请注意以下几点:
1. 由于`super`指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过`super`调用的。示例如下:
~~~javascript
class A {
constructor() {
this.p = 2;
}
}
class B extends A {
get m() {
return super.p;
}
}
let b = new B();
b.m // undefined
~~~
2. ES6 规定,在子类普通方法中通过`super`调用父类的方法时,方法内部的`this`指向当前的子类实例。示例如下:
~~~javascript
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
~~~
3. 由于`this`指向子类实例,所以如果通过`super`对某个属性赋值,这时`super`就是`this`,赋值的属性会变成子类实例的属性。示例如下:
~~~javascript
class A {
constructor() {
this.x = 1;
}
}
class B extends A {
constructor() {
super();
this.x = 2;
super.x = 3; // 这里的super相当于this
console.log(super.x); // undefined (这里super)
console.log(this.x); // 3
}
}
let b = new B();
~~~
4. 如果`super`作为对象,用在静态方法之中,这时`super`将指向父类,而不是父类的原型对象。示例如下:
~~~javascript
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
~~~
另外,在子类的静态方法中通过`super`调用父类的方法时,方法内部的`this`指向当前的子类,而不是子类的实例。
- JS系列
- jQuery和axios的同步请求
- FormData和文件上传
- Http请求参数系列
- 面向对象:JS中的类与继承
- super关键字总结
- import和require语法的报错解决
- 常用的N个JS函数
- ES6新增的Set和Map
- 关于this的学习
- 人人都要会的防抖和节流
- AJAX的简单实现
- Vue
- nuxt
- 在nuxt中引入qrcode或者其他依赖包
- iVew
- 树形控件Tree的render函数
- 自定义组件:Upload封装
- React
- antd自适应高度表格
- 两个常用生命周期函数总结
- antd表格跨行处理(动态数据)
- antd中表单自定义验证踩坑
- Form+Upload实现文件上传全步骤
- 在react中实现Excel导出
- 表格嵌套和子表展开的处理
- 关于表格打印的一点思路
- Select组件中的模糊筛选
- echarts使用与总结
- echarts在react中的使用
- 简单的双层上下钻
- 复杂的多层上下钻(多次请求)
- 复杂的多层上下钻(单次请求)
- Git使用
- git基础一:安装git以及基本命令
- git基础二:add和commit
- 地图API
- 手动绘制点来实现驾车导航
- 地图自定义控件的使用
- 利用自定义标注实现头像展示
- 杂谈与总结
- 谈代码的可读性
- 简单总结判断代码质量的维度
- 3W模型看面向对象
