js類型檢測的4種方法

1.typeof類型檢測

var a;
var b=null;
var c=true;
var d=1;
var e='s';
var f=[1,2];
var g={name:'kk'};
var h=function(){};
var i=new h();
console.log(typeof(a));
console.log(typeof(b));
console.log(typeof(c));
console.log(typeof(d));
console.log(typeof(e));
console.log(typeof(f));
console.log(typeof(g));
console.log(typeof(h));
console.log(typeof(i));

結果

typeof返回結果

可以發(fā)現(xiàn)

  • typeof返回的內(nèi)容有undefinded,boolen,number,string,object,function.
  • null返回的是object而undefined還是undefined。數(shù)組返回的也是object,typeof不區(qū)分對象是由誰創(chuàng)建的,包括內(nèi)置對象

2.instanceof

用法:o instanceof c,如果o繼承自c.propotype(可以不是直接繼承),則返回true室抽。如果o不是對象的話則返回false

var a;
var b=null;
var c=true;
var d=1;
var e='s';
var f=[1,2];
var g={name:'kk'};
var h=function(){};
var i=new h();
var j=/\s/;
console.log(a instanceof Object);
console.log(b instanceof Object);
console.log(c instanceof Boolean);
console.log(c instanceof Object);
console.log(d instanceof Object);
console.log(e instanceof Object);
console.log(f instanceof Object);
console.log(f instanceof Array);
console.log(g instanceof Object);
console.log(h instanceof Object);
console.log(i instanceof h);
console.log(j instanceof RegExp);

結果

instanceof

可以發(fā)現(xiàn)

  • instanceof是檢測對象用的,可以檢測對象的特定類型,只要左邊不是對象就返回false膳殷,如 var a=true; a instanceof Boolean==>false,
  • function的instanceof是object

3.Object.propotype.toString.call(obj).slice(8,-1)

類屬型法。
很多對象重寫了toSting九火,需要調(diào)用Object對象上的赚窃,返回形式[object class].

function classof(o){
if(o===null) return 'Null';
if(o===undefined) return 'Undefined';
return Object.prototype.toString.call(o).slice(8,-1);
}
var a;
var b=null;
var c=false;
var d=1;
var e='s';
var f=[1,2];
var g={name:'kk'};
var h=function(){};
var i=new h();
var j=/\s/;
console.log(classof(a));
console.log(classof(b));
console.log(classof(c));
console.log(classof(d));
console.log(classof(e));
console.log(classof(f));
console.log(classof(g));
console.log(classof(h));
console.log(classof(i));
console.log(classof(j));

結果

類屬性法

可以發(fā)現(xiàn)

  • 能夠識別內(nèi)置對象但不能識別自定義對象的類別。
  • 返回Null岔激,Undefined勒极,Boolean,Number虑鼎,String辱匿,Array,Object炫彩,自定義對象匾七。

4.constructor法

原理:返回構造函數(shù)的名稱。

