- typeof [value]：返回一个字符串，字符串中包含了对应的数据类型
- [实例] instanceof [构造函数]
- [对象].constructor===[构造函数]
- Object.prototype.toString.call([value])
一、typeof：
typeof： 返回的一个字符串，字符串包含数据类型，
原理：根据计算机底层存储的“二进制”来检测的【性能会好点】；原始值数据类型(不含null)以及函数等值的检测，基于typeof处理还是很不错的
缺点：
- typeof null ->"object"
- typeof 不能细分对象
- typeof new Number(10) ->"object"
有关代码及面试题：
typeof typeof [] -> "string"
二、[实例] instanceof [构造函数]：
本意: 不是检测数据类型，而是检测当前实例是否属于这个类，用来检测数据类型，仅是“临时拉来当壮丁”，所以存在很多弊端「可以基于instanceof细分对象类型」
原理: 首先按照 [构造函数]Symbol.hasInstance ，如果存在这个属性方法，则方法执行返回的值就是最后检测的结果；如果不存在这个属性方法，则会查找当前[实例]的原型链（一直找到Object.prototype为止），如果查找中途，找到的某个原型等于[构造函数]的原型「即：构造函数的原型出现在其原型链上」则返回结果是true，反之false！！
缺点:
- 因为原型可以被重定向，所以检测的结果不一定准确
- 原始值类型使用instanceof是无法检测的
有关代码及面试题：
console.log([] instanceof Array); //->true
console.log([] instanceof RegExp); //->false
console.log([] instanceof Object); //->true
function Fn() {}
Fn.prototype = [];
let f = new Fn;
// 正常理解:f肯定不是数组
console.log(f instanceof Array); //->true
console.log(f instanceof Object); //->true
console.log((1) instanceof Number); //->false 这样处理不会转换
console.log((1).toFixed(2)); //->'1.00' 浏览器有一个把1转换为对象格式1的操作"Object(1)" 装箱
class Fn {
// 基于ES6设置静态私有属性是有效的
static[Symbol.hasInstance](value) {
console.log(value);
return true;
}
}
console.log([] instanceof Fn);
重写instanceof：
function instance_of(obj, Ctor) {
// 数据格式准确性校验
if (Ctor == null) throw new TypeError("Right-hand side of 'instanceof' is not an object");
if (!Ctor.prototype) throw new TypeError("Function has non-object prototype 'undefined' in instanceof check"); //没有prototype属性 比如箭头函数
if (typeof Ctor !== "function") throw new TypeError("Right-hand side of 'instanceof' is not callable");
// 原始类型直接忽略
if (obj == null) return false;
if (!/^(object|function)$/.test(typeof obj)) return false;
// 先检测是否有 Symbol.hasInstance 这个属性
if (typeof Ctor[Symbol.hasInstance] === "function") return Ctor[Symbol.hasInstance](obj);
// 最后才会按照原型链进行处理
let prototype = Object.getPrototypeOf(obj);
while (prototype) {
if (prototype === Ctor.prototype) return true;
prototype = Object.getPrototypeOf(prototype);
}
return false;
}
let res = instance_of([12, 23], Array);
console.log(res); //=>true
三、[对象].constructor===[构造函数]
本意: 获取对象的构造函数，所以他也是“临时拉来当壮丁”，也存很多的弊端
- constructor是可以允许被肆意更改的，检测结果是不准确的
let value = [];
console.log(value.constructor === Array); //->true
console.log(value.constructor === RegExp); //->false
console.log(value.constructor === Object); //->false
value = 1;
console.log(value.constructor === Number); //->true
四、Object.prototype.toString.call([value]) 【推荐】
原理: 首先找到Object.prototype.toString方法，把toString执行的之后，让方法中的this变为要检测的这个值，toString内部会返回对应this「也就是要检测这个值」的数据类型信息 “[object ?]”
- 补充:大部分值(实例)所属类的原型上都有toString方法,除了Object.prototype.toString是用来检测数据类型的，其余的一般都是用来转换为字符串的...
- 类型汇总：“[object Number/String/Boolean/Null/Undefined/Symbol/BigInt/Object/Array/RegExp/Date/Error/Function/GeneratorFunction/Math...]”
+要检测“[object ?]” 中?是啥，首先看 [value][Symbol.toStringTag] ，如果存在这个属性，属性值是啥，“?”就是啥；如果没有这个属性，一般是返回所属的构造函数信息...
let class2type = {},
toString = class2type.toString; //->Object.prototype.toString
let fn = function* () {};
console.log(toString.call(fn)); //->"[object GeneratorFunction]"
// + fn[Symbol.toStringTag] -> "GeneratorFunction"
function Fn() {
this.x = 100;
}
Fn.prototype = {
constructor: Fn,
getX() {
console.log(x);
},
// 这样所有Fn的实例(f)就拥有这个属性，后期基于toString检测类型，返回“[object Fn]”
[Symbol.toStringTag]: 'Fn'
};
let f = new Fn;
console.log(toString.call(f)); //->"[object Fn]" 默认是“[object Object]”
image.png
封装一个工作中常用的检测数据类型的工具函数:
- 数据类型检测的“映射表”: toString.call检测的结果作为属性名，属性值是对应的数据类型「字符串&小写,类似于typeof的结果」
var class2type = {},
toString = class2type.toString, //->Object.prototype.toString 检测数据类型
var typeArr = ["Boolean", "Number", "String", "Function", "Array", "Date", "RegExp", "Object", "Error", "Symbol", "BigInt", "GeneratorFunction", "Set", "Map", "WeakSet", "WeakMap"];
typeArr.forEach(function (name) {
class2type["[object " + name + "]"] = name.toLowerCase();
});
// 专门进行数据类型检测的办法
var toType = function toType(obj) {
// null&undefined直接返回对应的字符串
// 原始值类型基于typeof检测
// 对象类型「包含原始值的对象类型」基于toString.call检测
if (obj == null) return obj + "";
return typeof obj === "object" || typeof obj === "function" ?
class2type[toString.call(obj)] || "object" :
typeof obj;
};
缺点：上面执行就是需要手写typearr的类型
var class2type = {},
toString = class2type.toString, //->Object.prototype.toString 检测数据类型
function toType(obj) {
if (obj == null) return obj + "";
if (typeof obj !== "object" && typeof obj !== "function") return typeof obj;
var reg = /^\[object ([0-9A-Za-z]+)\]$/,
value = reg.exec(toString.call(obj))[1] || "object";
return value.toLowerCase();
};