1. 90前端首页
  2. 前端开发
  3. JavaScript

ES6 class super

1.class

class 熟悉的关键字 我大学的主修语言是C#,class 作为后端语言定义类的关键字,引入ES6作为语法糖,引入了后端的思想在我们可以定义类,更直观的实现类的继承。在创建实例对象的时候除了实例化构造函数,还可以实例化定义好的类。constructor :其中 constructor 方法是类的构造函数,是一个默认方法,通过 new 命令创建对象实例时,
自动调用该方法。它还有几个特性这里来一个一个举例分析。

第一个:一个类必须有 constructor 方法,如果没有显式定义,一个默认的 consructor 方法会被默认添加。所以即使你没有添加构造函数,也是会有一个默认的构造函数的。

class Parent1{ a=1; } 
class Parent2{ 
    constructor(){ this.a=1; }; 
} 
console.log(new Parent1())//{a: 1}
console.log(new Parent2())//{a: 1}

也就是说即使你不添加 constructor 构造函数,它默认也会添加一个并且返回当前类的上下文。
第二个:一般 constructor 方法返回当前构造的实例对象 this ,但是也可以指定 constructor 方法返回一个全新的对象,让返回的实例对象不是该类构造的实例对象。

class Parent1{ 
    constructor(){
        this.a=1;
    };
} 
class Parent2{ 
    constructor(a){ 
        return a;
    }; 
} 
console.log(new Parent1())//{a: 1}

也就是说 constructor 默认会返回实例对象的this,但是当你为它手动添加返回值时,就改变了它的返回对象。最后总结:也就是实例化类的时候,constructor作为一个构造器 帮忙把当前类的属性实例化返回一个实例对象。
2.extends super
extends继承,是指在声明一个子类时用extends指定想要继承的父类。这从原理上其实是从父类的原型继承而来。还是拆分解读继承的特性举例说明:
(1)在子类 constructor 中必须调用 super 方法,因为子类没有自己的 this 对象,而是继承父类的 this 对象。

class Parent{ 
    constructor(){
        this.name=\"parent\"; 
    }; 
    getName(){ 
        console.log(this.name) 
    } 
} 
class Child extends Parent { 
    constructor(name){ 
        // this.name=name; 
        super();
        this.name=name;
    }; 
} 
let child = new Child(\"child\")//当this.name 在super前执行时 报错 Must call super constructor in derived class before accessing \'this 
let child = new Child(\"child\")//当this.name 在super后执行时 child.getName();// child

解释:因为子类在继承时没有一个创建上下文的过程,super 就代表了父类的构造函数 也就是Parent 的 constructor ,执行父类的构造函数实例化的对象作为子类的实例。也就是是约等于下边这种实现。

class Parent{
    constructor(){ 
        this.name=\"parent\"; 
    }; 
    getName(){ 
        console.log(this.name) 
    } 
}
class Child { 
    constructor(name){ 
        new Parent(); 
        this.name=name; 
    }; 
}

在这里需要注意super()在constructor中执行时内部的 this 指的是 B,因此 super() 在这里相当于 ```A.prototype.constructor.call(this, props)``。
(2)子类中的属性如过和父属性重复,在读取时优先读取子类里的属性。

class Parent{ 
    constructor(){ 
        this.name=\"parent\"; 
    }; 
    getName(){ 
    console.log(this.name) 
    } 
} 
class Child extends Parent { 
    constructor(){ 
        super(); 
    }; 
    getName(){ 
        console.log(\"child\") 
    } 
} 
let child = new Child(); child.getName();// child

那如果想要调用继承来的方法,但是还要添加进子类的操作呢。

class Child extends Parent { 
    constructor(){
        super(); 
    }; 
    getName(){ 
        this.name=\" from child\";
        super.getName(); 
    } 
} 
let child = new Child(); child.getName();// from child

最后附上文章参考的传送门

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021829560

展开阅读全文

发表评论

登录后才能评论