document.getElementById到底是什么东西？

╰半橙微兮° 2021-12-15 05:37 308阅读 0赞

把你的大脑当做浏览器执行下面的代码两次，分别是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操作符的返回结果的归类：

<table> 
 <tbody> 
 <tr> 
 <td> Type of val </td> 
 <td> Result </td> 
 </tr> 
 <tr> 
 <td> Undefined </td> 
 <td> <code>"undefined"</code> </td> 
 </tr> 
 <tr> 
 <td> Null </td> 
 <td> <code>"object"</code> </td> 
 </tr> 
 <tr> 
 <td> Boolean </td> 
 <td> <code>"boolean"</code> </td> 
 </tr> 
 <tr> 
 <td> Number </td> 
 <td> <code>"number"</code> </td> 
 </tr> 
 <tr> 
 <td> String </td> 
 <td> <code>"string"</code> </td> 
 </tr> 
 <tr> 
 <td> Object (native and does not implement [[Call]]) </td> 
 <td> <code>"object"</code> </td> 
 </tr> 
 <tr> 
 <td> Object (native or host and does implement [[Call]]) </td> 
 <td> <code>"function"</code> </td> 
 </tr> 
 <tr> 
 <td> Object (host and does not implement [[Call]]) </td> 
 <td> Implementation-defined except may not be <code>"undefined"</code>, <code>"boolean"</code>, <code>"number</code>", or<code> "string".</code> </td> 
 </tr> 
 </tbody> 
</table>

所以如果要实现用$代替document.getElementById需要这么做：

var $ =function(id) \{ return document.getElementById(g) \};

但是即使有了上面的解释之后，我对Host Object和Native Object又有了新的疑惑。

转载于:https://www.cnblogs.com/1000/archive/2011/08/20/2147038.html

[StackOverflow]: http://stackoverflow.com/questions/7125288/what-is-document-getelementbyid/