document.getElementById介紹
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);
//執(zhí)行
alert(g('t'));
w();
});
在標(biāo)準(zhǔn)瀏覽器中(IE9、FF、chrome等)上述代碼執(zhí)行得非常一致,返回結(jié)果如下:
typeof => "function"
String => "function #funcName#{[native code]}"
instanceof Object => true
instanceof Function => true
很奇怪,雖然類型是函數(shù),但是我們卻不能直接使用括號來執(zhí)行函數(shù)g,而需要使用call
g.call(document,elementId);
但是如果運(yùn)行環(huán)境是IE6,一切看起來非常詭異,下面是運(yùn)行結(jié)果(注意粗體部分):
//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都只能使用括號直接執(zhí)行函數(shù),而不需要使用call。對于函數(shù)g使用下面的方式調(diào)用會(huì)導(dǎo)致一個(gè)“對象沒有該屬性”的錯(cuò)誤:
g.call(document,eleId)
在IE6下,對于自定義的函數(shù)testFunc測試結(jié)果沒有任何問題,但是對于g卻十分地詭異!
既然g是object那么為何可以像函數(shù)一樣用()直接調(diào)用執(zhí)行?
而在標(biāo)準(zhǔn)瀏覽器中,g既然是函數(shù)為什么卻不能直接使用()來執(zhí)行呢?
事實(shí)上對于document.getElementById,它到底是function還是object就連jQuery 1.6.2也沒有解決這個(gè)問題。
在IE6中$.isFunction(g)仍然返回的是false!下面是jQuery 1.6.2的jQuery.isFunction的相關(guān)源代碼:
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上提了這個(gè)問題,好在牛人確實(shí)多,很快就有了回復(fù)。最后我簡單的總結(jié)一下給大家參考:
document.getElementById 最初被定義為 HTMLDocument (HTML DOM)接口的一個(gè)成員,但是在后來的 2 級 DOM 中移入到 Document (XML DOM)接口中。
document.getElementById屬于host object,它是一個(gè)function,但是它并沒有被定義在ECMAScript中而是DOM接口的一部分。
支持[[Call]](內(nèi)部屬性?)host object的typeof返回值就是function。請記住Host Objects并不總是遵循Native Objects的相關(guān)規(guī)則,比如typeof。
而對于testFunc它是native object, 更具體地說是native function。
下面是EcmaScript 5對于typeof操作符的返回結(jié)果的歸類:
Type of val |
Result |
Undefined |
|
Null |
|
Boolean |
|
Number |
|
String |
|
Object (native and does not implement [[Call]]) |
|
Object (native or host and does implement [[Call]]) |
|
Object (host and does not implement [[Call]]) |
Implementation-defined except may not be |
var $ = function(id) { return document.getElementById(g) };
但是即使有了上面的解釋之后,我對Host Object和Native Object又有了新的疑惑。
- document.getElementById獲取控件對象為空的解決方法
- js中document.getElementByid、document.all和document.layers區(qū)分介紹
- jquery中的 $("#jb51")與document.getElementById("jb51") 的區(qū)別
- document.getElementById的簡寫方式(獲取id對象的簡略寫法)
- document.getElementById方法在Firefox與IE中的區(qū)別
- document.getElementById為空或不是對象的解決方法
- 各瀏覽器對document.getElementById等方法的實(shí)現(xiàn)差異解析
相關(guān)文章
更優(yōu)雅的微信小程序骨架屏實(shí)現(xiàn)詳解
這篇文章主要介紹了更優(yōu)雅的微信小程序骨架屏實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08JavaScript實(shí)現(xiàn)重置表單(reset)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)重置表單(reset)的方法,涉及javascript中reset()方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04JavaScript Date對象詳解及時(shí)間戳和時(shí)間的相互轉(zhuǎn)換問題
這篇文章主要介紹了JavaScript Date對象詳解及時(shí)間戳和時(shí)間的相互轉(zhuǎn)換問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01小程序中監(jiān)聽頁面滾動(dòng)的幾種方法實(shí)例
這段時(shí)間接了一個(gè)微信小程序項(xiàng)目,從此打開小程序的新世界大門,下面這篇文章主要給大家介紹了關(guān)于小程序中監(jiān)聽頁面滾動(dòng)的幾種方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04微信小程序?qū)崙?zhàn)之上拉(分頁加載)效果(2)
這篇文章主要介紹了微信小程序?qū)崙?zhàn)之上拉加載、分頁加載效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04json對象和formData相互轉(zhuǎn)換的方式詳解
我們有兩種常見的傳參方式: JSON 對象格式和 formData 格式,但是一些場景是需要我們對這兩種數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換的,這篇文章主要介紹了json對象和formData相互轉(zhuǎn)換的方式詳解,需要的朋友可以參考下2023-02-02微信小程序 扭蛋抽獎(jiǎng)機(jī)css3動(dòng)畫實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序 扭蛋抽獎(jiǎng)機(jī)css3動(dòng)畫實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07