利用es6 new.target来对模拟抽象类的方法


Posted in Javascript onMay 10, 2019

起源

最近在使用 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
  • 修饰器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
Angular4.0动画操作实例详解
May 10 #Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 #Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 #Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 #Javascript
Vue项目中配置pug解析支持
May 10 #Javascript
Angular2实现的秒表及改良版示例
May 10 #Javascript
node中IO以及定时器优先级详解
May 10 #Javascript
You might like
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
原始的js代码和jquery对比体会
2013/09/10 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
小程序实现图片移动缩放效果
2020/05/26 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python实现目录树生成示例
2014/03/28 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
浅析python参数的知识点
2018/12/10 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python简单验证码识别的实现方法
2019/05/10 Python
python银行系统实现源码
2019/10/25 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
大型会议接待方案
2014/03/01 职场文书
大学信息公开实施方案
2014/03/09 职场文书
十佳党员事迹材料
2014/08/28 职场文书
学生会辞职信
2015/03/02 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
行政处罚听证告知书
2015/07/01 职场文书