本文探讨了在JavaScript中使用函数直接量简化代码时,Internet Explorer与Mozilla浏览器之间的行为差异。虽然将document.getElementById赋值给变量在IE中合法,但在Mozilla中会抛出“操作符非法”的WrappedNative异常。文章提供了通过将属性绑定到document对象这一变通方案,确保代码在两种浏览器中均能正常运行。
函数直接量的基本用法
在JavaScript开发中,通常使用函数直接量来定义简单的函数。
<script type="text/javascript">
var func=function(s){window.alert(s)};
func("never-online")
</script>
这种写法在IE或Mozilla浏览器中均被视为合法代码,符合ECMA标准中关于函数直接量的定义。
IE与Mozilla的行为差异
然而,在IE浏览器中存在一种更简洁的命名方式,可以进一步简化代码结构。
<div id="demo">http://blog.never-online.net</div>
<script type="text/javascript">
var $=document.getElementById;
alert($("demo").innerHTML);
</script>
但在Mozilla浏览器中,上述代码并未报语法错误,而是直接抛出了一个异常,提示“操作符非法”。
以下代码展示了如何捕获Mozilla抛出的异常并将其打印输出。
<div id="demo">http://blog.never-online.net</div>
<script type="text/javascript">
var $=document.getElementById;
try {
alert($("demo").innerHTML);
} catch(ex) { document.write(ex)}
</script>
捕获到的异常内容如下:
[Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: file:///C:/Documents%20and%20Settings/Administrator/Local%20Settings/Temp/non4A.htm :: :: line 22" data: no]
目前尚不清楚是否可以通过修改Mozilla的配置来解决此问题,因此在编写代码时需特别注意这一差异。
在Google上搜索“getElementById 0x8057000c”关键字,可以发现许多类似的情况,例如:
http://groups.google.co.uk/group/comp.lang.javascript/browse_thread/thread/65a1a23f5dd7c9ad/d264d04d9d768b28?tvc=2#d264d04d9d768b28
兼容性的变通解决方案
虽然目前没有完美的解决方案,但可以通过一种变通方法来实现兼容,例如按以下方式编写代码。
<div id="foo"></div>
<script>
document.$ = document.getElementById;
alert(document.$("foo").innerHTML);
</script>
由于JavaScript允许动态地为对象添加属性和方法,上述示例在IE和Mozilla环境中测试均可通过。