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) — AT82, Oct 05 '17 at 12:46
See also: https://stackoverflow.com/q/70973212/334451 – I'm currently thinking the behavior differences are `bind()` has better runtime performance but it cannot react to changes in objects. In the example in this question, the version with `bind()` doesn't react to modifying `x.someMethod` after already setting the timeout. I think the performance difference mostly comes from this difference. — Mikko Rantalainen, Feb 04 '22 at 10:18

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

score 0 · Answer 2 · answered Oct 03 '22 at 23:13

0

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.

answered Oct 03 '22 at 23:13

Engineer

8,529
7
65
105

Difference between arrow function and bind()

2 Answers2

Linked