[基础,TIP]类的构造方法也可以不返回实例?🤯

构造方法

简介

在 JavaScript 中, class 是一种更简洁的、更面向对象的语法来创建对象和处理继承的方式. constructor 是类的一个特殊方法, 用于初始化创建类的实例. 当使用 new 关键字创建类的实例时, constructor 方法会自动被调用进行实例的初始化.

示例

js 复制代码
class Person {
  constructor(name) {
    this.name = name
  }
}

const person = new Person('John')

console.log(person.name) // John

在这个示例中, 我们定义了一个 Person 类, 并在其 constructor 方法中初始化了 name 属性. 然后我们使用 new 关键字创建了一个 Person 类的实例, 并将其赋值给 person. 最后, 我们使用 person.name 来访问 name 属性的值.

在这其中我们没有手动的调用 constructor 方法, 但他却自动调用了, 这就是因为我们使用了 new 关键字, 所以自动调用了 constructor 方法.

那些你可能不知道的事

根据 TC39 的描述, constructor 方法其实可以返回 3 种结果

  • EMPTY
  • ClassElement
  • ClassElementList

EMPTY

EMPTY 就是什么都不返回, 在这种情况下会自动返回当前 class 的实例, 例如示例中的 Person 类一样, 他就是直接返回了 Person 类本身的实例

ClassElement

ClassElement 从字面上理解就是一个 class 元素, 如果返回 class 元素的话, 那这个 constructor 不会直接返回这个新的 class 元素, 而不是 new 的那个类的实例

从字面上来看的话他应该需要一个 class 元素, 但是实际上, 只要不是基本数据类型, 都可以替换类本身的实例

如果返回的是一个基本数据类型的话那么和返回 EMPTY 是没有本质区别的

示例

js 复制代码
const ageObj = { age: 20 }

class Person {
  constructor(name) {
    this.name = name
    return ageObj
  }
}

const person = new Person('John')
console.log(person.name) // undefined
console.log(person.age) // 20
console.log(person) // { age: 20 }
console.log(person instanceof Person) // false
console.log(person === ageObj) // true

ClassElementList

ClassElementList 就是一个 class 元素列表, 如果返回 class 元素列表的话, 那么这个 constructor 就会返回一个新的 class 元素列表, 而不是 new 的那个类的实例

同样, 从字面上来看的话他是一个 class 元素列表, 但是实际上, 他可以返回任何类型的数组, 包括 [1], [''], [true] 等, 他并不会深度判断数组中元素的实际类型

ClassElement 的返回值为一个数组那就是 ClassElementList 了, 只是底层会被识别为 ClassElementList 罢了

对于我们使用者来说的话, ClassElementList 和 ClassElement 没啥区别

补充

当然不仅是 class 的 constructor 满足这个返回规则, function 类也满足这个返回值的规则

js 复制代码
const obj = {}

class A {
    constructor () {
        this.value = 'test-A'
        return obj
    }
}

function B() {
    this.value = 'test-B'
    return obj
}

const a = new A()
const b = new B()

console.log(a.value) // undefined
console.log(b.value) // undefined

console.log(a === b) // true

总结

所以大家平时如果需要用 constructor 返回的话还是需要注意一下返回结果是否会超出你的预期, 不然万一出问题了, 连问题出在哪里都不知道那可就很尴尬啦~ 💩

相关推荐
东东23326 分钟前
前端规范工具之husky与lint-staged
前端·javascript·eslint
岁月宁静1 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
atwednesday1 小时前
日志处理
javascript
#做一个清醒的人1 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm
拉不动的猪1 小时前
图文引用打包时的常见情景解析
前端·javascript·后端
rit84324992 小时前
ES6 箭头函数:告别 `this` 的困扰
开发语言·javascript·es6
摸鱼的春哥2 小时前
【编程】是什么编程思想,让老板对小伙怒飙英文?Are you OK?
前端·javascript·后端
webxin6662 小时前
页面动画和延迟加载动画的实现
前端·javascript
duandashuaige3 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
渣哥3 小时前
当容器里有多个 Bean,@Qualifier 如何精准定位?
javascript·后端·面试