javascript - 箭头函数和bind()的区别

Question

当对象缺少引用(上下文)时，我有点困惑。

在 TypeScript 中(出于解释原因，此处显示了一些虚拟参数):

粗箭头

var x = new SomeClass();    
someCallback(function(a){x.doSomething(a)});// some time this x object may 
missing the    reference (context) of x object

someCallback(a => x.doSomething(a));// if we using arrow function, then how 
it manage stabling the object context? which is doing same below bind()code. 

bind() : 从 function.bind() 创建的函数始终保留“this”

var x = new SomeClass();
window.setTimeout(x.someMethod.bind(x), 100);//bind will be also manage 
the x context(reference). 

问题:

• 它们之间的性能和差异是什么？
• 何时使用 bind() 和 arrow(a=>a...) 函数？

Answer 1

在您给出的示例中，使用 function 和使用 => 之间没有区别。这是因为您没有在回调函数中引用 this。

但是，如果您的回调使用 this，Typescript 编译器会将调用转换为在 => 回调中使用 _this，但不在function 回调并创建本地 var _this = this。

对于这个 typescript :

class SomeClass {
  x: any;
  foo() {

    someCallback(function(a:number){this.x.doSomething(a)});// some time may missing the reference (context) of x object

    someCallback((a:number) => this.x.doSomething(a));
  }
}
function someCallback(foo: any) {};

你得到这个JavaScript:

var SomeClass = (function () {
    function SomeClass() {
    }
    SomeClass.prototype.foo = function () {
        var _this = this;
        someCallback(function (a) { this.x.doSomething(a); }); // some time may missing the reference (context) of x object
        someCallback(function (a) { return _this.x.doSomething(a); });
    };
    return SomeClass;
}());
function someCallback(foo) { }
;