本文深入解析JavaScript中typeof与instanceof运算符在判断数据类型时的核心区别与适用场景。通过对比两者对基本类型与引用类型的处理差异，指出各自局限性，并推荐Object.prototype.toString作为通用检测方案，帮助开发者在编码与面试中准确选择类型判断方式。
前言：
在日常前端开发中，我们经常需要判断变量的数据类型或检查其是否为空。面对这些需求，应如何选择最合适的类型判断操作符？本文旨在梳理 typeof 与 instanceof 的核心知识点及其在实际开发中的应用建议，这些内容也是技术面试中的高频考点。
1、typeof 操作符
typeof 用于确定任意变量的数据类型，它是判断变量是否为字符串、数值、布尔值或 undefined 的最有效方式。该操作符返回一个表示类型的字符串，其标准用法如下：typeof 是一个操作符而非函数，但可以将变量作为参数传入执行：
a、typeof operand
b、typeof (operand)
（1）返回值为字符串类型，具体对应关系如下：
|
返回值 |
含义值 |
|
"undefined" |
未定义 |
|
"boolean" |
布尔值 |
|
"string" |
字符串 |
|
"number" |
数值 |
|
"object" |
对象（而不是函数）或 null |
|
"function" |
函数 |
|
"symbol" |
符号 |
（2）常见使用方法
console.log(typeof undefined);//'undefined'
console.log(typeof true);//'bpplean'
console.log(typeof ("number")); //'string'
console.log(typeof "number"); //'string'
console.log(typeof 1);//'number'
console.log(typeof Symbol());//'symbol'
//对于Array，Null等特殊对象使用typeof一律返回object，这正是typeof的局限性
console.log(typeof null); //'object'
console.log(typeof [1, 2, 3]);//'object'
console.log(typeof undefined); //'undefined'
//通过 typeof 操作符来区分函数和其他对象
function f1() { console.log(111); }
console.log(typeof f1); //'function'
console.log(typeof f1()); // 111 'undefined'
（3）注意：typeof 无法用于判断一个变量是否真正存在（未声明的变量使用 typeof 不会报错，但其他操作会）。
var a;
if (a === undefined) {
console.log("变量不存在")
} else {
console.log("变量存在")
}
// 变量不存在
2、instanceof 操作符
typeof 虽然对原始值很有用，但它对引用值的用处不大。我们通常不关心一个值是不是对象，而是想知道它是什么类型的对象。为了解决这个问题，ECMAScript 提供了 instanceof 操作符。使用如下：
function f1() { console.log(111); }
console.log(f1 instanceof Object);//true
console.log(f1 instanceof Function);//true
console.log(f1 instanceof RegExp);//false
所有引用值都是 Object 的实例，因此通过 instanceof 操作符检测任何引用值和 Object 构造函数都会返回 true 。
- 类似地，如果用
instanceof检测原始值，则始终会返回false，因为原始值不是对象。
instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。其实现原理如下：
function myInstanceof(left, right) {
let proto = Object.getPrototypeOf(left), // 获取对象的原型
prototype = right.prototype; // 获取构造函数的 prototype 对象
// 判断构造函数的 prototype 对象是否在对象的原型链上
while (true) {
if (!proto) return false;
if (proto === prototype) return true;
proto = Object.getPrototypeOf(proto);
}
}
3、typeof 和 instanceof 的区别以及开发中的使用建议
typeof 与 instance 都是判断数据类型的方法，主要区别如下：
typeof会返回一个变量的基本类型字符串，instanceof返回的是一个布尔值。instanceof可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型（如 typeof null 返回 object）。- 而
typeof也存在弊端，它虽然可以判断基础数据类型（null除外），但是引用数据类型中，除了function类型以外，其他的也无法准确判断（如 Array, Date 等返回 object）。
可以看到，上述两种方法都有弊端，并不能满足所有场景的需求。
如果需要通用检测数据类型，建议采用 Object.prototype.toString，调用该方法，统一返回格式为 “[object Xxx]” 的字符串。使用如下：
console.log(Object.prototype.toString.call(undefined)) //"[object Undefined]"
console.log(Object.prototype.toString.call(true)) // "[object Boolean]"
console.log(Object.prototype.toString.call('1')) // "[object String]"
console.log(Object.prototype.toString.call(1)) // "[object Number]"
console.log(Object.prototype.toString.call(Symbol())) // "[object Symbol]"
console.log(Object.prototype.toString.call({})) // "[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(null)) //"[object Null]"
console.log(Object.prototype.toString.call(/123/g)) //"[object RegExp]"
console.log(Object.prototype.toString.call(new Date())) //"[object Date]"
总结：
到此这篇关于 js typeof 与 instanceof 判断数据类型区别及开发使用的文章就介绍到这了，更多相关 js typeof 与 instanceof 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！