今天分享3种JavaScript类型判断的方法:typeof、instanceof、constructor。
首先先看下所有的数据类型:
- 空值(null)
- 未定义(undefined)
- 布尔值(boolean)
- 数字(number)
- 字符串(string)
- 对象 (object)
- 符号(symbol, ES6中新增)
- 大整数(BigInt, ES2020 引入)
除去object,其他的我们统称基本类型,最后两个类型为新引入的前端数据类型。
Symbol: 是ES6中引入的一种原始数据类型,表示独一无二的值。
BigInt:是 ES2020 引入的一种新的数据类型,用来解决 JavaScript中数字只能到 53 个二进制位(JavaScript 所有数字都保存成 64 位浮点数,大于这个范围的整数,无法精确表示的问题。具体可查看:新数据类型 — BigInt
1.typeof
example:
console.log(typeof ""); // string
console.log(typeof 1 ); // number
console.log(typeof NaN ); // number
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof function(){}); // function
console.log(typeof isNaN); // function
console.log(typeof Symbol()); // symbol
console.log(typeof 123n); // bigint
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof null); // object
console.log(typeof new Date()); // object
console.log(typeof new RegExp()); // object
对于数组,对象,null以及时间等数据,typeof只能返回object,而不能直接返回对应的类型,还需要通过其他法判断。
2.instanceof
example:
console.log(12 instanceof Number); // false
console.log('22' instanceof String); // false
console.log(true instanceof Boolean); // false
console.log(null instanceof Object); // false
console.log(undefined instanceof Object); // false
console.log(function a() {} instanceof Function); // true
console.log([] instanceof Array); // true
console.log({a: 1} instanceof Object); // true
console.log(new Date() instanceof Date); // true
简单来说就是,判断某个数据是否是由某个构造函数的实例,如果是,返回true,不是就返回false。
深层次来讲就是,instanceof 右边的prototype是否能在instanceof左侧的数据的_proto_原型链上找到,这是个遍历的过程。找到就是true。
3.constructor
example:
console.log('22'.constructor === String) // true
console.log(true.constructor === Boolean) // true
console.log([].constructor === Array) // true
console.log(document.constructor === HTMLDocument) // true
console.log(window.constructor === Window) // true
console.log(new Number(22).constructor === Number) // true
console.log(new Function().constructor === Function) // true
console.log(new Date().constructor === Date) // true
console.log(new RegExp().constructor === RegExp) // true
console.log(new Error().constructor === Error) // true
constructor是追溯对象的出生地,也就是说可以知道某个对象是由哪个构造函数产生的。
原理其实是当构造函数被创建时,会在它的prototype上创建constructor属性,而该属性又指向函数本身,当实例被创建时,它的constructor会被继承,嗯….构造函数就是实例的类型。
注意:null 和 undefined 是没有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。
结尾:其实还有一种方法:
Object.prototype.toString.call(),感兴趣的自己去查文档研究研究。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。