JavaScript數(shù)據(jù)類型檢測的四種常用方式詳解
更新時間：2025年07月10日 08:49:27 作者：LuckySusu
在 JavaScript 開發(fā)中,判斷數(shù)據(jù)類型是一項基礎(chǔ)但非常重要的技能,由于 JavaScript 是一門動態(tài)類型語言,變量可以在運(yùn)行時被賦予不同的值類型,因此我們需要掌握多種方法來準(zhǔn)確檢測變量的數(shù)據(jù)類型,本文給大家講解了四種常見的類型檢測方式,需要的朋友可以參考下
本文將系統(tǒng)講解以下 4 種常見的類型檢測方式：
typeofinstanceofconstructorObject.prototype.toString.call()
并分析它們的使用場景、優(yōu)缺點及注意事項。
一、typeof 運(yùn)算符
作用：
用于檢測變量的基本數(shù)據(jù)類型（原始類型）。
示例代碼：
console.log(typeof 2); // "number"
console.log(typeof true); // "boolean"
console.log(typeof 'str'); // "string"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"
console.log(typeof {}); // "object"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
特點與限制：
| 類型 | 檢測結(jié)果 |
|---|---|
| 基本類型（Number、String、Boolean、Undefined） | 正確 |
| Null | ? 錯誤返回 "object"（歷史遺留問題） |
| 對象（Object、Array） | 都返回 "object" |
| 函數(shù) | 返回 "function" |
優(yōu)點：
- 簡單高效；
- 能正確識別基本類型；
缺點：
- 無法區(qū)分對象和數(shù)組；
null被錯誤地識別為"object"；- 不能檢測 Symbol、BigInt 等復(fù)雜類型；
二、instanceof 運(yùn)算符
作用：
用于檢測某個對象是否是某個構(gòu)造函數(shù)的實例（即其原型鏈中是否存在該構(gòu)造函數(shù)的原型）。
示例代碼：
console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log('str' instanceof String); // false
console.log([] instanceof Array); // true
console.log(function() {} instanceof Function); // true
console.log({} instanceof Object); // true
特點與限制：
| 類型 | 檢測結(jié)果 |
|---|---|
| 原始類型 | ? 不支持（如數(shù)字、布爾值等） |
| 引用類型（對象、數(shù)組、函數(shù)） | ? 可以正確判斷 |
優(yōu)點：
- 能判斷引用類型的繼承關(guān)系；
- 適用于復(fù)雜對象的類型判斷；
缺點：
- 不能判斷基本類型；
- 在跨框架或跨窗口環(huán)境中可能失效（如 iframe 中的對象）；
三、constructor 屬性
作用：
每個對象都有一個 constructor 屬性，指向創(chuàng)建它的構(gòu)造函數(shù)。
示例代碼：
console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true
注意事項：
function Fn(){}
Fn.prototype = new Array();
var f = new Fn();
console.log(f.constructor === Fn); // false
console.log(f.constructor === Array); // true
優(yōu)點：
- 可以檢測基本類型；
- 能獲取構(gòu)造函數(shù)信息；
缺點：
- 如果修改了原型鏈，會導(dǎo)致判斷不準(zhǔn)確；
- 不適合在嚴(yán)格模式下使用（某些環(huán)境會拋出錯誤）；
- 安全性較低，容易被覆蓋或篡改；
四、Object.prototype.toString.call() 方法
作用：
這是目前最通用且可靠的數(shù)據(jù)類型檢測方式。它返回 [object Type] 格式的字符串，表示對象的具體類型。
示例代碼：
console.log(Object.prototype.toString.call(2)); // "[object Number]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call('str')); // "[object String]"
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call(function(){}));// "[object Function]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
為什么不用 obj.toString()？
很多內(nèi)置對象重寫了 toString() 方法，比如：
Array.prototype.toString()返回的是元素拼接成的字符串；Function.prototype.toString()返回函數(shù)體的字符串表示；- 所以調(diào)用
obj.toString()得到的并不是對象的類型信息。
而 Object.prototype.toString.call(obj) 繞過了這些重寫，直接調(diào)用了原生的方法，返回標(biāo)準(zhǔn)格式的類型標(biāo)識。
優(yōu)點：
- 可以準(zhǔn)確判斷所有內(nèi)置類型（包括
null、undefined）； - 不受原型鏈修改影響；
- 兼容性好，適用于大多數(shù)瀏覽器和環(huán)境；
缺點：
- 寫法稍顯繁瑣；
- 不能檢測自定義類的類型（除非自己實現(xiàn) Symbol.toStringTag）；
五、總結(jié)對比表
| 檢測方式 | 是否可檢測基本類型 | 是否可檢測引用類型 | 是否可判斷 null | 是否受原型影響 | 推薦指數(shù) |
|---|---|---|---|---|---|
| typeof | ? | ?（對象/數(shù)組統(tǒng)一） | ? | 否 | ??? |
| instanceof | ? | ? | ? | ? | ???? |
| constructor | ? | ? | ? | ? | ?? |
| Object.prototype.toString.call() | ? | ? | ? | 否 | ????? |
六、一句話總結(jié)
在 JavaScript 中，typeof 適合檢測基本類型，instanceof 和 constructor 適合判斷引用類型，而 Object.prototype.toString.call() 是唯一能準(zhǔn)確判斷所有數(shù)據(jù)類型的“終極方案”。
進(jìn)階建議
- 學(xué)習(xí) ES6 的
Symbol.toStringTag，可以自定義對象的toString()表現(xiàn)； - 使用 TypeScript 或 Flow 可以提前避免類型判斷問題；
- 在 Vue / React 中結(jié)合 PropTypes 或 TypeScript 類型系統(tǒng)提升類型安全性；
- 使用
lodash.isXXX系列函數(shù)進(jìn)行類型判斷；
以上就是JavaScript數(shù)據(jù)類型檢測的四種常用方式詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript數(shù)據(jù)類型檢測的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
javascript實現(xiàn)的淘寶旅行通用日歷組件用法實例
這篇文章主要介紹了javascript實現(xiàn)的淘寶旅行通用日歷組件,以實例形式分析了該日歷組件的相關(guān)設(shè)置及使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
js跟隨滾動條滾動浮動代碼，對于firefox不兼容。2009-12-12
這篇文章主要介紹了JS獲取年月日時分秒的方法,結(jié)合實例形式分析了JS獲取具體時間的常犯錯誤與相應(yīng)解決方法,需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義底部彈出框動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
uni-app實現(xiàn)web-view圖片長按下載解決方案
uniapp的web-view中圖片無法長按保存，IOS下是正常的，但是Android下長按無反應(yīng)，這篇文章主要介紹了uni-app實現(xiàn)web-view圖片長按下載解決方案,需要的朋友可以參考下2023-09-09
字符串和數(shù)字的操作在js中非常頻繁，也非常重要。以往看完書之后都能記得非常清楚，但稍微隔一段時間不用，便會忘得差不多，記性不好是硬傷啊。下面這篇文章就對字符串和數(shù)字的一些常用操作做個整理，一者加深印象，二者方便今后溫習(xí)查閱。需要的朋友們可以參考借鑒。2017-01-01
這篇文章主要介紹了javascript實現(xiàn)tab切換的兩個實例，是對之前方法原理的進(jìn)一步延伸，需要深入了解的同學(xué)可以參考一下2015-11-11
這篇文章主要為大家介紹了underscore?防抖技巧學(xué)習(xí)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
javascript實現(xiàn)獲取圖片大小及圖片等比縮放的方法
這篇文章主要介紹了javascript實現(xiàn)獲取圖片大小及圖片等比縮放的方法,涉及javascript針對圖形圖像相關(guān)屬性獲取與修改相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
2025年有5個框架脫穎而出,成為開發(fā)者們關(guān)注的焦點,其中React和SolidJS更是引發(fā)了廣泛討論,這篇文章主要介紹了Solid.js和React框架的多維度比較,需要的朋友可以參考下2026-05-05