Why can't I directly assign document.getElementById to a different function?

user_629474 0
Viewed 3103

So I'm trying to define a function g() that is like document.getElementById. The following works just fine:

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

But why doesn't this more direct code work?

var g = document.getElementById;
javascript
5 Answers

As lonesomeday's answer already shows, the problem is with the execution context. I would like to add that there is a way to create a function with the execution context. Open your browser's Developer Tools for this page and try the following in the Console:

> document.getElementById('notify-container');
// <div id="notify-container"></div>

> var _d = document.getElementById;
// undefined

> _d
// ƒ getElementById() { [native code] }

> _d('notify-container');
// Uncaught TypeError: Illegal invocation
//     at <anonymous>:1:1

As before, directly invoking the variable _d which is assigned to document.getElementById fails. But you can use Function.prototype.bind to bind the execution context.

The bind() method 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 is called.

> var d = document.getElementById.bind(document);
// undefined

> d('notify-container');
// <div id="notify-container"></div>

You also do not have to worry much about browser compatibility if you want to use bind: See https://caniuse.com/#feat=es5.

user_14614240
Related