Javascript creating references to native functions

Question

I have written this code (this is a snippet) that doesn't seem to be working. I have isolated it to here.

grab = window.document.getElementById;
grab("blueBox") // i.e. grab("blueBox").onclick [...]

Is it possible to create references to native function in javascript. I am doing something with the grabbed element, I just left it out for example. The grab function doesn't seem to work.

I am using FireFox's most recent version

`document.getElementById` is a **host** function. Native functions are the built–ins (like Array, Object, etc.) and any function created by ECMAScript code (e.g. `function foo(){...}`, `var bar = function(){...}`). — RobG, Mar 15 '12 at 08:53
possible duplicate of [JavaScript function aliasing doesn't seem to work](http://stackoverflow.com/questions/1007340/javascript-function-aliasing-doesnt-seem-to-work) — Shadow Wizard Says No More War, Mar 15 '12 at 08:54
Live test case with the `apply` workaround: http://jsfiddle.net/N4Ghd/ — Shadow Wizard Says No More War, Mar 15 '12 at 08:58

Yoshi · Accepted Answer · 2012-03-15T09:16:47.180

3

The way you're doing it will mess up the assignment of the this value for the function.

grab = window.document.getElementById;
grab("blueBox") // i.e. grab("blueBox").onclick [...]

here this will be the global object. Try:

grab.apply(window.document, ["blueBox"])

or in newer browsers:

grab = window.document.getElementById.bind(window.document);

to get directly define what this will be.

edited Mar 15 '12 at 09:16

answered Mar 15 '12 at 08:54

Yoshi

53,111
13
85
102

1

@Yoshi—Nothing whatever to do with scope, everything to do with the function's *this* keyword. – RobG Mar 15 '12 at 09:13
@RobG You're correct, it's a very bad habit of mine to always mix the wording when trying to explain it. ;) – Yoshi Mar 15 '12 at 09:17

score 1 · Answer 2 · edited Dec 30 '13 at 12:12

1

function grab(id) {
    return window.document.getElementById(id);
}

grab("blueBox");

edited Dec 30 '13 at 12:12

BenMorel

31,815
47
169
296

answered Mar 15 '12 at 08:55

Tom

4,056
2
23
38

score 1 · Answer 3 · answered Mar 15 '12 at 08:55

1

The first step here is always the JavaScript console. Firebug is your friend. Tell us the error message if it doesn't mean anything to you.

In the mean time, here is a workaround:

var grab = function(id) { return window.document.getElementById(id); }

answered Mar 15 '12 at 08:55

Aaron Digulla

310,263
103
579
794

score 0 · Answer 4 · answered Mar 15 '12 at 09:14

The reason is because the function getElementById is not being called as a method of document, so its this keyword doesn't reference the right object. Using call as suggested in other answers shows that when this references the document, getElementById works.

Javascript creating references to native functions

4 Answers4