分类
标签
AI AionUi AI工作台 AI模型交互 Android CSS DevOps Dioxus Docker Docker Swarm ECS Electron Flutter Frontend Go Grok Hono HonoX HTML5 IoT IPC通信 IPFS Islands 架构 JavaScript JAX K3s Kamal Kubernetes n8n Pagefind React React Native Reactive Rust SaaS Serverless SQLite Tauri TF-IDF Transformer Twitter TypeScript UI Framework Vue Wails Web API WebAssembly WebSocket Web应用 Web服务器 Web框架 不可变数据 云原生 代码重构 信息流 倒排索引 全文检索 全栈框架 最佳实践 分布式 前端优化 动画 博客 后端 图片 存储 定时器 容器化 容器编排 小程序 工作流 工具 工具开发 工程化 并发 开发工具 异步 微服务 快速开发 思考 性能优化 技术选型 推荐系统 搜索引擎 效率 数据可视化 数据处理 数据流转 数据结构 无障碍服务 机器学习 架构 架构设计 框架 模板 流式处理 深度学习 游戏开发 状态管理 用户体验 看板 移动端 算法 组件 缓存 编译器 自动化 设计模式 负载均衡 跨平台 跨平台开发 路由 边缘计算 运维 部署 重构 集群管理 静态网站
911 字
5 分钟
利用 es6 new.target 来对模拟抽象类
起源
最近在使用 Symbol 来做为唯一值,发现 Symbol 无法进行 new 操作,只能当作函数使用,只要进行了new 就会发生类型错误
new Symbol()
// error
Uncaught TypeError: Symbol is not a constructor
at new Symbol (<anonymous>)
at <anonymous>:1:1在不考虑底层实现的情况下,在代码层面是否能够实现一个函数只可以进行调用而不可以进行 new 操作呢?思考之后如下写出:
function disConstructor() {
if (this !== window) {
throw new TypeError(' disConstructor is not a constructor')
}
console.log('gogo go')
}
// 测试结果如下
disConstructor() // gogo go
new disConstructor()
// error
Uncaught TypeError: disConstructor is not a constructor
at new disConstructor (<anonymous>:3:15)
at <anonymous>:1:1如果使用 nodejs,window 可以切换为 global, 代码运行结果不变,因为对于个人而言没有适用场景。于是就没有继续研究下去,可是最近在从新翻阅 es6 时候发现 new.target这个属性。
new.target 属性
介绍(引用 mdn 文档)
new.target属性允许你检测函数或构造方法是否是通过new运算符被调用的。
在通过new运算符被初始化的函数或构造方法中,new.target返回一个指向构造方法或函数的引用。在普通的函数调用中,new.target 的值是undefined。
这样的话 我们的代码就可以这样改为
function disConstructor() {
// 普通的函数调用中,new.target 的值是undefined。
if (new.target) {
throw new TypeError(' disConstructor is not a constructor')
}
console.log('gogo go')
}得到与上述代码一样的答案。
深入
难道 es6 特地添加的功能仅仅只能用于检查一下我们的函数调用方式吗?
在查阅的过程各种发现了大多数都方案都是用 new.target 写出只能被继承的类。类似于实现java的抽象类。
class Animal {
constructor(name, age) {
if (new.target === Animal) {
throw new Error('Animal class can`t instantiate');
}
this.name = name
this.age = age
}
// 其他代码
...
}
class Dog extends Animal{
constructor(name, age, sex) {
super(name, age)
this.sex = sex
}
}
new Animal()
// error
Uncaught Error: Animal class can`t instantiate
at new Animal (<anonymous>:4:13)
at <anonymous>:1:1
new Dog('mimi', 12, '公')
// Dog {name: "mimi", age: 12, sex: "公"}
但是 java抽象类抽象方法需要重写,这个是没有方案的。于是在测试与使用的过程中,却意外发现了超类可以在构造期间访问派生类的原型,利用起来。
class Animal {
constructor(name, age) {
console.log(new.target.prototype)
}
// 其他代码
...
}之前运行时调用需要重写的方法报错是这样写的。
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
getName () {
throw new Error('please overwrite getName method')
}
}
class Dog extends Animal{
constructor(name, age, sex) {
super(name, age)
this.sex = sex
}
}
const pite = new Dog('pite', 2, '公')
a.getName()
// error
Uncaught Error: please overwrite getName method
at Dog.getName (<anonymous>:8:11)
at <anonymous>:1:3然而此时利用 new.target ,我就可以利用 构造期间 对子类进行操作报错。
class Animal {
constructor(name, age) {
// 如果 target 不是 基类 且 没有 getName 报错
if (new.target !== Animal && !new.target.prototype.hasOwnProperty('getName')) {
throw new Error('please overwrite getName method')
}
this.name = name
this.age = age
}
}
class Dog extends Animal{
constructor(name, age, sex) {
super(name, age)
this.sex = sex
}
}
const pite = new Dog('pite', 2, '公')
// error
Uncaught Error: please overwrite getName method
at new Animal (<anonymous>:5:13)
at new Dog (<anonymous>:14:5)
at <anonymous>:1:1此时可以把运行方法时候发生的错误提前到构造时期,虽然都是在运行期,但是该错误触发机制要早危害要大。反而对代码是一种保护。
当然了,利用超类可以在构造期间访问派生类的原型作用远远不是那么简单,必然是很强大的,可以结合业务场景谈一谈理解和作用。
其他方案
- 增加 编辑器插件
- proxy
- 修饰器
利用 es6 new.target 来对模拟抽象类
https://wsafight.github.io/personBlog/posts/new-target/