把你的大脑当做浏览器执行下面的代码两次，分别是IE6和IE9： 复制代码 代码如下: function testFunc(){ alert('test') } $(function(){ var g = document.getElementById , w = window.testFunc ; //g alert(typeof(g)); alert(String(g)); alert(g instanceof Object); alert(g instanceof Function); //w alert(typeof(w)); alert(String(w)); alert(w instanceof Object); alert(w instanceof Function); //执行 alert(g('t')); w(); }); 在标准浏览器中（IE9、FF、chrome等）上述代码执行得非常一致，返回结果如下： typeof => "function" 复制代码 代码如下: String => "function #funcName#{[native code]}" instanceof Object => true instanceof Function => true 很奇怪，虽然类型是函数，但是我们却不能直接使用括号来执行函数g，而需要使用call g.call(document,elementId); 但是如果运行环境是IE6，一切看起来非常诡异，下面是运行结果（注意粗体部分）： 复制代码 代码如下: //g typeof => "object" String => "function getElementById{[native code]}" instanceof Object => false instanceof Function => false //w typeof => "function" String => "function testFunc{alert('test')}" instanceof Object => true instanceof Function => true 在IE 6下，对于g和w都只能使用括号直接执行函数，而不需要使用call。对于函数g使用下面的方式调用会导致一个“对象没有该属性”的错误： g.call(document,eleId) 在IE6下，对于自定义的函数testFunc测试结果没有任何问题，但是对于g却十分地诡异！ 既然g是object那么为何可以像函数一样用()直接调用执行？ 而在标准浏览器中，g既然是函数为什么却不能直接使用()来执行呢？ 事实上对于document.getElementById，它到底是function还是object就连jQuery 1.6.2也没有解决这个问题。 在IE6中$.isFunction(g)仍然返回的是false!下面是jQuery 1.6.2的jQuery.isFunction的相关源代码： 复制代码 代码如下: class2type={}; ... // Populate the class2type map jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) { class2type[ "[object " + name + "]" ] = name.toLowerCase(); }); ... type: function( obj ) { return obj == null ? String( obj ) : class2type[ Object.prototype.toString.call(obj) ] || "object"; }, ... isFunction: function( obj ) { return jQuery.type(obj) === "function"; } 于是在StackOverflow上提了这个问题，好在牛人确实多，很快就有了回复。最后我简单的总结一下给大家参考：document.getElementById 最初被定义为 HTMLDocument (HTML DOM)接口的一个成员，但是在后来的 2 级 DOM 中移入到 Document (XML DOM)接口中。document.getElementById属于host object，它是一个function，但是它并没有被定义在ECMAScript中而是DOM接口的一部分。支持[[Call]]（内部属性？）host object的typeof返回值就是function。请记住Host Objects并不总是遵循Native Objects的相关规则，比如typeof。而对于testFunc它是native object, 更具体地说是native function。下面是EcmaScript 5对于typeof操作符的返回结果的归类： Type of val Result Undefined "undefined" Null "object" Boolean "boolean" Number "number" String "string" Object (native and does not implement [[Call]]) "object" Object (native or host and does implement [[Call]]) "function" Object (host and does not implement [[Call]]) Implementation-defined except may not be "undefined", "boolean", "number", or "string".所以如果要实现用$代替document.getElementById需要这么做： 复制代码 代码如下: var $ = function(id) { return document.getElementById(g) }; 但是即使有了上面的解释之后，我对Host Object和Native Object又有了新的疑惑。

　　推荐阅读

　　当jQuery遭遇CoffeeScript的时候 使用分享

当我多年前初次接触jQuery时我感觉我来到了程序员的天堂。它极大简化了DOM操作。函数式编程变得如此容易，尽管更多适合RIA开发的框架近年来在浮现，但是我仍旧无法想象一个没有jQuery的程序人生是多么的罪恶，相信>>>详细阅读

本文标题：document.getElementById介绍

地址：http://www.17bianji.com/kaifa2/JS/24174.html

 1/2    1