Question

170

JavaScript function aliasing doesn't seem to work

rated 0 times [ 173] [ 3] / answers: 1 / hits: 28462 / 15 Years ago, wed, june 17, 2009, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eanskylerg

Add To Favorites

Follow

Total Points: 524

Total Questions: 107

Total Answers: 100

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

eanskylerg questions

1 React Router v6 : How to render multiple component inside and outside a div with the same path

Sat, Feb 19, 22, 00:00, 2 Years ago

1 dotenv: command not found in nestjs project

Sat, Oct 30, 21, 00:00, 3 Years ago

1 How can I resolve the TypeScript Compiler error Namespace 'NodeJS' has no exported member 'Global'?

Mon, Jul 5, 21, 00:00, 3 Years ago

1 Limit x-axis in Apexcharts.js

Wed, Mar 10, 21, 00:00, 3 Years ago

1 Cannot use import statement outside a module in Vuejs. Template Django

Sat, Jan 23, 21, 00:00, 3 Years ago

View All

answered 15 Years ago halleyb · Accepted Answer

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();>