• document.getElementById到底是什么东西?


    把你的大脑当做浏览器执行下面的代码两次,分别是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又有了新的疑惑。

  • 相关阅读:
    Java实现 LeetCode 537 复数乘法(关于数学唯一的水题)
    Java实现 LeetCode 537 复数乘法(关于数学唯一的水题)
    Java实现 LeetCode 535 TinyURL 的加密与解密(位运算加密)
    Java实现 LeetCode 535 TinyURL 的加密与解密(位运算加密)
    如何在 Linux 中统计一个进程的线程数
    linux下查看线程数的几种方法
    深入理解linux系统下proc文件系统内容
    嵌入式 如何定位死循环或高CPU使用率(linux)
    Linux 下查看线程信息
    Linux netstat命令详解
  • 原文地址:https://www.cnblogs.com/1000/p/2147038.html
Copyright © 2020-2023  润新知