【前端拾遗】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)
}
目录
相关文章
|
1月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
76 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
2月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
2月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
3月前
|
JavaScript 前端开发 API
揭秘现代前端开发秘籍:Vue.js与ES6如何联手打造惊艳应用?
【8月更文挑战第30天】本文介绍如何从零开始使用Vue.js与ES6创建现代前端应用。首先,通过简要介绍Vue.js和ES6的新特性,使读者了解这两者为何能有效提升开发效率。接着,指导读者使用Vue CLI初始化项目,并展示如何运用ES6语法编写Vue组件。最后,通过运行项目验证组件功能,为后续开发打下基础。适用于希望快速入门Vue.js与ES6的前端开发者。
69 3
|
5月前
|
前端开发 JavaScript Java
【前端技术】 ES6 介绍及常用语法说明
【前端技术】 ES6 介绍及常用语法说明
48 4
|
6月前
|
前端开发 JavaScript
【Web 前端】ES6新增的内容有哪些?
【5月更文挑战第1天】【Web 前端】ES6新增的内容有哪些?
【Web 前端】ES6新增的内容有哪些?
|
6月前
|
前端开发 JavaScript
前端 js 经典:class 类
前端 js 经典:class 类
41 2
|
6月前
|
前端开发 JavaScript
前端 TS 快速入门之三:class 类
前端 TS 快速入门之三:class 类
89 1
|
6月前
|
前端开发 JavaScript
前端 JS 经典:Class 面向对象
前端 JS 经典:Class 面向对象
36 1
|
6月前
|
自然语言处理 前端开发
【Web 前端】es6 中的箭头函数?
【5月更文挑战第1天】【Web 前端】es6 中的箭头函数?