Is there any meaningful difference bind() vs arrow function + call()?

user_334451 0
Viewed 221

Given ES6 code like

let a = new SomeClass();
let b = new AnotherClass();

let x = a.someMethod.bind(b, 1, 2, 3);
let y = () => a.someMethod.call(b, 1, 2, 3);

is there any meaningful difference between x and y? I know that bind() is a lot older function but is there any need to use it over arrow functions nowadays?

At least for me the arrow function syntax is much easier to read than the bind() syntax, especially because you can often avoid using call() in practice when this still has the normal meaning from the lexical context. For example, will bind() have better performance (CPU or RAM) in practice?

javascript
2 Answers

let a = function(){};
let b = function(){};

a.m = 1
b.m = 2
a.someMethod = function(x, y, z){ return this.m + x + y + z }

let x = a.someMethod.bind(b, 1, 2, 3);
let y = () => a.someMethod.call(b, 1, 2, 3)

console.log( x(1,2,3) )
console.log( y(1,2,3) )

function goBind() {
    for (var i = 0; i < 1000000; i++) {
        x(1,2,3)
    }
}

function goArrow() {
    for (var i = 0; i < 1000000; i++) {
        y(1,2,3)
    }

}

function race() {
  var start = performance.now();
  goBind();
  console.log('bind: ' + (performance.now() - start));
  start = performance.now();
  goArrow()
  console.log('arrow: ' + (performance.now() - start));
  start = performance.now();
  goBind();
  console.log('bind: ' + (performance.now() - start));
  start = performance.now();
  goArrow()
  console.log('arrow: ' + (performance.now() - start));
  console.log('------');
}
<button onclick="race()">RACE!</button>

Based on this: Are arrow functions faster (more performant, lighter) than ordinary standalone function declaration in v8?

user_2688560

Regardless of the performance, for some use cases, arrow function cannot represent the same logic. For example, when you use Promises you can have something like this (source for this example):

function CommentController(articles) {
    this.comments = [];

    articles.getList()
        .then(function (articles) {
            return Promise.all(articles.map(function (article) {
                return article.comments.getList();
            }));
        })
        .then(function (commentLists) {
            return commentLists.reduce(function (a, b) {
                return a.concat(b);
            });
        })
        .then(function (comments) {
            this.comments = comments;
        }.bind(this));
}

Note the difference if the last bind(this) were removed. There's no simple way to use arrow function notation to change this without modifying the code a lot. I personally prefer to use closure with variable name other than this for a code like this, though.

In addition, bind() can be used for partial application which may be easier to read for people with functional programming background.

On the other hand, if a.someMethod is modified later, the version that used bind() will not see the change because it took the reference to the function during the binding. The variant with lambda function will see current value of a.someMethod when y() is called.

Additional example about needing .bind(this):

let f  =
{
    x: "bind data",
  test: function()
  {
    console.log("1. this=", this);
    setTimeout(function() {
      console.log("2. this=", this);
    }, 0);
    setTimeout(function() {
      console.log("3. this=", this);
    }.bind(this), 0);
  }
}

f.test();

user_3344510
Related