JavaScript function aliasing doesn't seem to work
alias, closures, function, javascript
Solution
You have to bind that method to the document object. Look:
>>> $ = document.getElementById
getElementById()
>>> $('bn_home')
[Exception... "Cannot modify properties of a WrappedNative" ... anonymous :: line 72 data: no]
>>> $.call(document, 'bn_home')
<body id="bn_home" onload="init();">
When you’re doing a simple alias, the function is called on the global object, not on the document object. Use a technique called closures to fix this:
function makeAlias(object, name) {
var fn = object ? object[name] : null;
if (typeof fn == 'undefined') return function () {}
return function () {
return fn.apply(object, arguments)
}
}
$ = makeAlias(document, 'getElementById');
>>> $('bn_home')
<body id="bn_home" onload="init();">
This way you don’t loose the reference to the original object.
In 2012, there is the new `bind` method from ES5 that allows us to do this in a fancier way:
>>> $ = document.getElementById.bind(document)
>>> $('bn_home')
<body id="bn_home" onload="init();">
Problem
I was just reading this question and wanted to try the alias method rather than the function-wrapper method, but I couldn't seem to get it to work in either Firefox 3 or 3.5beta4, or Google Chrome, both in their debug windows and in a test web page. Firebug: ``` >>> window.myAlias = document.getElementById function() >>> myAlias('item1') >>> window.myAlias('item1') >>> document.getElementById('item1') <div id="item1"> ``` If I put it in a web page, the call to myAlias gives me this error: ``` uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: file:///[...snip...]/test.html :: <TOP_LEVEL> :: line 7" data: no] ``` Chrome (with >>>'s inserted for clarity): ``` >>> window.myAlias = document.getElementById function getElementById() { [native code] } >>> window.myAlias('item1') TypeError: Illegal invocation >>> document.getElementById('item1') <div id=?"item1">? ``` And in the test page, I get the same "Illegal invocation". Am I doing something wrong? Can anyone else reproduce this? Also, oddly enough, I just tried and it works in IE8.