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同时是ColorPointPoint两个类的实例,这与 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的继承的更多相关文章

  1. es6从零学习(三):Class的基本用法

    es6从零学习(三):Class的基本用法 一:定义一个类 //定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toSt ...

  2. es6从零学习(五):Module的语法

    es6从零学习(五):Module的语法 ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量 一:es6模块化和 CommonJS 和 AMD 模块 (运行 ...

  3. es6从零学习(二):promise

    es6从零学习(二):promise 一:promise的由来 某些情况下,回调嵌套很多时,代码就会非常繁琐,会给我们的编程带来很多的麻烦,这种情况俗称——回调地狱.由此,Promise的概念就由社区 ...

  4. es6从零学习(一)let 和 const 命令

    es6从零学习(一):let 和 const 命令 一:let 变量 1.块级作用域{}:let只在自己的块级作用域内有效. for(let i =0;i<3;i++) { console.lo ...

  5. 从零学习Fluter(八):Flutter的四种运行模式--Debug、Release、Profile和test以及命名规范

    从零学习Fluter(八):Flutter的四种运行模式--Debug.Release.Profile和test以及命名规范 好几天没有跟新我的这个系列文章,一是因为这两天我又在之前的基础上,重新认识 ...

  6. “全栈2019”Java第四十四章:继承

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. 2、JavaScript 基础二 (从零学习JavaScript)

     11.强制转换 强制转换主要指使用Number.String和Boolean三个构造函数,手动将各种类型的值,转换成数字.字符串或者布尔值. 1>Number强制转换 参数为原始类型值的转换规 ...

  8. 1、JavaScript 基础一 (从零学习JavaScript)

    1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...

  9. Android JNI学习(四)——JNI的常用方法的中文API

    本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...

随机推荐

  1. ABAP术语-RFC (Remote Function Call)

    RFC (Remote Function Call) 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/12/1101581.html RFC ...

  2. MySQL常用参数说明(持续更新)

      ##innodb correlate   innodb_flush_log_at_trx_commit value: 0,[1],2 effect: control the flush opera ...

  3. js 校验身份证号

    根据地区编码.身份证格式.18位身份证需要验证最后一位校验位 //校验身份证 function IdentityCodeValid(code) { var city = { 11: "北京& ...

  4. 为什么后台返回的日期我输出处理了在苹果手机里显示NAN?

      现象:   //结束时间var ent_time ="2018-04-28 09:36:00"alert((Date.parse(new Date(ent_time))));/ ...

  5. 关于485通信不稳定问题解决方案[STM32产品问题]

    485通讯不稳定的问题(具体表现为有时能通讯上,有时通讯不上) RS485在连接设备过多.通讯距离过长.双绞线质量差,接线不规范等,都会导致通讯不稳定的问题. 解决方案: 一.关于485总线的几个概念 ...

  6. vue实现图片路径传送

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  7. OKVIS(一)初始化流程及代码结构

    OKVIS代码结构: okvis_apps: your own app okvis_ceres: backend main code, estimator, error term;  okvis_co ...

  8. dubbo之注册管理中心

    一.在dubbo的框架中注册中心是必要的一个环节,这个也是分布式部署的一个必要环节.在dubbo的架构基本图中可以看出,基本上所有的服务都是通过注册中心进行注册,然后在通过注册中心,暴露出接口来. 二 ...

  9. 阅读笔记《JavaScript高级程序设计》

    0. 严格模式 "user strict" (1整个脚本顶部,2函数体顶部) 1. 数据类型 undefined -- 未定义 boolean string number obje ...

  10. Redis系列一 Redis安装

    Redis系列一    Redis安装 1.安装所使用的操作系统为Ubuntu16.04 Redis版本为3.2.9 软件一般下载存放目录为/opt,以下命令操作目录均为/opt root@ubunt ...