javascript如何判斷變量的數(shù)據(jù)類型

曹金海發(fā)布于2019-08-22 10:59 / 577人閱讀

摘要：除和外，所有的數(shù)據(jù)類型都是可以轉(zhuǎn)化為對(duì)象，而如果是對(duì)象，就肯定有構(gòu)造函數(shù)。特性因?yàn)楹蜎](méi)有構(gòu)造函數(shù)，因此不能用此方法來(lái)判斷。由于同一條原型繼承鏈上的各個(gè)對(duì)象的構(gòu)造函數(shù)都不一樣，因此，此方法可以區(qū)分開(kāi)繼承鏈上的各個(gè)自定義數(shù)據(jù)類型。

typeof 用法示例

var arr = [];
typeof arr;    //"object"
typeof(arr);    //"object"

typeof實(shí)際上是一個(gè)一元運(yùn)算符，因此可以用上述代碼所示的兩種用法。

typeof所支持的數(shù)據(jù)類型

從上表可以看出，typeof支持的數(shù)據(jù)類型還是比較齊全的，除了倆比較特殊以外：

對(duì)Null使用typeof返回object，這跟我們的認(rèn)知還是有一定差距的，這是javascript的一個(gè)設(shè)計(jì)上的bug，ECMAScript 6中有提議修改此bug，但已經(jīng)被否決了；不過(guò)只要加個(gè)邏輯非!運(yùn)算符，就能把Null這種情況給排除了。

除了function以外，其它具體的對(duì)象類型都無(wú)法判斷出來(lái)。

typeof瀏覽器兼容性注意點(diǎn) 對(duì)正則表達(dá)式字面量的類型判斷在某些瀏覽器中不符合標(biāo)準(zhǔn)：

typeof /s/ === "function"; // Chrome 1-12 , 不符合 ECMAScript 5.1
typeof /s/ === "object"; // Firefox 5+ , 符合 ECMAScript 5.1

IE 宿主對(duì)象是對(duì)象而不是函數(shù)

在 IE 6, 7 和 8 中，大多數(shù)的宿主對(duì)象是對(duì)象，而不是函數(shù)，例如：

typeof alert === "object"

instanceof 用法示例

// 定義構(gòu)造函數(shù)
function C(){} 
function D(){} 

var o = new C();

// true，因?yàn)?Object.getPrototypeOf(o) === C.prototype
o instanceof C; 

// false，因?yàn)?D.prototype不在o的原型鏈上
o instanceof D; 

o instanceof Object; // true,因?yàn)镺bject.prototype.isPrototypeOf(o)返回true

instanceof是一個(gè)二元運(yùn)算符。

instanceof總結(jié)

javascript中的原生對(duì)象以及用戶的自定義對(duì)象基本上都能利用instanceof識(shí)別出來(lái)，除了Null和Undefined。

instanceof無(wú)法區(qū)分開(kāi)同一原型繼承鏈：

function A(){
    //...
}

function B(){
    //...
}

function C(){
    //...
}

var a = new A();
B.prototype = a;

var b = new B();
C.prototype = b;

var c = new C();

c instanceof A;    //true
c instanceof B;    //true
c instanceof C;    //true

Object.prototype.toString.call 用法示例

function type(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1);
}
type(1);    //"Number"
type("1");    //"String"
type(true);    //"Boolean"
type(undefined);    //"Undefined"
type(null);    //"Null"
type({});    //"Object"
type([]);    //"Array"
type(new Date);    //"Date"
type(/d/);    //"RegExp"
type(function() {});    //"Function"

function Point(x, y) {
    //
}
type(new Point(1, 2));    //"Object"

用法解析

從以上用法示例可以看出，這個(gè)基于Object.prototype.toString.call封裝好的函數(shù)用法跟typeof非常相似，但是在支持的數(shù)據(jù)類型上比typeof強(qiáng)多了，所有的javascript原生數(shù)據(jù)類型都能判斷出來(lái)。遺憾的是，Object.prototype.toString.call也不是萬(wàn)能的方案：無(wú)法識(shí)別自定義的對(duì)象類型。
Object.prototype.toString.call實(shí)際上是返回這樣形式的值：

Object.prototype.toString.call(1);    //"[object Number]"
Object.prototype.toString.call("1");    //"[object String]"

因此只要用slice方法把數(shù)據(jù)類型“切”出來(lái)就成了。

constructor（構(gòu)造函數(shù)） 用法示例

/*
* 獲取對(duì)象構(gòu)造函數(shù)名稱
*/
function getConstructorName(obj){
    return obj && obj.constructor && obj.constructor.toString().match(/functions*([^(]*)/)[1]; //利用obj && obj.constructor來(lái)判斷null和undefined
}

用法解析

這是一種非常巧妙的判斷數(shù)據(jù)類型的方法——利用構(gòu)造函數(shù)判斷數(shù)據(jù)類型，這是基于javascript的特性/規(guī)范：

對(duì)象的構(gòu)造函數(shù)名就是該數(shù)據(jù)類型。

除Null和Undefined外，所有的數(shù)據(jù)類型都是/可以轉(zhuǎn)化為對(duì)象，而如果是對(duì)象，就肯定有構(gòu)造函數(shù)。

特性

因?yàn)?strong>Null和Undefined沒(méi)有構(gòu)造函數(shù)，因此不能用此方法來(lái)判斷。

由于同一條原型繼承鏈上的各個(gè)對(duì)象的構(gòu)造函數(shù)都不一樣，因此，此方法可以區(qū)分開(kāi)繼承鏈上的各個(gè)自定義數(shù)據(jù)類型。

function A(){
    //...
}

function B(){
    //...
}

function C(){
    //...
}

var a = new A();
B.prototype = a;

var b = new B();
C.prototype = b;

var c = new C();

getConstructorName(a);    //A
getConstructorName(b);    //B
getConstructorName(c);    //C

總結(jié)

以上這四種方法都有不同程度的缺陷，如果從實(shí)用性的角度來(lái)考慮，可以綜合一下：

function type(obj) {console.dir(obj);
  if(!obj) {
    return Object.prototype.toString.call(obj).slice(8, -1);
  }
  return obj.constructor.toString().match(/functions*([^(]*)/)[1];
}
var t = type(1) // t==="number"
var t = type(new Number(1)) // t==="number"
var t = type("abc") // t==="string"
var t = type(new String("abc")) // t==="string"
var t = type(true) // t==="boolean"
var t = type(undefined) // t==="undefined"
var t = type(null) // t==="null"
var t = type({}) // t==="object"
var t = type([]) // t==="array"
var t = type(new Date) // t==="date"
var t = type(/d/) // t==="regexp"
var t = type(function(){}) // t==="function"

參考資料

typeof - JavaScript | MDN
instanceof - JavaScript | MDN