利用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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
vue 页面跳转的实现方式
Jan 12 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使用异或实现的加密解密实例
2013/09/04 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
js验证上传图片的方法
2015/05/12 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Django的分页器实例(paginator)
2017/12/01 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python字符串循环左移
2019/03/08 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
应届行政管理专业个人自我评价
2013/12/28 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书