Function.prototype.getName=function(){
if('name' in this) return this.name;
return this.name=this.toString().match(/function\s*([^(]*)\(/);
}
function typeAndValue(x){
if(x===null) return 'Null';
if(x===undefined) return 'Undefined';
return x.constructor.getName();
}
var a;
var b=null;
var c=false;
var d=1;
var e='s';
var f=[1,2];
var g={name:'kk'};
var h=function(){};
var i=new h();
var j=/\s/;
console.log(typeAndValue(a));
console.log(typeAndValue(b));
console.log(typeAndValue(c));
console.log(typeAndValue(d));
console.log(typeAndValue(e));
console.log(typeAndValue(f));
console.log(typeAndValue(g));
console.log(typeAndValue(h));
console.log(typeAndValue(i));
console.log(typeAndValue(j));

結果

constructor法

可以看出

  • 能夠返回自定義對象與內(nèi)置對象的名稱
  • null與undefined沒有constructor需要自己處理江兢。
  • 有的對象沒有constructor需要特殊處理昨忆。

原型鏈上沒有constructor的情況

Function.prototype.getName=function(){
if('name' in this) return this.name;
return this.name=this.toString().match(/function\s*([^(]*)\(/);
}
function typeAndValue(x){
if(x===null) return 'Null';
if(x===undefined) return 'Undefined';
return x.constructor.getName();
}
function Range(from,to){
this.from=from;
this.to=to;
}
Range.prototype={
 toString:function(){
   return '('+this.from+','+this.to+')'
}
}
var r=new Range(3,4);
console.log(typeAndValue(r))
console.log(Object.prototype.toString(r).slice(8,-1));
結果
都為object

幾種方法的綜合

function type(o){
 var t,c,n
 if(o===null) return 'Null';//處理Null
 if(o!==o) return 'NaN';//處理NaN特殊
 if((t=typeof(o))!=='object') return t;//處理string,boolean杉允,number邑贴,function,undefined。
 if((c=classof(o))!=='Object') return c//處理內(nèi)置對象Date
 if(o.constructor && typeof(o.constructor)==='function'&&(n=o.constructor.getName())) {return n;}//處理自定義對象
 return 'object';
 
}
function classof(o){
 return Object.prototype.toString.call(o).slice(8,-1);
}
Function.prototype.getName=function(){
 if('name' in this) return this.name;
 return this.name=this.toString().match(/function\s*([^(]*)\(/)[1];
}

var a;
var b=null;
var c=false;
var d=1;
var e='s';
var f=[1,2];
var g={name:'kk'};
var h=function(){};
var i=new h();
var j=/\s/;
console.log(type(a));
console.log(type(b));
console.log(type(c));
console.log(type(d));
console.log(type(e));
console.log(type(f));
console.log(type(g));
console.log(type(h));
console.log(type(i));
console.log(type(j));

結果

綜合

可以發(fā)現(xiàn)

  • 以typeof處理基本類型(undefined叔磷,boolean拢驾,number,string世澜,function)第一個字母是小寫的独旷。
  • 以類屬性法處理內(nèi)置對象Object.prototype.toString.call(obj).slice(8,-1)(Date,RegExp)寥裂,第一個字母大寫的
  • 以constructor法處理自定義類別和普通的Object(Object嵌洼,h),注意Object是首字母大寫封恰。
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末麻养,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子诺舔,更是在濱河造成了極大的恐慌鳖昌,老刑警劉巖备畦,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異许昨,居然都是意外死亡懂盐,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門糕档,熙熙樓的掌柜王于貴愁眉苦臉地迎上來莉恼,“玉大人,你說我怎么就攤上這事速那±” “怎么了?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵端仰,是天一觀的道長捶惜。 經(jīng)常有香客問我,道長荔烧,這世上最難降的妖魔是什么吱七? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮茴晋,結果婚禮上陪捷,老公的妹妹穿的比我還像新娘。我一直安慰自己诺擅,他們只是感情好市袖,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著烁涌,像睡著了一般苍碟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上撮执,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天微峰,我揣著相機與錄音,去河邊找鬼抒钱。 笑死蜓肆,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的谋币。 我是一名探鬼主播仗扬,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蕾额!你這毒婦竟也來了早芭?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤诅蝶,失蹤者是張志新(化名)和其女友劉穎退个,沒想到半個月后募壕,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡语盈,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年舱馅,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片黎烈。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡习柠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出照棋,到底是詐尸還是另有隱情,我是刑警寧澤武翎,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布烈炭,位于F島的核電站,受9級特大地震影響宝恶,放射性物質(zhì)發(fā)生泄漏符隙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一垫毙、第九天 我趴在偏房一處隱蔽的房頂上張望霹疫。 院中可真熱鬧,春花似錦综芥、人聲如沸丽蝎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽屠阻。三九已至,卻和暖如春额各,著一層夾襖步出監(jiān)牢的瞬間国觉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工虾啦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留麻诀,地道東北人。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓傲醉,卻偏偏與公主長得像蝇闭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子需频,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品丁眼,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式昭殉。簡單...
    舟漁行舟閱讀 7,752評論 2 17
  • 單例模式 適用場景:可能會在場景中使用到對象苞七,但只有一個實例藐守,加載時并不主動創(chuàng)建,需要時才創(chuàng)建 最常見的單例模式蹂风,...
    Obeing閱讀 2,065評論 1 10
  • 如何控制alert中的換行卢厂?\n alert(“p\np”); 請編寫一個JavaScript函數(shù) parseQu...
    heyunqiang99閱讀 1,084評論 0 6
  • JS基礎講解 JavaScript組成ECMAScript:解釋器、翻譯DOM:Document Object M...
    FConfidence閱讀 572評論 0 1
  • 現(xiàn)在升起了寫文的想法惠啄,也許是心中事情太多慎恒,必須有一個東西來把自己那份壞的心情從自己心中慢慢釋放出去,而寫作的過程我...
    查拉圖斯特拉如是說閱讀 463評論 0 0