本文探讨JavaScript中函数直接量的定义方式及其在IE与Mozilla浏览器中的行为差异。通过对比标准函数声明与简化赋值写法,指出在Mozilla中直接引用document.getElementById可能触发非法操作异常,并提供了将方法绑定到document对象的变通方案以确保跨浏览器兼容。
记录在JavaScript开发过程中遇到的一个具体问题,作为个人技术笔记。虽然此前该观点曾受到批评,但认为其具有一定的参考价值,尽管内容相对基础。
函数直接量的标准用法
在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浏览器中测试均可通过。