在js中，有四種用于檢測(cè)數(shù)據(jù)類(lèi)型的方式，分別是：

• typeof　　用來(lái)檢測(cè)數(shù)據(jù)類(lèi)型的運(yùn)算符
• instanceof 　　 檢測(cè)一個(gè)實(shí)例是否屬于某個(gè)類(lèi)
• constructor　　 構(gòu)造函數(shù)
• Object.prototype.toString.call()　　原型鏈上的Object對(duì)象的toString方法
  

下面我們就來(lái)分別介紹一下上面四種方法的適用場(chǎng)景和局限性。

typeof　用來(lái)檢測(cè)數(shù)據(jù)類(lèi)型的運(yùn)算符

使用typeof檢測(cè)數(shù)據(jù)類(lèi)型，返回值是字符串格式。能夠返回的數(shù)據(jù)類(lèi)型

是："number","string","bolean","undefined","function","object"。

<script>
  console.log(typeof(1));  //number
  console.log(typeof('hello'));  //string
  console.log(typeof(true));  //boolean
  console.log(typeof(undefined));  //undefined
  console.log(typeof(null));  //object
  console.log(typeof({}));  //object
  console.log(typeof(function() {}));  //function
</script>

局限性：

• typeof (null); //"object"。這是由于在js中，null值表示一個(gè)空對(duì)象指針，而這也正是使用typeof操作 符檢測(cè)null值時(shí)會(huì)返回"object"的原因。
• 不能具體的細(xì)分是數(shù)組還是正則，還是對(duì)象中其他的值，因?yàn)槭褂胻ypeof檢測(cè)數(shù)據(jù)類(lèi)型，對(duì)于對(duì)象數(shù)據(jù)類(lèi)型的所有的值，最后返回的都是"object"

instanceof　檢測(cè)某一個(gè)實(shí)例是否屬于某個(gè)類(lèi)

instanceof主要用來(lái)彌補(bǔ)typeof不能檢測(cè)具體屬于哪個(gè)對(duì)象的局限性。

<script>
  let arr = [1,2,3];
  let reg = /\w/;
  console.log(arr instanceof Array);  //true
  console.log(arr instanceof Object);  //true
  console.log(reg instanceof RegExp);  //true
  console.log(reg instanceof Object);  //true
</script>

局限性：

• 不能用于檢測(cè)和處理字面量方式創(chuàng)建出來(lái)的基本數(shù)據(jù)類(lèi)型值，即原始數(shù)據(jù)類(lèi)型
• instanceof的特性：只要在當(dāng)前實(shí)例的原型鏈上的對(duì)象，我們用其檢測(cè)出來(lái)都為true
• 在類(lèi)的原型繼承中，我們最后檢測(cè)出來(lái)的結(jié)果未必正確

constructor　構(gòu)造函數(shù)

是函數(shù)原型上的屬性,該屬性指向的是構(gòu)造函數(shù)本身。

作用和instsnceof非常相似，與instanceof不同的是，不僅可以處理引用數(shù)據(jù)類(lèi)型，還可以處理原始數(shù)據(jù)類(lèi)型。

<script>
  let num = 12;
  let obj = {};
  console.log(num.constructor == Number);//true
  console.log(obj.constructor == Object);//true
</script>

但是要注意一點(diǎn)的是，當(dāng)直接用(對(duì)象字面量或原始數(shù)據(jù)).constructor時(shí)，最好加上（）。為了便于理解，我們來(lái)看一個(gè)例子。

<script>
  1.constructor === Number;    //報(bào)錯(cuò)，Invalid or unexceped token
  (1).constructor === Number;    //true
  {}.constructor === Number;    //報(bào)錯(cuò)，Invalid or unexceped token
  ({}).constructor === Number;  //true
</script>

這主要是由于js內(nèi)部解析方式造成的，js會(huì)把1.constructor解析成小數(shù)，這顯然是不合理的，小數(shù)點(diǎn)后應(yīng)該是數(shù)字，因此就會(huì)引發(fā)報(bào)錯(cuò)。js會(huì)把{}解析成語(yǔ)句塊來(lái)執(zhí)行，這時(shí)后面出現(xiàn)一個(gè)小數(shù)點(diǎn)顯然也是不合理的，因此也會(huì)報(bào)錯(cuò)。為了解決這個(gè)問(wèn)題，我們可以為表達(dá)式加上（）使js能夠正確解析。

局限性：我們可以把類(lèi)的原型進(jìn)行重寫(xiě)，在重寫(xiě)的過(guò)程中很可能把之前constructor給覆蓋了，這樣檢測(cè)出來(lái)的結(jié)果就是不準(zhǔn)確的

<script>
   function Fn() {};
  Fn.prototype = new Array;
  var f = new Fn;
  //f是一個(gè)函數(shù)，按道理說(shuō)他的構(gòu)造函數(shù)應(yīng)該是Function,但是修改其原型鏈后，它的constructor變成了Array.
  console.log(f.constructor == Array);  //true
</script>

Object.prototype.toString.call()　原型鏈上的Object對(duì)象的toString方法

Object.prototype.toString的作用是返回當(dāng)前方法的執(zhí)行主體(方法中的this)所屬類(lèi)的詳細(xì)信息,是最全面也是最常用的檢測(cè)數(shù)據(jù)類(lèi)型的方式。

返回值的類(lèi)型為string類(lèi)型。

<script> 
  console.log(Object.prototype.toString.call(1));          //[object Number]
  console.log(Object.prototype.toString.call(/^sf/));        //[object RegExp]
  console.log(Object.prototype.toString.call("hello"));      //[object String]
  console.log(Object.prototype.toString.call(true));        //[object Boolean]
  console.log(Object.prototype.toString.call(null));        //[object Null]
  console.log(Object.prototype.toString.call(undefined));      //[object Undefined]
  console.log(Object.prototype.toString.call(function() {}));    //[object Function]
  console.log(typeof(Object.prototype.toString.call(function() {})));    //string
</script>

最新評(píng)論