在JavaScript中typeof的用途介紹
JavaScript 中的 typeof 其實(shí)非常復(fù)雜,它可以用來做很多事情,但同時(shí)也有很多怪異的表現(xiàn)。
本文列舉出了它的多個(gè)用法,而且還指出了存在的問題以及解決辦法。
閱讀本文的前提是,你現(xiàn)在應(yīng)該已經(jīng)知道原始值和對象值的區(qū)別了。
檢查一個(gè)變量是否存在,是否有值
typeof在兩種情況下會返回 "undefined":
1.變量沒有被聲明
2.變量的值是 undefined
例如:
> typeof undeclaredVariable === "undefined"
true
> var declaredVariable;
> typeof declaredVariable
'undefined'
> typeof undefined
'undefined'
還有其他辦法檢測某個(gè)值是否是 undefined:
> var value = undefined;
> value === undefined
true
但這種方法如果使用在一個(gè)未聲明的變量上的時(shí)候,就會拋出異常,因?yàn)橹挥?typeof 才可以正常檢測未聲明的變量的同時(shí)還不報(bào)錯(cuò):
> undeclaredVariable === undefined
ReferenceError: undeclaredVariable is not defined
注意:未初始化的變量,沒有被傳入?yún)?shù)的形參,不存在的屬性,都不會出現(xiàn)上面的問題,因?yàn)樗鼈兛偸强稍L問的,值總是 undefined:
> var declaredVariable;
> declaredVariable === undefined
true
> (function (x) { return x === undefined }())
true
> ({}).foo === undefined
true
譯者注:因此,如果想檢測一個(gè)可能沒有被聲明的全局變量是否存在,也可以使用if(window.maybeUndeclaredVariable){}。
問題:typeof 在完成這樣的任務(wù)時(shí)顯得很繁雜.
解決辦法:這樣的操作不是很常見,所以有人覺的沒必要再找更好的解決辦法了。 不過也許有人會提出一個(gè)專門的操作符:
> defined undeclaredVariable
false
> var declaredVariable;
> defined declaredVariable
false
或者,也許有人還需要一個(gè)檢測變量是否被聲明的操作符:
> declared undeclaredVariable
false
> var declaredVariable;
> declared declaredVariable
true
譯者注:在 perl 里,上面的 defined 操作符相當(dāng)于 defined(),上面的 declared 操作符相當(dāng)于 exists()。
判斷一個(gè)值不等于 undefined 也不等于 null
問題:如果你想檢測一個(gè)值是否被定義過(值不是 undefined 也不是 null),那么你就遇到了 typeof 最有名的一個(gè)怪異表現(xiàn)(被認(rèn)為是一個(gè) bug):typeof null 返回了 "object":
> typeof null
'object'
譯者注:這只能說是最初的 JavaScript 實(shí)現(xiàn)的 bug,而現(xiàn)在標(biāo)準(zhǔn)就是這樣規(guī)范的。V8 曾經(jīng)修正并實(shí)現(xiàn)過 typeof null === "null",但最終證明不可行。http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null。
(譯注:typeof 在操作 null 時(shí)會返回 "object",這是 JavaScript 語言本身的 bug。不幸的是,這個(gè) bug 永遠(yuǎn)不可能被修復(fù)了,因?yàn)樘嘁延械拇a已經(jīng)依賴了這樣的表現(xiàn)。但是 null 到底是不是 對象呢?stackoverflow 有關(guān)于這個(gè)問題的討論:http://stackoverflow.com/questions/801032/null-object-in-javascript/7968470#7968470@justjavac)
解決辦法:不要使用 typeof 來做這項(xiàng)任務(wù),用下面這樣的函數(shù)來代替:
function isDefined(x) {
return x !== null && x !== undefined;
}
另一個(gè)可能性是引入一個(gè) “默認(rèn)值運(yùn)算符”,在 myValue 未定義的情況下,下面的表達(dá)式會返回 defaultValue:
myValue ?? defaultValue
上面的表達(dá)式等價(jià)于:
(myValue !== undefined && myValue !== null) ? myValue : defaultValue
又或者:
myValue ??= defaultValue
其實(shí)是下面這條語句的簡化:
myValue = myValue ?? defaultValue
當(dāng)你訪問一個(gè)嵌套的屬性時(shí),比如 bar,你或許會需要這個(gè)運(yùn)算符的幫助:
obj.foo.bar
如果 obj 或者 obj.foo 是未定義的,上面的表達(dá)式會拋出異常。 一個(gè)運(yùn)算符 .?? 可以讓上面的表達(dá)式在遍歷一層一層的屬性時(shí),返回第一個(gè)遇到的值為 undefined 或 null 的屬性:
obj.??foo.??bar
上面的表達(dá)式等價(jià)于:
(obj === undefined || obj === null) ? obj
: (obj.foo === undefined || obj.foo === null) ? obj.foo
: obj.foo.bar
區(qū)分對象值和原始值
下面的函數(shù)用來檢測 x 是否是一個(gè)對象值:
function isObject(x) {
return (typeof x === "function"
|| (typeof x === "object" && x !== null));
}
問題:上面的檢測比較復(fù)雜,是因?yàn)?typeof 把函數(shù)和對象看成是不同的類型,而且 typeof null 返回 "object".
解決辦法:下面的方法也經(jīng)常用于檢測對象值:
function isObject2(x) {
return x === Object(x);
}
警告:你也許認(rèn)為這里可以使用 instanceof Object 來檢測,但是 instanceof 是通過使用使用一個(gè)對象的原型來判斷實(shí)例關(guān)系的,那么沒有原型的對象怎么辦呢:
> var obj = Object.create(null);
> Object.getPrototypeOf(obj)
null
obj 確實(shí)是一個(gè)對象,但它不是任何值的實(shí)例:
> typeof obj
'object'
> obj instanceof Object
false
在實(shí)際中,你可能很少遇到這樣的對象,但它的確存在,而且有它的用途。
譯者注:Object.prototype 就是唯一的一個(gè)內(nèi)置的,沒有原型的對象。
>Object.getPrototypeOf(Object.prototype)
null
>typeof Object.prototype
'object'
>Object.prototype instanceof Object
false
原始值的類型是什么?
typeof 是最好的用來查看某個(gè)原始值的類型的方式。
> typeof "abc"
'string'
> typeof undefined
'undefined'
問題:你必須知道 typeof null 的怪異表現(xiàn)。
> typeof null // 要小心!
'object'
解決辦法:下面的函數(shù)可以修復(fù)這個(gè)問題(只針對這個(gè)用例)。
function getPrimitiveTypeName(x) {
var typeName = typeof x;
switch(typeName) {
case "undefined":
case "boolean":
case "number":
case "string":
return typeName;
case "object":
if (x === null) {
return "null";
}
default: // 前面的判斷都沒通過
throw new TypeError("參數(shù)不是一個(gè)原始值: "+x);
}
}
更好的解決辦法:實(shí)現(xiàn)一個(gè)函數(shù) getTypeName(),除了可以返回原始值的的類型,還可以返回對象值的內(nèi)部 [[Class]] 屬性。 這里講了如何實(shí)現(xiàn)這個(gè)函數(shù)(譯者注:jQuery 中的 $.type 就是這樣的實(shí)現(xiàn))
某個(gè)值是否是函數(shù)
typeof 可以用來檢測一個(gè)值是否是函數(shù)。
> typeof function () {}
'function'
> typeof Object.prototype.toString
'function'
原則上說,instanceof Function 也可以進(jìn)行這種需求的檢測。 乍一看,貌似寫法還更加優(yōu)雅。 但是,瀏覽器有一個(gè)怪癖:每一個(gè)框架和窗口都有它自己的全局變量。 因此,如果你將某個(gè)框架中的對象傳到另一個(gè)框架中,instanceof 就不能正常工作了,因?yàn)檫@兩個(gè)框架有著不同的構(gòu)造函數(shù)。 這就是為什么 ECMAScript5 中會有Array.isArray() 方法的原因。 如果有一個(gè)能夠跨框架的,用于檢查一個(gè)對象是否是給定的構(gòu)造函數(shù)的實(shí)例的方法的話,那會很好。 上述的 getTypeName() 是一個(gè)可用的變通方法,但也許還有一個(gè)更根本的解決方案。
綜述
下面提到的,應(yīng)該是目前 JavaScript 中最迫切需要的,可以代替一些 typeof 目前職責(zé)的功能特性:
•isDefined() (比如 Object.isDefined()): 可以作為一個(gè)函數(shù)或者一個(gè)運(yùn)算符
•isObject()
•getTypeName()
•能夠跨框架的,檢測一個(gè)對象是否是指定的構(gòu)造函數(shù)的實(shí)例的機(jī)制
檢查某個(gè)變量是否已經(jīng)被聲明這樣的需求,可能沒那么必要有自己的運(yùn)算符。
相關(guān)文章
addEventListener()第三個(gè)參數(shù)useCapture (Boolean)詳細(xì)解析
true的觸發(fā)順序總是在false之前;如果多個(gè)均為true,則外層的觸發(fā)先于內(nèi)層;如果多個(gè)均為false,則內(nèi)層的觸發(fā)先于外層2013-11-11JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換方法小結(jié)
這篇文章主要介紹了JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換方法,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-10-10Javascript基礎(chǔ)_簡單比較undefined和null 值
下面小編就為大家?guī)硪黄狫avascript基礎(chǔ)_簡單比較undefined和null 值。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06關(guān)于JS字符串函數(shù)String.replace()
本篇介紹關(guān)于JS字符串函數(shù)String.replace(),有需要的朋友參考一下。2013-04-04JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)教程
這篇文章主要介紹了JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)入門教程,包括對節(jié)點(diǎn)的創(chuàng)建修改刪除等操作,還特別提到了其中appendChild()與insertBefore()插入節(jié)點(diǎn)時(shí)需注意的問題,需要的朋友可以參考下2016-03-03