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?
let a = function(){}; let b = function(){}; am = 1 bm = 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?
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.