arrow function 和 bind() 的区别

Question

I am little confused about while object missing the reference(context).

In TypeScript (shown here with some dummy parameters for explanatory reasons):

Fat Arrow

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(): Functions created from function.bind() always preserve 'this'

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

Question:

• What are the performance and differences between them?
• when to use bind() and arrow(a=>a...) function?

Answer 1

In the examples you give there is no difference between using function and using => . That is because you don't reference this inside the callback function.

However, if your callback uses this the typescript compiler will convert the call to use _this inside the => callbacks but not inside the function callbacks and creates a local var _this = this .

So for 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) {};

You get this 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) { }
;

Answer 2

bind() does not create an anonymous function, whereas => does. (This may or may not matter to you.)

=> creates lexical bindings for this and all arguments. Wheras bind() only creates a lexical binding for this .