2

What is the difference between the return value from bind and the result of creating the equivalent through function()? Is there any effective difference? (I'm not asking about the context retention properties of bind). Is there any technical/performance reason why you might prefer one approach.

i.e.

var myFunc = foo.bind(undefined, bar);

vs

var myFunc = function() { foo.call(undefined, bar) };
Tibrogargan
  • 4,508
  • 3
  • 19
  • 38

3 Answers3

2

Is there any effective difference?

Is there any technical/performance reason why you might prefer one approach.

Second version includes an additional function call.

guest271314
  • 1
  • 15
  • 104
  • 177
  • Since the return value of bind is a function, is there really an additional function call? A number of implementations of bind for browsers that don't support it natively are done in terms of function() – Tibrogargan Apr 14 '16 at 19:44
  • @Tibrogargan Referencing function that wraps `foo.call(undefined, bar)` – guest271314 Apr 14 '16 at 19:46
  • In browsers that don't support it, bind is implemented as (paraphrasing) `bind(thisObj, ...) { return function() { foo.call(thisObj, ...); }`, so in those cases *there is no [effective] difference*. Is this also the case for browsers that do support it? – Tibrogargan Apr 14 '16 at 19:51
  • Both `.bind()` and `.call()` are functions; `console.log(Function.prototype.bind, Function.prototype.call)`. Could be mistaken here, though first version appears to ultimately call two functions `foo`, `.bind` ; second version calls three functions anonymous `function() {}`, `foo`, `.call` – guest271314 Apr 14 '16 at 19:55
  • @Tibrogargan `myFunc1` took total `0.3ms` , `myFunc2` took total `0.7ms` using `console.profile()` at `Sources` -> `Snippets` tab at chromium 50 `DevTools`, where results are returned at `Profiles` tab – guest271314 Apr 14 '16 at 20:36
  • @Tibrogargan https://jsfiddle.net/9t6y59vn/ , https://jsfiddle.net/9t6y59vn/1/ . See https://developer.chrome.com/devtools/docs/console-api#consoleprofilelabel – guest271314 Apr 14 '16 at 20:56
  • 1
    Ran the profile a couple of million times. bind() ended up being 380ms, function was 1001ms. Chrome is reporting bind as being native code - which I find interesting. – Tibrogargan Apr 14 '16 at 21:21
  • Curious what result is at jsperf? – guest271314 Apr 14 '16 at 21:25
1

There is not technical differents, but there is a performance and bug-free difference. All the functions in function.prototype have been written by some of the best developers in a way to follow a certain specification which all the programmers expect. And of course have been tested very well.

It is always better not to reinvent the wheel, and always true that this developers will have do a better job than we will ever do.

Note 1: I8 now is below 0.3 % of usage, so don't mind if it does not support bind. There are many chances not support many things at your site.

Note 2: the implementation of bind in chrome is this:

write in dev-console in chrome: Function.prototype.bind and you get as result this

function(e,t){var n=this;return null!=t&&(t=Array.from(t)),function(){return n.apply(e,t||arguments)}}

Bonus: Here is a very similar implementation for more clean code(copy the .bind method from Prototype.js):

Function.prototype.bind = function(){ 
  var fn = this, args = Array.prototype.slice.call(arguments), 
                        object = args.shift(); 
  return function(){ 
    return fn.apply(object, 
      args.concat(Array.prototype.slice.call(arguments))); 
  }; 
};
Thomas Karachristos
  • 3,237
  • 18
  • 22
  • Thanks for the answer. I think guest271314's answer is closer to the mark. There is a technical difference - using bind would be slower for the same result (some people may argue that it's more maintainable). The code may be written by great developers, but you're not gaining anything by using it. – Tibrogargan Apr 14 '16 at 20:18
  • This thing have no meaning. The speed of a programs have to do with the algorithms, no one will understand the different if bind do 0.1ms or 0,2ms but only if you use a algorithm that repeat this many time. If you want to do a so Time Complex(big o) algorithm dont use javascript, do it in server and be sure you use the best algorithm. thx you too. – Thomas Karachristos Apr 14 '16 at 20:45
0

#bind is not working in IE8. So in that case you can use your second example =) but it will be better to implement #bind as here

Community
  • 1
  • 1
Rudolf Manusachi
  • 2,311
  • 2
  • 19
  • 25