【前端拾遗】ES6 Class

简介: 介绍一些 ES6 中的 class 的知识点。

constructor 的省略写法

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 的写法,包括在继承时也可以省略,最后总结了几种类和传统构造函数的区别,以供参考。

感谢阅读 🍔

class Human {
    constructor(name) {
        this.name = name
    }
    
    say() {
        
    }
}

let human = new Human('茉莉')
for(let key in human) {
    console.log(key)
}

function Person(name) {
    this.name = name
}

Person.prototype.say = function() {}

let person = new Person('茉莉')
for(let key in person) {
    console.log(key)
}
目录
相关文章
|
2月前
|
前端开发 JavaScript Java
ES6前端就业课第三课之class
ES6前端就业课第三课之class
50 0
|
18天前
|
前端开发 JavaScript Java
【前端技术】 ES6 介绍及常用语法说明
【前端技术】 ES6 介绍及常用语法说明
18 4
|
2月前
|
前端开发 JavaScript
【Web 前端】ES6新增的内容有哪些?
【5月更文挑战第1天】【Web 前端】ES6新增的内容有哪些?
【Web 前端】ES6新增的内容有哪些?
|
2月前
|
前端开发 JavaScript
前端 js 经典:class 类
前端 js 经典:class 类
10 2
|
2月前
|
前端开发 JavaScript
前端 TS 快速入门之三:class 类
前端 TS 快速入门之三:class 类
36 1
|
2月前
|
前端开发 JavaScript
前端 JS 经典:Class 面向对象
前端 JS 经典:Class 面向对象
15 1
|
2月前
|
自然语言处理 前端开发
【Web 前端】es6 中的箭头函数?
【5月更文挑战第1天】【Web 前端】es6 中的箭头函数?
|
2月前
|
存储 前端开发 索引
【Web 前端】ES6中,Set和Map的区别 ?
【5月更文挑战第1天】【Web 前端】ES6中,Set和Map的区别 ?
|
2月前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
2月前
|
JavaScript 前端开发
前端 JS 经典:ES6 和 CommonJs 用法
前端 JS 经典:ES6 和 CommonJs 用法
26 0