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?

This is what you need , simple googling helps 2ality.com/2016/02/arrow-functions-vs-bind.html — Rahul Singh
– Rahul Singh, Commented Oct 5, 2017 at 12:42
not directly targeting your question, but worth reading in this context (pun intended) How does the 'this' keyword work — AVJT82
– AVJT82, Commented Oct 5, 2017 at 12:46
See also: 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
– Mikko Rantalainen, Commented Feb 4, 2022 at 10:18

Duncan · Accepted Answer · 2017-10-05 13:35:52Z

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

Engineer · Accepted Answer · 2022-10-03 23:13:04Z

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 3, 2022 at 23:13

Engineer

8,9387 gold badges70 silver badges115 bronze badges

Collectives™ on Stack Overflow

Difference between arrow function and bind()

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related