Я глубоко копался, чтобы понять это конкретное поведение, и я думаю, что нашел хорошее объяснение.
Прежде чем я выясню, почему вы не можете использовать псевдоним document.getElementById, я попытаюсь объяснить, как работают функции / объекты JavaScript.
Каждый раз, когда вы вызываете функцию JavaScript, интерпретатор JavaScript определяет область действия и передает ее функции.
Рассмотрим следующую функцию:
function sum(a, b)
{
return a + b;
}
sum(10, 20); // returns 30;
Эта функция объявлена в области действия Window, и при ее вызове значение this внутри функции sum будет глобальным Window объектом.
Для функции «sum» не имеет значения, каково значение «this», поскольку она не использует его.
Рассмотрим следующую функцию:
function Person(birthDate)
{
this.birthDate = birthDate;
this.getAge = function() { return new Date().getFullYear() - this.birthDate.getFullYear(); };
}
var dave = new Person(new Date(1909, 1, 1));
dave.getAge(); //returns 100.
Когда вы вызываете функцию dave.getAge, интерпретатор JavaScript видит, что вы вызываете функцию getAge для объекта dave, поэтому он устанавливает this в dave и вызывает функцию getAge. getAge() вернет правильно 100.
Возможно, вы знаете, что в JavaScript вы можете указать область видимости, используя метод apply. Давайте попробуем это.
var dave = new Person(new Date(1909, 1, 1)); //Age 100 in 2009
var bob = new Person(new Date(1809, 1, 1)); //Age 200 in 2009
dave.getAge.apply(bob); //returns 200.
В приведенной выше строке вместо того, чтобы позволить JavaScript определять область действия, вы передаете область вручную как объект bob. getAge теперь будет возвращать 200, даже если вы «думали», что вызвали getAge для объекта dave.
Какой смысл всего вышеперечисленного? Функции «слабо» привязаны к вашим объектам JavaScript. Например. Вы можете сделать
var dave = new Person(new Date(1909, 1, 1));
var bob = new Person(new Date(1809, 1, 1));
bob.getAge = function() { return -1; };
bob.getAge(); //returns -1
dave.getAge(); //returns 100
Давайте сделаем следующий шаг.
var dave = new Person(new Date(1909, 1, 1));
var ageMethod = dave.getAge;
dave.getAge(); //returns 100;
ageMethod(); //returns ?????
ageMethod выполнение выдает ошибку! Что случилось?
Если вы внимательно прочитаете мои пункты выше, вы заметите, что метод dave.getAge был вызван с dave как this объект, тогда как JavaScript не смог определить «область действия» для выполнения ageMethod. Таким образом, оно прошло глобальное «Окно» как «это». Теперь, когда window не имеет свойства birthDate, выполнение ageMethod завершится неудачно.
Как это исправить? Простой,
ageMethod.apply(dave); //returns 100.
Имеет ли все вышесказанное смысл? Если да, то вы сможете объяснить, почему вы не можете использовать псевдоним document.getElementById:
var $ = document.getElementById;
$('someElement');
$ вызывается с window как this, и если реализация getElementById ожидает, что this будет document, произойдет сбой.
Снова, чтобы исправить это, вы можете сделать
$.apply(document, ['someElement']);
Так почему же он работает в Internet Explorer?
Я не знаю внутреннюю реализацию getElementById в IE, но комментарий в источнике jQuery (реализация метода inArray) говорит, что в IE window == document. Если это так, то псевдоним document.getElementById должен работать в IE.
Чтобы проиллюстрировать это далее, я создал сложный пример. Посмотрите на функцию Person ниже.
function Person(birthDate)
{
var self = this;
this.birthDate = birthDate;
this.getAge = function()
{
//Let's make sure that getAge method was invoked
//with an object which was constructed from our Person function.
if(this.constructor == Person)
return new Date().getFullYear() - this.birthDate.getFullYear();
else
return -1;
};
//Smarter version of getAge function, it will always refer to the object
//it was created with.
this.getAgeSmarter = function()
{
return self.getAge();
};
//Smartest version of getAge function.
//It will try to use the most appropriate scope.
this.getAgeSmartest = function()
{
var scope = this.constructor == Person ? this : self;
return scope.getAge();
};
}
Для функции Person, описанной выше, вот как будут вести себя различные методы getAge.
Давайте создадим два объекта, используя функцию Person.
var yogi = new Person(new Date(1909, 1,1)); //Age is 100
var anotherYogi = new Person(new Date(1809, 1, 1)); //Age is 200
console.log(yogi.getAge()); //Output: 100.
Прямо, метод getAge получает yogi объект как this и выводит 100.
var ageAlias = yogi.getAge;
console.log(ageAlias()); //Output: -1
JavaScript интерпретатор устанавливает window объект как this, и наш метод getAge вернет -1.
console.log(ageAlias.apply(yogi)); //Output: 100
Если мы установим правильную область, вы можете использовать метод ageAlias.
console.log(ageAlias.apply(anotherYogi)); //Output: 200
Если мы передадим объект другого человека, он все равно будет правильно вычислять возраст.
var ageSmarterAlias = yogi.getAgeSmarter;
console.log(ageSmarterAlias()); //Output: 100
Функция ageSmarter захватила оригинальный объект this, так что теперь вам не нужно беспокоиться о предоставлении правильной области видимости.
console.log(ageSmarterAlias.apply(anotherYogi)); //Output: 100 !!!
Проблема с ageSmarter заключается в том, что вы никогда не можете установить область видимости для какого-либо другого объекта.
var ageSmartestAlias = yogi.getAgeSmartest;
console.log(ageSmartestAlias()); //Output: 100
console.log(ageSmartestAlias.apply(document)); //Output: 100
Функция ageSmartest будет использовать исходную область, если указана недопустимая область.
console.log(ageSmartestAlias.apply(anotherYogi)); //Output: 200
Вы по-прежнему сможете передавать другой Person объект getAgeSmartest. :)