TYPESCRIPT typescript中如何继承Array、Error等原生数据结构类

在项目中发现,ES6中的Array原生类的继承在TS中无法实现了,子类定义的方法不见丢失了,代码编译后其实发生了变化(在2.1.5之后),至于为什么会发生这种现象,

miscrosoft给出的解释是

In ES2015, constructors which return an object implicitly substitute the value of this for any callers of super(...). It is necessary for generated constructor code to capture any potential return value of super(...) and replace it with this.

As a result, subclassing Error, Array, and others may no longer work as expected. This is due to the fact that constructor functions for Error, Array, and the like use ECMAScript 6's new.target to adjust the prototype chain; however, there is no way to ensure a value for new.target when invoking a constructor in ECMAScript 5. Other downlevel compilers generally have the same limitation by default.

 简而言之就是es6中,Error, Array和其他原生类的extends需要通过super调用来完成原型链的继承,而其中最关键的一步是通过调用构造函数的target来寻找原型链,而在es5中,没法确保构造函数的target,也就无法完整查找到当前的子类的构造函数的原型实例,从而只实现父类的继承,只会返回父类this,但是原型链确断裂了。关于new.target的了解,可以跳转MDN的介绍。

解决办法

虽然TS无法为我们实现继承,但是我们可以自己为子类实现原型的继承,这样子类依然有我们子类的方法。原理呢还是利用es5的组合继承。

在子类的构造函数中调用完父类后,再把原型链指回自身。

constructor(m: string) {
        super(m);

        // Set the prototype explicitly.
        Object.setPrototypeOf(this, FooError.prototype);
    }

这样,在在子类上定义的方法就不会丢失,因为我们又把原型指回了子类。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值