利用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 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
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
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
python实现一个简单的ping工具方法
2019/01/31 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
django列表筛选功能的实现代码
2020/03/27 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
美国知名艺术画网站:Art.com
2017/02/09 全球购物
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
开业典礼主持词
2014/03/21 职场文书
大二学习计划书范文
2014/04/27 职场文书
活动宣传策划方案
2014/05/23 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
餐馆开业致辞
2015/08/01 职场文书
PyMongo 查询数据的实现
2021/06/28 Python