es6从零学习(四):Class的继承
es6从零学习(四):Class的继承
一:继承的方式
1、Class 可以通过extends
关键字实现继承
class Point {
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
} toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
constructor
方法和toString
方法之中,都出现了super
关键字,它在这里表示父类的构造函数,用来新建父类的this
对象。
子类必须在constructor
方法中调用super
方法,否则新建实例时会报错。这是因为子类没有自己的this
对象,而是继承父类的this
对象,然后对其进行加工。
如果不调用super
方法,子类就得不到this
对象。这是因为:ES6 的继承机制完全不同,实质是先创造父类的实例对象this
(所以必须先调用super
方法),然后再用子类的构造函数修改this
。
2、在子类的构造函数中,只有调用super
之后,才可以使用this
关键字,否则会报错。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
} class ColorPoint extends Point {
constructor(x, y, color) {
this.color = color; // ReferenceError
super(x, y);
this.color = color; // 正确
}
}
这是因为子类实例的构建,是基于对父类实例加工,只有super
方法才能返回父类实例。
3、子类实例对象同时是父类和子类两个类的实例
let cp = new ColorPoint(25, 8, 'green'); cp instanceof ColorPoint // true
cp instanceof Point // true
上面代码中,实例对象cp
同时是ColorPoint
和Point
两个类的实例,这与 ES5 的行为完全一致。
4、父类的静态方法,也会被子类继承。
二:Object.getPrototypeOf()
Object.getPrototypeOf
方法可以用来从子类上获取父类。
Object.getPrototypeOf(ColorPoint) === Point
// true
因此,可以使用这个方法判断,一个类是否继承了另一个类。
三:super 关键字
super
这个关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。
1、super
作为函数调用时,代表父类的构造函数
class A {} class B extends A {
constructor() {
super();
}
}
上面代码中,子类B
的构造函数之中的super()
,代表调用父类的构造函数。这是必须的,否则 JavaScript 引擎会报错。
2、作为函数时,super()
只能用在子类的构造函数之中,用在其他地方就会报错。
class A {} class B extends A {
m() {
super(); // 报错
}
}
3、super
作为对象时,在普通方法中,指向父类的原型对象,在静态方法中,指向父类。;
class A {
p() {
return 2;
}
} class B extends A {
constructor() {
super();
console.log(super.p()); // 2
}
} let b = new B();
4、由于super
指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super
调用的。
class A {
constructor() {
this.x = 1
}
} class B extends A {
constructor() {
super()
console.log(super.x) // undefined
}
}
let p = new B()
5、如果属性定义在父类的原型对象上,super
就可以取到。
class A {
constructor() {
this.x = 1
}
}
A.prototype.x = 2 class B extends A {
constructor() {
super()
console.log(super.x) //2
}
}
let p = new B()
6、通过super
调用父类的方法时,方法内部的this
指向子类
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
上面代码中,super.print()
虽然调用的是A.prototype.print()
,但是A.prototype.print()
内部的this
指向子类B
,导致输出的是2
,而不是1
。
7、如果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
在静态方法之中指向父类,在普通方法之中指向父类的原型对象。
8、使用super
的时候,必须显式指定是作为函数、还是作为对象使用,否则会报错。
class A {} class B extends A {
constructor() {
super();
console.log(super); // 报错
}
}
9、由于对象总是继承其他对象的,所以可以在任意一个对象中,使用super
关键字。
var obj = {
toString() {
return "MyObject: " + super.toString();
}
}; obj.toString(); // MyObject: [object Object]
四:类的prototype和__proto__属性
1、子类的__proto__
属性,表示构造函数的继承,总是指向父类。
class A {
} class B extends A {
} B.__proto__ === A // true
2、子类prototype
属性的__proto__
属性,表示方法的继承,总是指向父类的prototype
属性。
class A {
} class B extends A {
} B.prototype.__proto__ === A.prototype // true
es6从零学习(四):Class的继承的更多相关文章
- es6从零学习(三):Class的基本用法
es6从零学习(三):Class的基本用法 一:定义一个类 //定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toSt ...
- es6从零学习(五):Module的语法
es6从零学习(五):Module的语法 ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量 一:es6模块化和 CommonJS 和 AMD 模块 (运行 ...
- es6从零学习(二):promise
es6从零学习(二):promise 一:promise的由来 某些情况下,回调嵌套很多时,代码就会非常繁琐,会给我们的编程带来很多的麻烦,这种情况俗称——回调地狱.由此,Promise的概念就由社区 ...
- es6从零学习(一)let 和 const 命令
es6从零学习(一):let 和 const 命令 一:let 变量 1.块级作用域{}:let只在自己的块级作用域内有效. for(let i =0;i<3;i++) { console.lo ...
- 从零学习Fluter(八):Flutter的四种运行模式--Debug、Release、Profile和test以及命名规范
从零学习Fluter(八):Flutter的四种运行模式--Debug.Release.Profile和test以及命名规范 好几天没有跟新我的这个系列文章,一是因为这两天我又在之前的基础上,重新认识 ...
- “全栈2019”Java第四十四章:继承
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 2、JavaScript 基础二 (从零学习JavaScript)
11.强制转换 强制转换主要指使用Number.String和Boolean三个构造函数,手动将各种类型的值,转换成数字.字符串或者布尔值. 1>Number强制转换 参数为原始类型值的转换规 ...
- 1、JavaScript 基础一 (从零学习JavaScript)
1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...
- Android JNI学习(四)——JNI的常用方法的中文API
本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...
随机推荐
- ABAP术语-RFC (Remote Function Call)
RFC (Remote Function Call) 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/12/1101581.html RFC ...
- MySQL常用参数说明(持续更新)
##innodb correlate innodb_flush_log_at_trx_commit value: 0,[1],2 effect: control the flush opera ...
- js 校验身份证号
根据地区编码.身份证格式.18位身份证需要验证最后一位校验位 //校验身份证 function IdentityCodeValid(code) { var city = { 11: "北京& ...
- 为什么后台返回的日期我输出处理了在苹果手机里显示NAN?
现象: //结束时间var ent_time ="2018-04-28 09:36:00"alert((Date.parse(new Date(ent_time))));/ ...
- 关于485通信不稳定问题解决方案[STM32产品问题]
485通讯不稳定的问题(具体表现为有时能通讯上,有时通讯不上) RS485在连接设备过多.通讯距离过长.双绞线质量差,接线不规范等,都会导致通讯不稳定的问题. 解决方案: 一.关于485总线的几个概念 ...
- vue实现图片路径传送
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- OKVIS(一)初始化流程及代码结构
OKVIS代码结构: okvis_apps: your own app okvis_ceres: backend main code, estimator, error term; okvis_co ...
- dubbo之注册管理中心
一.在dubbo的框架中注册中心是必要的一个环节,这个也是分布式部署的一个必要环节.在dubbo的架构基本图中可以看出,基本上所有的服务都是通过注册中心进行注册,然后在通过注册中心,暴露出接口来. 二 ...
- 阅读笔记《JavaScript高级程序设计》
0. 严格模式 "user strict" (1整个脚本顶部,2函数体顶部) 1. 数据类型 undefined -- 未定义 boolean string number obje ...
- Redis系列一 Redis安装
Redis系列一 Redis安装 1.安装所使用的操作系统为Ubuntu16.04 Redis版本为3.2.9 软件一般下载存放目录为/opt,以下命令操作目录均为/opt root@ubunt ...