詳解JavaScript中的4種類型識別方法

更新時間：2015年09月14日 11:06:50 作者：小火柴的藍色理想

JavaScript中檢測對象類型的運算符有：typeof、instanceof，還有對象的constructor屬性： 1) typeof 運算符 typeof 是一元運算符，返回結果是一個說明運算數(shù)類型的字符串。下面由小編給大家分享JavaScript中的4種類型識別方法，需要的朋友可以參考下本文

具體內容如下：

1.typeof

　　【輸出】首字母小寫的字符串形式

　　【功能】

　　　　[a]可以識別標準類型(將Null識別為object)
　　　　[b]不能識別具體的對象類型(Function除外)

　　【實例】

console.log(typeof "jerry");//"string"
console.log(typeof 12);//"number"
console.log(typeof true);//"boolean"
console.log(typeof undefined);//"undefined"
console.log(typeof null);//"object"
console.log(typeof {name: "jerry"});//"object"
console.log(typeof function(){});//"function"
console.log(typeof []);//"object"
console.log(typeof new Date);//"object"
console.log(typeof /\d/);//"object"
function Person(){};
console.log(typeof new Person);//"object"

2.Object.prototype.toString

　　【輸出】[object 數(shù)據(jù)類型]的字符串形式

　　【功能】

　　　　[a]可以識別標準類型及內置對象類型
　　　　[b]不能識別自定義類型

　　【構造方法】

function type(obj){
　　return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}

　　【實例1】

console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]

　　【實例2】

function type(obj){
  return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}
console.log(type("jerry"));//"string"
console.log(type(12));//"number"
console.log(type(true));//"boolean"
console.log(type(undefined));//"undefined"
console.log(type(null));//"null"
console.log(type({name: "jerry"}));//"object"
console.log(type(function(){}));//"function"
console.log(type([]));//"array"
console.log(type(new Date));//"date"
console.log(type(/\d/));//"regexp"
function Person(){};
console.log(type(new Person));//"object"

3.constructor

　　【輸出】function 數(shù)據(jù)類型(){[native code]}或者function 自定義類型(){}

　　【功能】

　　　　[a]可以識別標準類型、內置對象類型及自定義類型
　　　　[b]不能識別undefined、null，會報錯

　　【構造方法】

function type(obj){
  var temp = obj.constructor.toString();
  return temp.replace(/^function (\w+)\(\).+$/,'$1');
}

　　【實例1】

console.log(("jerry").constructor);//function String(){[native code]}
console.log((12).constructor);//function Number(){[native code]}
console.log((true).constructor);//function Boolean(){[native code]}
//console.log((undefined).constructor);//報錯
//console.log((null).constructor);//報錯
console.log(({name: "jerry"}).constructor);//function Object(){[native code]}
console.log((function(){}).constructor);//function Function(){[native code]}
console.log(([]).constructor);//function Array(){[native code]}
console.log((new Date).constructor);//function Date(){[native code]}
console.log((/\d/).constructor);//function RegExp(){[native code]}
function Person(){};
console.log((new Person).constructor);//function Person(){}

　　【實例2】

function type(obj){
  var temp = obj.constructor.toString().toLowerCase();
  return temp.replace(/^function (\w+)\(\).+$/,'$1');
}
console.log(type("jerry"));//"string"
console.log(type(12));//"number"
console.log(type(true));//"boolean"
//console.log(type(undefined));//錯誤
//console.log(type(null));//錯誤
console.log(type({name: "jerry"}));//"object"
console.log(type(function(){}));//"function"
console.log(type([]));//"array"
console.log(type(new Date));//"date"
console.log(type(/\d/));//"regexp"
function Person(){};
console.log(type(new Person));//"person"

4.instanceof

　　【輸出】true或false

　　【功能】

　　　　[a]可以識別內置對象類型、自定義類型及其父類型
　　　　[b]不能識別標準類型,會返回false
　　　　[c]不能識別undefined、null，會報錯

　　【實例】

console.log("jerry" instanceof String);//false
console.log(12 instanceof Number);//false
console.log(true instanceof Boolean);//false
//console.log(undefined instanceof Undefined);//報錯
//console.log(null instanceof Null);//報錯
console.log({name: "jerry"} instanceof Object);//true
console.log(function(){} instanceof Function);//true
console.log([] instanceof Array);//true
console.log(new Date instanceof Date);//true
console.log(/\d/ instanceof RegExp);//true
function Person(){};
console.log(new Person instanceof Person);//true
console.log(new Person instanceof Object);//true

以上內容就是詳解JavaScript中的4種類型識別方法，希望大家喜歡。

您可能感興趣的文章:

Node.js靜態(tài)文件服務器改進版

js鼠標跟隨運動效果
這篇文章主要為大家詳細介紹了js鼠標跟隨運動效果的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
BootStrap實現(xiàn)帶有增刪改查功能的表格(DEMO詳解)
這篇文章主要介紹了BootStrap實現(xiàn)帶有增刪改查功能的表格，表格封裝了3個版本，接下來通過本文給大家展示下樣式及代碼，對bootstrap增刪改查相關知識感興趣的朋友一起通過本文學習吧
2016-10-10
JavaScript中判斷原生函數(shù)檢查function是否是原生代碼
檢查某個function是否是原生代碼，要檢測這一點,最簡單的辦法當然是判斷函數(shù)的 toString 方法返回的值
2014-09-09
[JS]點出統(tǒng)計器
[JS]點出統(tǒng)計器...
2006-07-07
JS查找字符串中出現(xiàn)次數(shù)最多的字符
本文給大家?guī)韮煞Njs中查找字符串中出現(xiàn)次數(shù)最多的字符，在這兩種方法中小編推薦使用第二種，對js查找字符串出現(xiàn)次數(shù)的相關知識感興趣的朋友一起看看吧
2016-09-09
layui實現(xiàn)數(shù)據(jù)分頁功能（ajax異步）
這篇文章主要為大家詳細介紹了layui實現(xiàn)數(shù)據(jù)分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
前端的框架TDesign小程序組件庫體驗
TDesign是騰訊各業(yè)務團隊在服務業(yè)務過程中沉淀的一套企業(yè)級設計體系,下面這篇文章主要給大家介紹了關于前端的框架TDesign小程序組件庫體驗的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2022-11-11
JS利用時間戳倒計時的實現(xiàn)示例
這篇文章主要介紹了JS利用時間戳倒計時的實現(xiàn)示例,本文將提供代碼示例和詳細的步驟,幫助你實現(xiàn)一個簡單而實用的時間戳倒計時,感興趣的可以了解一下
2023-12-12
傳參安全處理window.btoa base64加密，線性對稱加密
這篇文章主要介紹了傳參安全處理window.btoa base64加密，線性對稱加密,需要的朋友可以參考下
2023-07-07
js模塊加載方式淺析
這篇文章主要為大家詳細介紹了js模塊加載方式的初級學習資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08