快捷導(dǎo)航

javascript之typeof、instanceof操作符使用探討

更新時間：2013年05月19日 16:39:01 作者：

typeof和instanceof這兩個操作符時不時就會用到，堪稱必用，這兩個操作符或許是javascript中最大的設(shè)計缺陷，因為幾乎不可能從他們那里得到想要的結(jié)果

寫javascirpt代碼時，typeof和instanceof這兩個操作符時不時就會用到，堪稱必用。但是！使用它們總是不能直接的得到想要的結(jié)果，非常糾結(jié)，普遍的說法認為“這兩個操作符或許是javascript中最大的設(shè)計缺陷，因為幾乎不可能從他們那里得到想要的結(jié)果”
typeof
說明：typeof返回一個表達式的數(shù)據(jù)類型的字符串，返回結(jié)果為js基本的數(shù)據(jù)類型，包括number,boolean,string,object,undefined,function。
從說明來看，貌似沒什么問題。

下面的代碼寫了一個數(shù)值變量，typeof后的結(jié)果是"number"。

復(fù)制代碼代碼如下:

 
var a = 1; 
console.log(typeof(a)); //=>number 

如果用Number類型的構(gòu)造函數(shù)new一個變量的話，typeof后的結(jié)果是"object"。

復(fù)制代碼代碼如下:

 
var a = new Number(1); 
console.log(typeof(a)); //=>object 

上面的這兩個輸出結(jié)果看似沒啥問題，這一點從書上看來是理所當(dāng)然的事情，因為javascript就是這么設(shè)計的。

但是！問題就在于既然調(diào)用了typeof就應(yīng)該準(zhǔn)確返回一個變量的類型，不管是直接用值創(chuàng)建的還是用類型的構(gòu)造函數(shù)創(chuàng)建的，否則！我還用你做啥！
那么對于：

復(fù)制代碼代碼如下:

 
var a = 1; 
var b = new Number(1); 

a和b變量的類型準(zhǔn)確的說來都應(yīng)該是Number才是想要的結(jié)果。
而準(zhǔn)確的類型信息保存在變量的內(nèi)部屬性 [[Class]] 的值中，通過使用定義在 Object.prototype 上的方法 toString來獲取。

獲取類型信息：

復(fù)制代碼代碼如下:

 
var a = 1; 
var b = new Number(1); 
console.log(Object.prototype.toString.call(a)); 
console.log(Object.prototype.toString.call(b)); 

輸出：

復(fù)制代碼代碼如下:

 
[object Number] 
[object Number] 

是不是已經(jīng)很直接了，我們稍微處理一下，得到直接結(jié)果：

復(fù)制代碼代碼如下:

 
var a = 1; 
var b = new Number(1); 
console.log(Object.prototype.toString.call(a).slice(8,-1)); 
console.log(Object.prototype.toString.call(b).slice(8,-1)); 

輸出：
Number
Number
這就是想要的結(jié)果。
為了更好的使用，我們封裝一個方法，用來判斷某個變量是否是某種類型:

復(fù)制代碼代碼如下:

 
function is(obj,type) { 
var clas = Object.prototype.toString.call(obj).slice(8, -1); 
return obj !== undefined && obj !== null && clas === type; 
} 

定義一些變量做過測試，先來看看它們的typeof輸出：

復(fù)制代碼代碼如下:

 
var a1=1; 
var a2=Number(1); 
var b1="hello"; 
var b2=new String("hello"); 
var c1=[1,2,3]; 
var c2=new Array(1,2,3); 
console.log("a1's typeof:"+typeof(a1)); 
console.log("a2's typeof:"+typeof(a2)); 
console.log("b1's typeof:"+typeof(b1)); 
console.log("b2's typeof:"+typeof(b2)); 
console.log("c1's typeof:"+typeof(c1)); 
console.log("c2's typeof:"+typeof(c2)); 
輸出： 
a1's typeof:number 
a2's typeof:object 
b1's typeof:string 
b2's typeof:object 
c1's typeof:object 
c2's typeof:object 

我們再用新作的函數(shù)是一下：

復(fù)制代碼代碼如下:

 
console.log("a1 is Number:"+is(a1,"Number")); 
console.log("a2 is Number:"+is(a2,"Number")); 
console.log("b1 is String:"+is(b1,"String")); 
console.log("b2 is String:"+is(b2,"String")); 
console.log("c1 is Array:"+is(c1,"Array")); 
console.log("c2 is Array:"+is(c2,"Array")); 
輸出： 
a1 is Number:true 
a2 is Number:true 
b1 is String:true 
b2 is String:true 
c1 is Array:true 
c2 is Array:true 

注：typeof也不是無用，實際用處是用來檢測一個變量是否已經(jīng)定義或者是否已經(jīng)賦值。
instanceof
說明：判斷一個對象是否為某一數(shù)據(jù)類型，或一個變量是否為一個對象的實例。
instanceof 操作符用來比較兩個內(nèi)置類型的變量時一樣力不從心，同樣會對結(jié)果不滿意。

復(fù)制代碼代碼如下:

 
console.log("abc" instanceof String); // false 
console.log("abc" instanceof Object); // false 
console.log(new String("abc") instanceof String); // true 
console.log(new String("abc") instanceof Object); // true 

只有在比較自定義的對象時才準(zhǔn)確反映關(guān)系。

復(fù)制代碼代碼如下:

 
function Person() {} 
function Man() {} 
Man.prototype = new Person(); 
console.log(new Man() instanceof Man); // true 
console.log(new Man() instanceof Person); // true 

您可能感興趣的文章: