JavaScript: Referencing host function via local variable

Question

Possible Duplicate:
JavaScript function aliasing doesn't seem to work

Why doesn't this work?

function foo() {

    var g = document.getElementById;

    g('sampleID');

} 

This error is thrown in Chrome: Uncaught TypeError: Illegal invocation
... and in Firefox: Error: uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object"

It works in IE9 beta though !!

Demo: http://jsfiddle.net/ugBpc/

Answer 1

Most browsers require that the document.getElementById method is called in the context of the original object (document). So this would work:

function foo() {      
    var g = document.getElementById;      
    g.call(document, 'sampleID');  
}

This will fail in Internet Explorer 7 and lower, however, because DOM methods don't inherit from Function.prototype. Your original example should work in all versions of Internet Explorer.

You could also use Function.prototype.bind, in browsers that support it or where you have provided the compatibility implementation:

function foo() {      
    var g = document.getElementById.bind(document);      
    g('sampleID');  
}