1、typeof
- 只能识别基础类型和引用类型
注意：null、 NaN、 document.all 的判断
console.log(typeof 123); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"
console.log(typeof null); // "object"
console.log(typeof NaN); // "number"
console.log(typeof document.all); // "undefined"
2、constructor
constructor指向创建该实例对象的构造函数
注意 null 和 undefined 没有 constructor，以及 constructor 可以被改写，不太可靠
const arr = [1, 2, 3];
console.log(arr.constructor === Array) // true
const obj = {name: "云牧", age: 18};
console.log(obj.constructor === Object) // true
String.prototype.constructor = function fn() {
return {};
}
// constructor 可以被改写
console.log("云牧".constructor) // [Function: fn]
3、instanceof
- 语法：
obj instanceof Type - 功能：判断
obj是不是Type类的实例，只可用来判断引用数据 - 实现思路：
Type的原型对象是否是obj的原型链上的某个对象 - 注意：右操作数必须是函数或者 class
例子：
const arr = [1, 2, 3]
console.log(arr instanceof Array) // true
console.log(arr instanceof Object) // true
const obj = { name: "云牧", age: 18 }
console.log(obj instanceof Object) // true
console.log(obj instanceof Array) // false
手写 instanceof：
function myInstanceof(Fn, obj) {
// 获取该函数显示原型
const prototype = Fn.prototype;
// 获取obj的隐式原型
let proto = obj.__proto__;
// 遍历原型链
while (proto) {
// 检测原型是否相等
if (proto === prototype) {
return true;
}
// 如果不等于则继续往深处查找
proto = proto.__proto__;
}
return false;
}
4、isxxx
- isPrototypeof
-
- 用于判断一个对象是否为另一个对象的原型
prototypeObj.isPrototypeOf(object)，如果 prototypeObj 是 object 的原型对象，isPrototypeOf 方法返回 true，否则返回 false- 功能基本等同于
instanceof - 注意：isPrototypeOf 方法只能用于判断对象类型，不能用于判断基本数据类型。如果 prototypeObj 不是一个对象，isPrototypeOf 方法会抛出 TypeError 异常
- getPrototypeOf 返回一个对象的原型，只能用于判断对象类型
const obj = { name: "云牧", age: 18 }
const arr = [1, 2, 3]
const proto1 = Object.getPrototypeOf(obj)
console.log(proto1.isPrototypeOf(obj)) // true
const proto2 = Object.getPrototypeOf(arr)
console.log(proto2.isPrototypeOf(arr)) // true
console.log(Object.isPrototypeOf({})) // false
console.log(Object.prototype.isPrototypeOf({})) // true 期望左操作数是一个原型，{} 原型链能找到 Object.prototype
console.log(Object.getPrototypeOf(obj) === Object.prototype) // true
console.log(Object.getPrototypeOf(arr) === Array.prototype) // true
- Array.isArray 方法可以判断一个对象是否为数组
- Number.isNaN 可以判断一个值是否为 NaN
- Number.isFinite 可以判断一个值是否为有限数
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({})); // false
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(123)); // false
console.log(Number.isNaN("hello")); // false
console.log(Number.isFinite(123)); // true
console.log(Number.isFinite("hello")); // false
console.log(Number.isFinite(Infinity)); // false
5、Object.prototype.toString
- 利用函数动态 this 的特性
Object.prototype.toString.call(123); // "[object Number]"
Object.prototype.toString.call("hello"); // "[object String]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(function(){}); // "[object Function]"
// 注意的是，Object.prototype.toString.call 方法返回的字符串格式为 "[object 类型]"
// 封装
function typeOf(data) {
return Object.prototype.toString.call(data).slice(8, -1);
}
// 测试
console.log(typeOf(1)); // Number
console.log(typeOf("1")); // String
console.log(typeOf(true)); // Boolean
console.log(typeOf(null)); // Null
console.log(typeOf(undefined)); // Undefined
console.log(typeOf(Symbol(1))); // Symbol
console.log(typeOf({})); // Object
console.log(typeOf([])); // Array
console.log(typeOf(function () {})); // Function
console.log(typeOf(new Date())); // Date
console.log(typeOf(new RegExp())); // RegExp
6、鸭子类型检测
- 检查自身属性的类型或者执行结果的类型
- 通常作为候选方案
- 例子：
kindof与p-is-promise
p-is-promise：
const isObject = value =>
value !== null && (typeof value === "object" || typeof value === "function");
export default function isPromise(value) {
return (
value instanceof Promise ||
(isObject(value) && typeof value.then === "function" && typeof value.catch === "function")
);
}
kindof：
function kindof(obj) {
var type;
if (obj === undefined) return "undefined";
if (obj === null) return "null";
switch ((type = typeof obj)) {
case "object":
switch (Object.prototype.toString.call(obj)) {
case "[object RegExp]":
return "regexp";
case "[object Date]":
return "date";
case "[object Array]":
return "array";
}
default:
return type;
}
}
7、Symbol.toStringTag
- 原理：
Object.prototype.toString会读取该值 - 适用场景：需自定义类型
- 注意事项：兼容性
class MyArray {
get [Symbol.toStringTag]() {
return "MyArray";
}
}
const arr = new MyArray();
console.log(Object.prototype.toString.call(arr)); // [object MyArray]
8、等比较
- 原理：与某个固定值进行比较
- 适用场景：
undefined、window、document、null等
underscore.js（工具函数库）：
_.isNull = function(obj) {
return obj === null;
};
_.isUndefined = function(obj) {
return obj === void 0;
};
_.isBoolean = function(obj) {
return obj === true || obj === false || toString.call(obj) === '[object Boolean]';
};
_.isString = function(obj) {
return toString.call(obj) === '[object String]';
};
_.isNumber = function(obj) {
return toString.call(obj) === '[object Number]';
};
_.isArray = nativeIsArray || function(obj) {
return toString.call(obj) === '[object Array]';
};
_.isObject = function(obj) {
var type = typeof obj;
return type === 'function' || type === 'object' && !!obj;
};
_.isFunction = function(obj) {
return typeof obj === 'function' || false;
};
void 0 始终返回 undefined，void 后面接任意值都是返回 undefined， 这是为了兼容 IE，因为在 IE 中 undefined 值可以被改写
总结
| 方法 | 基础数据类型 | 引用类型 | 注意事项 |
|---|---|---|---|
| typeof | √ | × | NaN、object、document.all |
| constructor | √ 部分 | √ | 可以被改写 |
| instanceof | × | √ | 多窗口，右边构造函数或者class |
| isPrototypeof | × | √ | 小心 null 和 undefined |
| toString | √ | √ | 小心内置原型 |
| 鸭子类型 | - | √ | 不得已兼容 |
| Symbol.toString Tag | × | √ | 识别自定义对象 |
| 等比较 | √ | √ | 特殊对象 |
加餐：ES6 增强的 NaN
NaN 和 Number.NaN 特点
typeof判断类型是数字- 自己不等于自己
isNaN
- 如果非数字，隐式转换传入结果如果是
NaN，就返回true，反之返回false
console.log(isNaN(NaN)) // true
console.log(isNaN({})) // true
Number.isNaN
- 判断一个值是否是数字，并且值是否等于
NaN
console.log(Number.isNaN(NaN)) // true
console.log(Number.isNaN({})) // false
综合垫片（如果不支持 Number.isNaN 的话）
if (!("isNaN" in Number)) {
Number.isNaN = function (val) {
return typeof val === "number" && isNaN(val)
};
}
indexOf 和 includes
indexOf不可查找NaN，includes则可以
const arr = [NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true
