Alias function in javascript [duplicate]

Question

Possible Duplicate:
If Javascript has first-class functions, why doesn’t this work?

When I try to make an alias function for document.getElementById as below:

f = document.getElementById;

But, when I try to call:

var e_fullname = f(“fullname”);

It was rised an error: Could not convert JavaScript argument

And below is OK:

var e_fullname = f.call(document, “funname”);

Can you tell me why?

Answer 1

There are four ways of calling a function:

1. Function invocation: f(p1, p2)
2. Method invocation: obj.f(p1, p2)
3. Apply or Call invocation: f.apply(obj, [p1, p2]), f.call(obj, p1, p2)
4. Constructor invocation: new f(p1, p2)

In all these cases, f is just a reference (pointer) to a function object (an object with a [[Call]] internal property). What makes it behave different in all these cases is the way the function is called, and that matters a lot.

So, f is just a reference to the getElementById object, there's no difference between document.getElementById and someOtherHTMLElement.getElementById; the function doesn't hold back a reference to the object that references it.

If you want to bind a certain "owner" object, use the bind method:

var f = document.getElementById.bind(document);

Answer 2

getElementById is a method on document. To call it, the interpreter needs to have the function body itself, the object to call it on (document in your case), and the arguments.

When you do f = document.getElementById, you're copying the function body, but not the object to call it on.

When you do this:

f.call(document, “funname”);

You're providing both the object to call it on, and the arguments.

If you want to be able to call f directly, you need to get the "document" object stored in there somehow. Easiest is:

var f = function(name){return document.getElementById(name)}

This creates a closure which holds on the the value of document for you.

You can also use bind() to do the same thing.

Answer 3

You could use bind

Creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function was called.

var f = document.getElementById.bind(document);

It was introduced in ES5, so be aware of browsers not yet supporting this version of ECMAScript!

As an alternative you could use the proxy method of jQuery, added in version 1.4

var f = ​$.proxy(document.getElementById, document);

Or you could delcare f as an function of its own (this is a more verbose solution).

var f = function() { return document.getElementById(arguments); }