在TypeScript中扩展本机JavaScript Number对象

Question

根据TypeScript文档,扩展已有的接口就像使用新属性重新声明它一样简单,然后为这些接口提供实现.我已经习惯了这种技术多次向本机JavaScript对象添加静态方法扩展.但是,这对成员函数不起作用.

例如(TypeScript Playground链接):

interface Number {
  toPowerOf10: () => string;
}

Number.prototype.toPowerOf10 = (): string => { 
  return this.toExponential();
}

var n: Number = 10000;
n.toPowerOf10();

上面的代码编译很好,但在运行时,它会抛出以下异常:

Uncaught TypeError: _this.toExponential is not a function

罪魁祸首似乎是TypeScript为此场景生成JavaScript代码的方式:

var _this = this;
Number.prototype.toPowerOf10 = function () {
    return _this.toExponential();
};
var n = 1000;
alert(n.toPowerOf10());

很明显这里_this没有引用Number实例.我不确定我是否做错了,或者TypeScript中不支持以这种方式扩展本机对象.

Answer 1

这是因为你使用箭头符号(=>)来声明新函数而不是function.虽然=>对于同样的事情来说似乎是一个很好的速记,但它function并不完全等同.特别是,=>将执行词法作用域,这意味着该函数this 之外将引用与该函数this 内部相同的东西,它通过_this在编译的JavaScript中捕获本地来完成.这里this是全局范围,因为你在Number那里声明了那个扩展.如果这是一个浏览器this将引用该window对象,这当然没有toExponential方法.

要完成您想要的任务,只需使用以下内容:

interface Number {
  toPowerOf10: () => string;
}

Number.prototype.toPowerOf10 = function() : string {
  return this.toExponential();
}

var n: Number = 10000;
document.write(n.toPowerOf10());