document.getElementById('someId')导致"Object不支持属性或方法'getElementById'“

Question

我在Internet 9中有一个奇怪的JavaScript异常：

​

​

该电文翻译成英文，内容如下：

对象不支持属性或方法“getElementById”

但是，当我通过document.getElementById控制台执行JavaScript时，将找到该函数。事实上，如果我执行导致异常的整个语句，它就成功了！(c.f.截图)。

造成这种奇怪的原因是什么？document应该一直都有一个getElementById方法，不是吗？如果我在调试器中重试，为什么相同的语句会成功呢？

我可以重现Internet 9的问题，但IE 11或Firefox不能。

Answer 1

进一步的分析表明：

由于JavaScript函数是在元素的事件处理程序属性中声明的，该元素成为函数的词法作用域链的一部分，从而导致该元素的document属性隐藏window.document的全局声明。(如果不清楚，我建议您阅读事件处理程序的范围)。

此外，在调用函数之前，文档中的jQuery DOM操作已经替换了该节点。这导致Internet 9更新该元素的文档属性以指向创建的DocumentFragment jQuery。

因此，函数意外地使用了元素document属性，并得到了一个DocumentFragment，其中期望有一个完整的文档。DocumentFragment不具有getElementById方法的特性。

我已经解决了这个问题，并且阻止了从词法作用域链中进一步推断，但是将事件处理程序封装到用函数构造函数创建的函数中，这使得它不能继承词法作用域。