当前位置：首页 → 问答吧 → 【分享】IE 中一个对象的 native 方法是跟该对象绑定的

【分享】IE 中一个对象的 native 方法是跟该对象绑定的

时间：2010-09-14

来源：互联网

函数引用
对于获取一个元素的方式，最为常用的方式是 document 的方法 document.getElementById()。而 document.getElementById() 算是 document 的 native 方法。
获取元素的方法确实比较长，有两种方式可以缩短我们的调用代码：
JScript code

//方式1
var $1 = function(id){
    return document.getElementById(id);
};
//方式2var 
$2 = document.getElementById;

定义以上变量后，可以简单的采用
JScript code

$1(id);
$2(id)

;现在的问题是，$2 可用吗？为什么？

一个例子
HTML code

<script type="text/javascript">
    var pen={
       color : "red",
       getColor : function(){
           return this.color;
       }
    }
    var $ = pen.getColor;
    alert(pen.getColor());
    alert($());
</script>

这段例子中，采用了 $ 来代替函数 pen.getColor()，但通过测试我们可以知道，直接使用函数 $()无法正确的获得其颜色，为什么？
仔细观察后发现，原来 getColor() 函数其中使用了 this 关键字，它指向当前调用对象。
所以，var $ = pen.getColor; 只是指向函数体，而没能复制它的上下文。$() 在执行的时候，this 相当于 window 对象。因为没有定义 window 的color 属性，也没有直接定义 color 变量，所以，$() 取出的是 undefined。
HTML code

<script type="text/javascript">
    var color="merge";
    var pen={
       color : "red",
       getColor : function(){
           return this.color;
       }
    }
    var $ = pen.getColor;
    alert(pen.getColor());
    alert($());
</script>

加一个 color 变量，这时候，$() 会取出 “merge”。

联系
上面的例子和我们的问题有关系吗？
有。按道理讲，document.getElementById() 在执行的时候，上下文是 document，而 $2 在执行的时候，上下文是 window。
测试一下：
HTML code

<!DOCTYPE html>
<div id="d1">Div Element</div>
<script type="text/javascript">
    var $1 = function(id) {
       return document.getElementById(id);
    };
    var $2 = document.getElementById;

    alert($1('d1'));
    alert($2('d1'));
</script>

其中的 $1 和 $2 是我们一开始定义的那两个变量。
IE 里的执行结果，又一次出乎了我们的意料。竟然成功的获取了元素。而其他浏览器中 $2(‘d1’) 是不能获取元素的。
看来，IE 中对元素的 native 方法做了某种绑定。

来自 W3Help 的在线实例：http://www.w3help.org/zh-cn/causes/S/D/9/005/dom_bom_native_method_bind.html

解决方法
使用方式1，即 $1 来保证方法在正确的上下文中执行。

原文
http://www.w3help.org/zh-cn/causes/SD9005

更多兼容性问题：
【分享】浏览器兼容性问题目录

作者: WebAdvocate 发布时间: 2010-09-14

牛！！！！！！！！！！！

作者: shadowdu 发布时间: 2010-09-14