ES6: extends

2020-07-08  本文已影响0人  前端的爬行之旅

基本用法

ES6中有关class的继承方式,引入了extends关键字。但其本质仍然是构造函数+原型链的组合式继承。

举个🌰:

class A {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    getName() {
        return this.name;
    }
}

class B extends A {
    constructor(name, age) {
        super(name, age);
        this.job = "IT";
    }
    getJob() {
        return this.job;
    }
    getNameAndJob() {
        return super.getName() + this.job;
    }
}

var b = new B("Tom", 20);
console.log(b.name);
console.log(b.age);
console.log(b.getName());
console.log(b.getJob());
console.log(b.getNameAndJob());
//输出:Tom,20,Tom,IT,TomIT

重点解析之extends关键字

上面代码定义了一个B类(class),该类通过extends关键字,继承了A类的所有属性和方法。A类中的所有方法默认是添加到B的原型上,所以extends继承的实质仍然是原型链。

测试代码:

console.log("constructor" in b);
console.log("getName" in b); 
console.log(b.hasOwnProperty("getName"));
console.log(b.hasOwnProperty("constructor"));
//输出:true,true,false,false

参考链接: https://www.imooc.com/article/79235
更多细节参考:https://segmentfault.com/a/1190000021306417

上一篇 下一篇

猜你喜欢

热点阅读