Difference between arrow function and 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?

https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6 — Suraj Rao, Oct 05 '17 at 12:42
This is what you need , simple googling helps http://2ality.com/2016/02/arrow-functions-vs-bind.html — Rahul Singh, Oct 05 '17 at 12:42
not directly targeting your question, but worth reading in this context (pun intended) [How does the 'this' keyword work](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — AJT82, Oct 05 '17 at 12:46

Duncan · Accepted Answer · 2017-10-05T13:35:52.113

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

Difference between arrow function and bind()

1 Answers1

Linked