JavaScript类型判断，typeof和instanceof

今天来讲讲JavaScript中的类型判断

typeof

用于输出变量的类型

function add(a, b) {
  if (typeof a == "number" && typeof b == "number") {
    return a + b;
  }
  console.log("参数不对");
}
add("1", 2);

可以看到这段代码的打印结果为

我们知道在JavaScript中，在es6之前的基本数据类型为

let s = '123'   // string
let n = 123    // number
let f = true   // boolean
let u = undefined   // undefined
let nu = null    // null

想进一步了解可以移步到我的另一篇文章

es6之后新增加

let sy = Symbol(123)   // Symbol
let big = 1234n    // BigInt

还有一种数据类型为引用类型

let obj = {}
let arr = []
let fn = function () { }
let date = new Date()

接下来我们去使用typeof给这些数据类型做判断

let s = '123'   // string
let n = 123    // number
let f = true   // boolean
let u = undefined   // undefined
let nu = null    // null
let sy = Symbol(123)   // Symbol
let big = 1234n    // BigInt


let obj = {}
let arr = []
let fn = function () { }
let date = new Date()

console.log(typeof s,"string");
console.log(typeof n, "number");
console.log(typeof f, "boolean");
console.log(typeof u, "undefined");
console.log(typeof nu, "null");
console.log(typeof sy, "symbol");
console.log(typeof big, "bigint");

console.log(typeof obj, "object");
console.log(typeof arr, "array");
console.log(typeof fn, "function");
console.log(typeof date, "date");

执行结果为

可以看到一个比较奇怪的是，在判断null时居然是object类型的？在判断function是类型是function？

这是为什么呢？？？？

在判断null时居然是object类型的？简单来说这就是一个bug，这是 JavaScript 语言中存在的一个历史遗留问题

可以移步到这篇文章，这里深入的讲解了这其中的原理

在判断function是类型是function？

在 JavaScript 中，function 是对象的一种特殊类型

typeof 操作符返回的结果是基于 JavaScript 中数据类型的定义。虽然函数本质上是对象，但 JavaScript 将函数单独作为一种类型进行返回，即 function

为了突出函数在 JavaScript 中的重要性和特殊性质

所以我们如果希望写一个方法能够判断是不是对象就需要而外去判断null

// 我希望我传的如果是一个对象 打印true，如果不是对象打印false
function isObject(obj) {
    if (typeof obj == 'object' && obj != null) {
        return true;
    }
    return false;
}
let res = isObject({ a: 1 });
console.log(res);

如果我想具体判断这个对象到底是什么类型的，我们就需要用到instanceof了

instanceof

instanceof 操作符用于检测构造函数的 prototype 属性是否出现在某个对象的原型链上

所以我可以知道instanceof只能用于引用类型的判断

let s = '123'   // string
let n = 123    // number
let f = true   // boolean
let u = undefined   // undefined
let nu = null    // null
let sy = Symbol(123)   // Symbol
let big = 1234n    // BigInt


let obj = {}
let arr = []
let fn = function () { }
let date = new Date()

// 基本数据类型
console.log(s instanceof String, "string");
console.log(n instanceof Number, "number");
console.log(f instanceof Boolean, "boolean");
// console.log(u instanceof undefined, "undefined"); 报错
// console.log(nu instanceof null, "null"); 报错
console.log(sy instanceof Symbol, "symbol");
console.log(big instanceof BigInt, "bigint");

// 引用数据类型
console.log(obj instanceof Object, "object");
console.log(fn instanceof Function, "function");
console.log(date instanceof Date, "date");
console.log(arr instanceof Array, "array");

console.log(arr instanceof Object, "array");

可以看到基本类型的判断都是false，因为instanceof只能用于引用类型的判断

这里有个细节就是

console.log(arr instanceof Array, "array");
console.log(arr instanceof Object, "array");

这两段底代码都为true

这是由于他们在原型上是有关系的

// arr.__proto__ = Array.prototype
// Array.prototype.__proto__ = Object.prototype

这里不做过多讲解，后面将带大家手撕instanceof

总结

本文讲解了JavaScript类型判断时，typeof和instanceof的使用差别和具体使用细节

希望本文能够对你有所帮助！！！！