Question

我们是否可以使用prototype更新胖箭头功能？

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet = () => {
        alert("Hello, " + this.greeting + " inside");
    }
}

Greeter.prototype.greet = () => {
    alert("Hello, " + this.greeting + " outside");
}

let greeter = new Greeter("world");
greeter.greet();
// It should alert Hello world outside
// But it is showing  Hello world inside

我是否正确理解胖箭头语法，并且无法像这样更新，任何参考都会有所帮助？

Here is the Link for Typescript Playground where I was trying

先谢谢!!

Answer 1

创建Greeter对象时。它设定：

this.greet = function () {
  alert("Hello, " + _this.greeting + "inside");
};

因此它将覆盖您在原型中设置的内容。如果你没有写相同的greet（）函数，那么它将调用你在原型中设置的内容。

要记住的另一件事是当你使用箭头功能时：

Greeter.prototype.greet = () => {
  alert("Hello, " + this.greeting + " outside");
}

this.这里不是对象本身，但它属于外部上下文，这意味着你无法正确地获得这个。

Answer 2

要了解更好的情况，您应该查看已编译的js代码：

var _this = this;
var Greeter = (function () {
    function Greeter(message) {
        var _this = this;
        this.greet = function () {
            alert("Hello, " + _this.greeting + " inside");
        };
        this.greeting = message;
    }
    return Greeter;
}());
Greeter.prototype.greet = function () {
    alert("Hello, " + _this.greeting + " outside");
};

有一个greet函数添加到原型中，但是当您创建Greeter的新实例时，此方法将在构造函数中被覆盖。

通常使用普通的类方法会更好：

class Greeter {
    // ...
    greet() {
        alert("Hello, " + this.greeting + " inside");
    }
}

然后编译成js，原型上已经有alert：

var Greeter = (function () {
    function Greeter() {
    }
    Greeter.prototype.greet = function () {
        alert("Hello, " + this.greeting + " inside");
    };
    return Greeter;
}());

如果您担心在执行this时失去greet的范围（因为您将其作为回调或类似内容传递），那么很容易就是：

setTimeout(greeter.greet.bind(greeter), 1000);

或者

setTimeout(() => { greeter.greet(); }, 1000);

修改

如果你想做这样的事情：

class Greeter {
    greeting: string;
    message: string = "";
    constructor(message: string) {
        this.greeting = message;
    }
    greet(){
      return "Hello, " + this.greeting + " inside";
    }
}

let oldGreet = Greeter.prototype.greet;
Greeter.prototype.greet = function(){
   return oldGreet() + " appended outside";
}

它将无法正常打印：

“你好，内部附加未定义”

那是因为this不是Greeter的实例，应该是oldGreet.call(this)：

Greeter.prototype.greet = function(){
   return oldGreet.call(this) + " appended outside";
}

（code in playground）

如何使用原型更新胖箭头功能？

2 个答案:

修改