ES6中类Class的super关键字
super 关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。
1、super当做函数使用
super 作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次 super() 函数。注意:作为函数时,super() 只能用在子类的构造函数之中,用在其他地方就会报错。
class A {}
class B extends A {
constructor() {
super();
}
}
super 作为函数调用时,内部的 this 指的是子类实例
class A {
constructor() {
this.show();
}
}
class B extends A {
constructor() {
super();
}
show(){
console.log('实例');
}
static show(){
console.log('子类');
}
}
new B() //输出 '实例' ,new B 时触发了 B 的构造函数,所以触发了 super 方法,即触发了父类 A 的构造函数,此时的 this.show 的 this 指的是子类
2、super 作为对象使用
super 作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。
2.1、super在普通方法中(即非静态方法)及此时的 this 关键字指向
class A {
p() {
return 2;
}
}
class B extends A {
constructor() {
super();
console.log(super.p()); // 2 此时的super指向父类原型对象,即 A.prototype
}
}
let b = new B(); //
由于在普通方法中的 super 指向父类的原型对象,所以如果父类上的方法或属性是定义在实例上的,就无法通过 super 调用的。如下所示:
class A {
constructor() { //在构造函数上定义的属性和方法相当于定义在父类实例上的,而不是原型对象上
this.p = 2;
}
}
class B extends A {
get m() {
return super.p;
}
}
let b = new B();
console.log(b.m) // undefined
在子类普通方法中通过 super 调用父类的方法时,方法内部的 this 指向的是当前的子类实例。
class A {
constructor() {
this.x = 1;
}
print() {
console.log(this.x);
}
}
class B extends A {
constructor() {
super();
this.x = 2;
super.y = 123; //如果通过super对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。
}
m() {
super.print();
}
}
let b = new B();
b.m() //
console.log(b.y); //
2.2、super在静态方法中及此时的 this 关键字指向
super作为对象,用在静态方法之中,这时 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
在子类的静态方法中通过 super 调用父类的方法时,方法内部的 this 指向当前的子类,而不是子类的实例。
class A {
constructor() {
this.x = 1;
}
static print() {
console.log(this.x);
}
}
class B extends A {
constructor() {
super();
this.x = 2;
}
static m() {
super.print();
}
}
B.x = 3;
B.m() //
ES6中类Class的super关键字的更多相关文章
- ES6中构造函数内super关键字的使用
super关键字用于访问和调用一个对象的父对象上的函数. super.prop和super[expr]表达式在类和对象字面量任何方法定义中都是有效的. 语法 super([arguments]); / ...
- 你真的了解[super ]关键字吗?
前言 此篇文章是看了阮老师的es6教程,看到super关键字的时候觉得有必要总结梳理一下,原文还是参考 ECMAScript 6入门. 正文 super 这个关键字,既可以当作函数使用,也可以当作对象 ...
- es6 super关键字
rhttp://es6.ruanyifeng.com/#docs/class-extends super关键字,既可以当作函数使用,也可以当作对象使用.这俩种的使用是不一样的 第一种:函数使用 代表父 ...
- ES6中class方法及super关键字
ES6 class中的一些问题 记录下class中的原型,实例,super之间的关系 //父类 class Dad { constructor(x, y) { this.x = 5; this.y = ...
- 浅谈ES6中super关键字
作用: super 关键字用于访问父对象上的函数. 语法: super([arguments]); // 访问父对象上的构造函数 super.functionOnParent([arguments]) ...
- Es6 类的关键 super、static、constructor、new.target
ES6引入了Class(类)这个概念,作为对象的模板,通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对 ...
- 24 类:组合 继承 super关键字 面向对象的三大性
组合 组合:自定义类的对象作为另外一个类的属性 class Teacher: def __init__(self, name, age): self.name = name self.age = ag ...
- ES6 extends继承及super使用读书笔记
extends 继承 extends 实现子类的继承 super() 表示父类的构造函数, 子类必须在 constructor中调用父类的方法,负责会报错. 子类的 this 是父类构造出来的, 再在 ...
- Class的使用,构造方法,实例属性和实例方法,静态属性和静态方法,this和super关键字,类的继承
s6新增了一种定义对象实例的方法,Class(类)这个概念,作为对象的模板.class可以看作只是一个语法糖,通过class关键字,可以定义类.让对象原型的写法更加清晰.更像面向对象编程的语法. 一. ...
随机推荐
- 【CDN+】 Spark入门---Handoop 中的MapReduce计算模型
前言 项目中运用了Spark进行Kafka集群下面的数据消费,本文作为一个Spark入门文章/笔记,介绍下Spark基本概念以及MapReduce模型 Spark的基本概念: 官网: http://s ...
- webService接口的py文件打包成exe
(一)webService接口的py文件打包成exe,在python3.5版本.pyInstaller3.2版本.pywin32-219.win-amd64-py3.5版本打包时报错,原因可能是pyi ...
- tr:hover变色的问题
做表格隔行变色(高亮显示),可以通过设置css中的 tr:hover伪类属性达到效果, 但是,会出一点小问题.td的背景色会覆盖tr的背景色, 在tr:hover下边加上一句:tr:hover td{ ...
- 《图解设计模式》读书笔记1-1 Iterator模式
目录 迭代器模式的类图 类图的解释 迭代器模式的代码 解释 原因 思想 迭代器模式的类图 类图的解释 名称 说明 Aggregate 集合接口,有提供迭代器的方法 Iterator 迭代器接口,提供迭 ...
- jmeter之图片上传
用jmeter来实现图片上传请求 目录 1.抓取参数 2.填写参数 1.抓取参数 第一步:先用fiddler抓取上传接口的参数 2.填写参数 第一步:在jmeter的参数列填写没有filename的这 ...
- openstack——glance镜像服务
一.glance介绍: Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供Restful API可以查 ...
- delphi 获得时间戳 毫秒数
function DateTimeToMilliseconds(const ADateTime: TDateTime): Int64; //获得毫秒var LTimeStamp: TTimeStamp ...
- 设计模式 - 门面模式(Facade Pattern,也叫外观模式)
简介 场景 将系统划分为若干个子系统有利于降低系统的复杂性,但是这会增加调用者的复杂性.通过引入 Facade 可以对调用者屏蔽系统内部子系统的细节. Java 中有多个日志库,例如 log4j.lo ...
- ICPC2019上海区域赛 部分题解(正在更新)
K. Color Graph 题意: 给定一个简单图,点个数<=16,删去部分边后,使得该图中无边数为奇数得环,问剩下的边数最大为多少? 思路: 如果一个图中无奇数边的环,那么这个图一定是个二分 ...
- VS2012生成Web时报未能找到元数据文件xxx.dll
问题:引用里已经添加了,还是报‘未能找到元数据文件xxx.dll’ 解决:添加了相同的不同路径的xxx.dll文件,删掉一个用不到的,就不报错了