問題描述
在 IE 中將一個(gè) DOM 或 BOM 對象的原生方法賦給一個(gè)變量后，該變量可以成功調(diào)用。
造成的影響
在非 IE 瀏覽器中可能導(dǎo)致腳本異常，停止解析。
受影響的瀏覽器
IE
問題分析
這里使用 document.getElementById 來說明問題。
在前端開發(fā)過程中經(jīng)常需要使用 document.getElementById 來獲取頁面中含有 id 屬性 DOM 元素，為了方便，該方法經(jīng)常被簡寫，如下：
//方式1
var $1 = function(id){return document.getElementById(id);};
//方式2
var $2 = document.getElementById;
用縮寫的 $1、$2 測試，代碼如下：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<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>
</body>
</html>
各瀏覽器中表現(xiàn)如下：1
函數(shù)名IEFirefox Safari Chrome Opera
$1OKOK
$2OKFAIL
注1：OK 表示可以獲取 DIV 元素，F(xiàn)AIL 表示不能獲取 DIV 元素，控制臺出錯(cuò)。
方式 1 在所有瀏覽器中均有效，而方式 2 僅在 IE 瀏覽器中有效。相同的效果也發(fā)生在 document 對象的其他方法上， 甚至是 location、history 等 BOM 對象的方法上。如：
//方式1
var println1 = function(str){document.writeln(str);};
//方式2 （僅IE）
var println2 = document.writeln;
//JS
println2('<h1>Hello,world.</h1>');
IE 下方式 2 在 DOM 或 BOM 對象的原生函數(shù)賦值給其他變量時(shí)會(huì)自動(dòng)將其綁定到在 DOM 或 BOM 對象上， 而非 IE 瀏覽器（Firefox Safari Chrome Opera）需要用到 this，這里的 this 是 document 對象。 直接調(diào)用 $2() 時(shí)內(nèi)部的 this 卻是 window 對象，所以造成 $2() 不能根據(jù) id 來正常獲取元素。
如果將 document.getElementById 的執(zhí)行環(huán)境換成了 document ，則可以正常的使用 $2 了，如下：
document.getElementById = (function(fn){
return function(){
return fn.apply(document,arguments);
};
})(document.getElementById);
var $2 = document.getElementById;
解決方案
使用方式 1 達(dá)到簡寫一些 DOM 和 BOM 對象原生方法的目的。
更多信息請查看IT技術(shù)專欄
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試