【知识拾遗】ES6 类

60 阅读2分钟

JavaScript 作为一门脚本语言,最早是没有设计面向对象系统的,以至于后来当有了需求时会有各种魔法方案,比如寄生继承,寄生组合继承,原型链继承等等。不仅概念多,还需要自己去实现。

ECMAScript 6 标准提供了 Class 类的概念,虽然它只是构造函数和原型对象的语法糖,但提供了一种极舒适的方式来编写面向对象代码。

在使用 class 关键字时,有一些比较细节的知识点,比如可以省略 constructor

constructor 的省略写法

每个类都要有一个 constructor 构造方法,它就相当于 ES6 以前写的那个大驼峰命名的构造函数。当使用 new 实例化一个类时,constructor 方法就会执行。通常在构造方法中做一些初始化的工作,比如最常用的为类成员属性赋值。

如果没有初始化工作要做,此时可以省略 constructor

class Human {}
​
// 等同于class Human {
    constructor() {}
}

ES6 中和类继承有关的两个关键字 extendssuper ,前者用来表示继承关系,后者表示父类。

在子类的构造方法中,要调用 super() 方法来实例化父类的构造方法:

class Human {
    constructor() {}
}
​
class Man extends Human{
    constructor() {
        super()
    }
}

而且如果要用到 thissuper 就要写在最上面:

class Human {
    constructor(name) {
        this.name = name
    }
}
​
class Man extends Human{
    constructor(name, sex) {
        super(name)
        this.sex = sex
    }
}

子类在继承父类时,如果不需要做初始化工作,也是可以省略 constructor 方法的:

class Human {
    
}
​
class Man extends Human{
}

类和构造函数的区别

这可以作为一道面试题。咱们就直接说答案了:

  • 类必须通过 new 去调用,构造函数就是普通函数一样的用法,直接使用 () 调用,使用 callapply 修改 this 指向等等
  • 类在执行时,内部默认开启了严格模式,构造函数需要的话要手动调用 use strict
  • 类就像 letconst 一样,存在暂时性死区,而构造函数就像普通函数一样,存在变量提升或者叫函数提升
  • 类的实例方法不能被枚举,而构造函数定义在原型对象上的方法可以被枚举

小结

本文介绍了ES6 的类在使用时省略 constructor 的写法,包括在继承时也可以省略,最后总结了几种类和传统构造函数的区别,以供参考。

感谢阅读 🍔