各浏览器对document.getElementById等艺术的贯彻差别

享有Web前端同仁对 document.getElementById
都丰裕熟悉了。开发进度中不时索要用其赢得页面id为xx的要素,自从元老级JS库Prototype流行后,都欣赏那样简写它

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

有没有人想过为啥要如此写,而不用上边的点子写吗?

// 方式2
var $ = document.getElementById;

这么写的$更精简啊,也很明白,将document的艺术getElementById赋值给变量$,用$去获取页面id为xx的因素。实际上格局2在IE6/7/8中是一蹴而就的(IE9中多少变动),Firefox/Safari/Chrome/Opera则不算。还请自行测试。

怎么Firefox/Safari/Chrome/Opera
格局2得到就不行啊,原因是这个浏览器中getElementById方法内部贯彻中需看重this(document),IE则不需求this。或者说格局2在Firefox/Safari/Chrome/Opera中调用时说丢失了this,以下是个差不离示例

// 定义一个函数show
function show(){alert(this.name);}

// 定义一个p对象,有name属性
var p = {name:'Jack'};

show.call(p); // -> 'Jack'
show(); // -> ''
show.call(null); // -> ''

能够看到show的贯彻中器重this(不难说方法体中选拔了this),由此调用时的环境(执行上下文)即使没有name属性,则得不到梦想的结果。
换句话说,IE6/7/8贯彻document.getElementById时不曾利用this,而
IE9/Firefox/Safari/Chrome/Opera
须要用到this,那里的this正是document对象。直接调用格局2时中间的
this却是window对象,所以造成格局2在 Firefox/Safari/Chrome/Opera
不可以根据id来正常获取元素。

如若将document.getElementById的
执行环境换成了document而非window,则足以健康的采取$了。如下

// 修复document.getElementById
document.getElementById = (function(fn){
    return function(){ 
        return fn.apply(document,arguments);
    };
})(document.getElementById);

// 修复后赋值给$,$可正常使用了
var $ = document.getElementById;

重新,ECMAScript5 中为function新增的 bind 方法可以兑现均等的机能

// 方式3
var $ = document.getElementById.bind(document);

ECMAScript,但眼前格局3只有IE9/Firefox/Chrome/扶助。

分析了getElementById的情景,上边的一部分措施在各浏览器中的差距原因就很好精晓了

var prinf = document.write;
prinf('<h3>Test prinf</h3>'); // IE6/7/8可运行,其它浏览器报错

var prinfln = document.writeln;
prinfln('<h3>Test prinfln</h3>'); // IE6/7/8可运行,其它浏览器报错

var reload = location.reload;
reload(); // IE6/7/8可运行,其它浏览器报错

var go = history.go; 
go(-2); // IE6/7/8可运行,其它浏览器报错