简单了解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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
详解如何修改 node_modules 里的文件
May 22 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系统流量分析的程序
2006/10/09 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP strripos函数用法总结
2019/02/11 PHP
javascript 动态添加表格行
2006/06/22 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
python列表操作实例
2015/01/14 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
暑假学习心得体会
2014/09/02 职场文书
学校运动会报道稿
2014/09/23 职场文书
入党培养人考察意见
2015/06/08 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
浅谈Java父子类加载顺序
2021/08/04 Java/Android
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL