How does Function.bind.bind(Function.call) uncurry

问题:

We have this line in my code base:

var uncurryThis = Function.bind.bind(Function.call);

That I'm trying to work through. Presumably, it uncurries. How do I work this out?

I guess it's a version of Function.bind whose own this is bound to Function.call. Doesn't help me enough. And I haven't found any uses, so I'm not even sure if you call it standalone or need to call it "as a method", only, you know, bind it first.

回答1:

It passes the call function to the bind function, with the bind function itself being the value of this. Thus you get in return a wrapper around the bind function that arranges for this to be the call function when you call it. That, in turn, is a function that lets you create a wrapper around the call function bound to some argument you pass it.

In case you haven't been drinking coffee nonstop since you woke up this morning, step by step:

• Function.bind.bind is a reference to the bind function. The reference is generated from a property of — confusion point 1 — the bind function itself. Remember, the bind function, when called with some function as the object, is used to create a wrapper around that function with this bound to the first argument passed in.
• Thus that function call gives you a function back. That function works as if you called Function.call.bind(something).
• If you pass some random function as an argument to that function, then, you get back a wrapper around the random function that, when called, will act like randomFunction.call(whatever).

So:

function random() {
  alert(this.foo);
}

var bb = Function.bind.bind(Function.call);

var randomcall = bb(random);

randomcall({ foo: "hello world" }); // alerts "hello world"

The ultimate point is this: you've got a function, and inside the function there's code that expects this to have some properties, and it uses this in one way or another. You'd really like to be able to use that function with some object here, some object there. You can obviously do that with

random.call(someObject);

But this magic "bind-bind-call" trick gives you a cheap way to create a variation on your function that lets you avoid the explicitly-coded invocation of .call(). It also allows you to hang onto your senior front-end developer position for a little bit longer.

edit — I'm going to spoil the punch line above because I just thought of a good reason to use the bind+call trick to obtain a function that arranges to make a call to some desired function that expects to operate via this on some "owner" object. Let's say you've got an array of strings, and you'd like to get a version of those strings in lower-case. You could write this:

var uc = ["Hello", "World"];
var lc = uc.map(function(s) { return s.toLowerCase(); });

But with the magic "bb" function we could also write:

var uc = ["Hello", "World"];    
var tlc = bb(String.prototype.toLowerCase);
var lc = uc.map(tlc);

Not much of an improvement written that way, but if one were to make a set of bb()-ified wrappers of all the handy String prototype methods, it might make more sense. Of course, everything has a price, and it's probably the case that such wrappers will have some performance impact. (If practices like this were common then runtimes could probably be improved.)

回答2:

OK. You know what bind does? It's a method of Functions to fix their this argument, and returns a new function. It could be simplified to:

function bind(context) {
    var fn = this;
    return function() {
        return fn.apply(context, arguments);
    };
}

I will abbreviate function calls with contexts in a more functional style with lots of partial application: bind_fn(context) -> fn_context. With arguments: (bind_fn(context))(…) is equal to fn_context(…).

Similarly, call does take a this value but instead of returning a function, it applies it right now: call_fn(context, …) -> fn_context(…).

So now let's get at your code: bind.call(bind, call). Here, you're applying bind on bind with call as the this value: bind_bind(call). Let's expand this (with above rule) to bind_call. What if we now supplied some arguments to it?

bind_bind(call) (fn)(context, …)

bind_call (fn)(context, …)

call _fn(context, …)

fn_context(…)

Step by step, we could do

uncurryThis = bind_bind(call) // bind_call

func = uncurryThis(method) // call_method

result = func(context, …) // method_context(…)

A practical use case for this are any "class" methods that are supposed to be converted to a static function, taking the object (on which the method would be called upon) as the first argument:

var uncurryThis = Function.bind.bind(Function.call);
var uc = uncurryThis(String.prototype.toUpperCase);
uc("hello") // in contrast to "hello".toUpperCase()

This can be helpful if you cannot place a method call, but need a static function; e.g. as in

["hello", "world"].map(uc) // imagine the necessary function expression

Also, the method you want to invoke might not be a method of the object itself, as in

var slice = uncurryThis(Array.prototype.slice);
slice(arguments) // instead of `Array.prototype.slice.call(arguments)` everywhere

---

If it helps, here is also an explicit implementation, without any binds:

function uncurryThis(method) {
    return function(context/*, ...*/)
        return method.apply(context, Array.prototype.slice.call(arguments, 1));
    };
}

回答3:

when we call bind on a function, it returns new function with this is replaced by context:

function random() {
  alert(this.foo);
}
var newRandom = random.bind({foo:"hello world"}) //return new function same as //`random` with `this` is replaced by object {foo:"hello world"}

the same we have:

Function.bind.bind(Function.call)
// return new Function.bind with its `this` is replaced by `Function.call`

It has following source(used simplified version of bind function given by @Bergi):

var bb = function bind(context){
  var fn = Function.call;
  return function() {
        return Function.call.apply(context, arguments); //also replace fn here for easier reading
    };
}

Notice that context here will be function, for example random, so wen call bb(random) we has newRandom function as:

newRandom = function(){
   return Function.call.apply(random, arguments); //also replace 
}
//`apply` function replace `this` of Function.call to `random`, and apply Function(now become `random`) with arguments in `arguments` array.