利用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 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
HTML+JS实现在线朗读器
Feb 15 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
新手学习PHP的一些基础知识分享
2011/07/27 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
设定php简写功能的方法
2019/11/28 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
javascript json2 使用方法
2010/03/16 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python实现的特征提取操作示例
2018/12/03 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
德国自行车商店:Tretwerk
2019/06/21 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
应用数学专业求职信
2014/03/14 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2015年大学生工作总结
2015/04/21 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python