简单了解TypeScript中如何继承 Error 类


Posted in Javascript onJune 21, 2019

前言

在JavaScript 中很多时候都需要自定义错误,尤其是开发 Node.js 应用的时候。 比如一个典型的网站服务器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我们希望这些类都拥有 Error 的特性:有错误消息、有调用栈、有方便打印的 toString 等。 最直观的实现方式便是 继承 Error 类。 但考虑 TypeScript 需要编译到 ES5 兼容性问题会较为复杂, 本文用来帮助理解 TypeScript 中继承 Error 的问题来源以及对应的几种解决方式。

我们需要怎样的 CustomError

为了容易讨论最佳实践,首先明确我们自定义的 CustomError 需要做到哪些功能。 下面是 Harttle 的观点:

  1. 可以调用 new CustomError() 来创建,并且 instanceof Error 操作应该返回 true。可以用来创建是基本要求,能够被视为 Error 的实例能够兼容既有系统(比如 toString() 要返回调用栈),同时符合惯例。
  2. .stack 属性首行应为 CustomeError: <message>。如果是 Error: <message> 可能就没那么漂亮。
  3. .stack 属性应当包含调用栈并指向 new CustomError() 的那一行。这一点可能是关键,如果指向 CustomError 构造函数中的某一行,就会给这个类的使用方造成困惑。

下面举个例子,这是一个 message 为 "intended" 的 CustomError 的 .stack 属性值:

CustomError: intended
at Object.<anonymous> (/Users/harttle/Downloads/bar/a.js:10:13)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Function.Module.runMain (module.js:694:10)
at startup (bootstrap_node.js:204:16)
at bootstrap_node.js:625:3

ES5 中如何继承 Error?

Error 是一个特殊的对象,或者说 JavaScript 的 new 是一个奇葩的存在。 为方便后续讨论,我们先讨论组 ES5 时代是怎样继承 Error 的。 我们说 JavaScript 是一门混杂的语言,如何继承 Error 就是一个典型的例子。 如果你熟悉 原型继承的方式,应该会写出如下代码:

function CustomError (message) {
Error.call(this, message)
}
CustomError.prototype = new Error()

因为 stack 只在 new 的时候生成,上述实现不能满足功能 2 和功能 3,也就是说:

  • stack 的第一行是总是 Error 而不是 CustomError 且不包含 message 信息。
  • stack 总是指向 new Error() 的那一行,而不是 new CustomError()。

Node 文档 中描述了一个 captureStackTrace 方法来解决这个问题,改动后的实现如下:

function CustomError (msg) {
this.name = 'CustomError'
this.message = msg
Error.captureStackTrace(this, CustomError)
}
CustomError.prototype = new Error()

其中 .captureStackTrace() 会使用传入对象的 name 和 message 来生成 stack 的前缀;同时第二个参数用来指定在调用栈中忽略掉哪一部分,这样栈就会指向 new CustomError 的地方而不是 captureStackTrace() 的地方。

ES6 中如何继承 Error?

既然 ES6 通过 class 和 extends 等关键字给出了类继承机制, 那么想必通过编写 CustomError 类来继承 Error。事实也确实如此,只需要在构造函数中调用父类构造函数并赋值 name 即可实现文章开始提到的三个功能:

class CustomError extends Error {
constructor(msg) {
super(msg)
this.name = 'CustomError'
}
}

TypeScript 中如何继承 Error?

ES6 中提供了 new.target 属性, 使得 Error 的构造函数中可以获取 CustomError 的信息,以完成原型链的调整。 因此 TypeScript 需要编译到 ES5 时上述功能仍然是无法自动实现。 在 TypeScript 中的体现是形如上述 ES6 的代码片段会被编译成:

var CustomError = /** @class */ (function (_super) {
__extends(CustomError, _super);
function CustomError(msg) {
var _this = _super.call(this, msg) || this;
_this.name = 'CustomError';
return _this;
}
return CustomError;
}(Error));

注意 var _this = _super.call(this, msg) || this; 中 this 被替换掉了。 在 TypeScript 2.1 的 changelog 中描述了这个 Breaking Change。 **这会造成 CustomError 的所有对象方法都无法使用,这里介绍几种 workaround:

题外话,这个分支可能会导致测试覆盖率中的 分支未覆盖问题。可以只在 ES6 下产生测试覆盖报告来解决。

1. 使用 setPrototypeOf 还原原型链

这是 TypeScript 官方给出的解决方法,见这里。

class CustomError extends Error {
constructor(message) {
super(message);
Object.setPrototypeOf(this, FooError.prototype);
}
}

注意这是一个性能很差的方法,且在 ES6 中提出,兼容性也很差。在不兼容的环境下可以使用 __proto__ 来替代。

2. 坚持使用 ES5 的方式

不使用 ES6 特性,仍然使用本文前面介绍的 『ES5 中如何继承 Error?』给出的方法。

3. 限制对象方法的使用

虽然 CustomError 的对象函数无法使用,但 CustomError 仍然支持 protected 级别的方法供子类使用,阉割的地方在于自己不能调用。 由于 JavaScript 中对象属性必须在构造函数内赋值,因此对象属性也不会受到影响。也就是说:

class CustomError extends Error {
count: number = 0
constructor(msg) {
super(msg)
this.count // OK,属性不受影响
this.print() // TypeError: _this.print is not a function,因为 this 被替换了
}
print() { 
console.log(this.stack)
}
}
class DerivedError extends CustomError {
constructor(msg) {
super(msg)
super.print() // OK,因为 print 是直接从父类原型获取的,即 `_super.prototype.print`
}
}

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

Javascript 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
JS window.opener返回父页面的应用
Oct 24 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
JS实现随机点名器
Apr 12 Javascript
js 实现验证码输入框示例详解
Sep 23 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 #Javascript
简单了解JavaScript中常见的反模式
Jun 21 #Javascript
通过图带你深入了解vue的响应式原理
Jun 21 #Javascript
10种JavaScript最常见的错误(小结)
Jun 21 #Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 #Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 #Javascript
如何测量vue应用运行时的性能
Jun 21 #Javascript
You might like
php 验证码制作(网树注释思想)
2009/07/20 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
jQuery入门知识简介
2010/03/04 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
jQuery知识点整理
2015/01/30 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
在python中bool函数的取值方法
2018/11/01 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
企业演讲稿范文
2013/12/28 职场文书
贷款委托书范本
2014/04/08 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python
Go语言编译原理之变量捕获
2022/08/05 Golang