What is the difference between $.proxy() and bind(

Question

In 2009, ECMAScript 5 added a built-in bind() function which takes an object as a parameter and returns an identical function in which this will always refer to the object you passed it. (I couldn't find anything that looked like a canonical documentation link.)

How is this different from jQuery's $.proxy() function? Did $.proxy() come first before ECMAScript 5 was released? Is there a particular reason to favor $.proxy(function(){}, this) over function(){}.bind(this)?

Answer 1

Here is a test you could try to for performance comparison.

http://jsperf.com/bind-vs-jquery-proxy/5

At this time, October 2014. The performance varies like crazy between browsers. IE 11 native bind is fastest.

However, for all three browsers I tested with, native bind out preform jquery proxy. And since bind() is standard, I would suggest sticking to it if possible.

Answer 2

From Underscore bind vs jQuery.proxy vs Native bind

In addition to what is already mentioned, there's another difference between $.proxy() and .bind. Methods bound with $.proxy will return the same reference if called multiple times; jQuery caches functions proxied to an Object.

jsFiddle

Answer 3

Edit

Please pay no attention to this post (despite being the accepted answer).
Long story short, it was my own fault for making assumptions about the context of the question, rather than just looking up the API docs, and was accepted as the answer before I could realize my own stupidity (making assumptions, without validating them) and delete it.

Matt Whipple's answer is 100% correct, and while I disagree with his statement that real Proxies are useless in JS (they would be fantastic in some low-level concerns), the rest of his statements are flat-out objectively correct (aside from actual dates for .bind vs .proxy, as .bind was in the spec years before it landed consistently in browsers).

Below is my shame, in the stocks for all to see...

Feel free to throw tomatoes at it.
If you want to know why I answered the way I did, read the comments below.

---

The difference between $({}).proxy() and func.bind({}) is that proxy is a loose connection. You can detach at any time.

That's sort of what proxies are for. The invisible-interface between what you want to do and the thing that will actually do it.

For the record, there's also a $.bind() which is not a proxy. That is to say, it fully binds to this, in the same way that func.bind() does, rather than implementing a mediator-system to attach and detach context from functions at-will.

Answer 4

proxy came first and you should likely favor bind as it is a standard. The way they are called varies slightly (due to being attached to Function.prototype vs just being a function) but their behavior is the same.

There is a pretty good post here: jQuery.proxy() usage, that ends with that advice.

Answer 5

$.proxy came first. Below is a simple way to preserve a particular context on function call

var myProxy = (function(context,fn){
  return function(){
      fn.call(context);
  }
})( myContext, myFn );

You could easily use this before it came out jquery.

Answer is simple: bind is the official. Use bind - if it really is supported in browsers which is required to run the script