Summary of js detection data types

Table of contents

One, typeof

2.instance of

三、constructor

四、Object.prototype.toString.call()

Object.prototype.toString.call(obj) type detection principle

5. __proto__

6. Others

---

One, typeof

1. typeofThe response to value types number, string, boolean , symbol,  undefined,  functionis accurate;
2. But for 对象{ } , 数组[ ] , null will all be returned object

console.log(typeof ""); // string
console.log(typeof 1); // number
console.log(typeof NaN); // number
console.log(typeof true); // boolean
console.log(typeof Symbol(1)) // "symbol"
console.log(typeof undefined); // undefined
console.log(typeof function(){}); // function

console.log(typeof null); // object   (巨坑...)
console.log(typeof []); // object
console.log(typeof {}); //object

2.instance of

instanceofThe type of an object can be correctly determined, and its internal operating mechanism is to determine whether a prototype of that type can be found in its prototype chain .

1. Used  to determine whether instanceof an instance belongs to a certain type

2. instanceof Operators can only correctly determine reference data types, but not basic data types.

// 检测构造函数B的原型是否有出现在对象A的原型链上。
A instanceof B 

[] instanceof Array // true
[].__proto__ == Array.prototype // true

console.log([] instanceof Array); // true
console.log([] instanceof Object); // true

console.log({} instanceof Object); //true

console.log(function(){} instanceof Function); // true
console.log(function(){} instanceof Object); // true

console.log((new Number(1)) instanceof Number); // true
console.log((new Number(1)) instanceof Object); // true
//注意
console.log(undefined instanceof undefined); // 报错
console.log(null instanceof null); // 报错

三、constructor

constructor is a property owned by every instance object

constructorHas two functions:

1. Determine the type of data;
2. constrcutor An object instance accesses its constructor through  the object;

function Hello() {}; // 构造函数
var h = new Hello(); // 实例化对象

console.log(Hello.prototype.constructor == Hello); // true
console.log(h.constructor == Hello); // true ()

console.log(("1").constructor === String); // true
console.log((1).constructor === Number); // true
console.log((NaN).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(([]).constructor === Array); // true
console.log((function () {}).constructor === Function); // true
console.log(({}).constructor === Object); // true
console.log((Symbol(1)).constructor === Symbol); // true

console.log((null).constructor === Null); // 报错
console.log((undefined).constructor === Undefined); // 报错

costructorThis seems to be perfect for if I create an object and change its prototype, this approach becomes unreliable :

function Fn(){};
Fn.prototype=new Array(); // 改变原型
var f=new Fn();

console.log(f.constructor===Fn);    // false
console.log(f.constructor===Array); // true 

A constructor of Fn is declared here, and its prototype points to the prototype of Array, so in this case, the constructor is also unable to do its job.

四、Object.prototype.toString.call()

Use the prototype method toString of the Object object to determine the data type: 完美精准 return various data types

const a = Object.prototype.toString;

console.log(a.call(1)); // [object Number]
console.log(a.call("1")); // [object String]
console.log(a.call(NaN)); // [object Number]
console.log(a.call(true)); // [object Boolean]
console.log(a.call(Symbol(1))); // [object Symbol]
console.log(a.call(null)); // [object Null]
console.log(a.call(undefined)); // [object Undefined]
console.log(a.call([])); // [object Array]
console.log(a.call({})); // [object Object]
console.log(a.call(function () {})); // [object Function]


function Fn(){};
Fn.prototype=new Array(); // 改变原型
var f=new Fn();
console.log(a.call(Fn)); // [object Function]

A slightly simpler package:

// 定义检测数据类型的功能函数
function checkedType(target) {
	return Object.prototype.toString.call(target).slice(8, -1);
}

console.log(checkedType(1)); // Number
console.log(checkedType("1")); // String
console.log(checkedType(NaN)); // Number
console.log(checkedType(true)); // Boolean
console.log(checkedType(Symbol(1))); // Symbol
console.log(checkedType(null)); // Null
console.log(checkedType(undefined)); // Undefined
console.log(checkedType([])); // Array
console.log(checkedType({})); // Object
console.log(checkedType(function () {})); // Function

Object.prototype.toString.call(obj) type detection principle

Use methods Objecton the prototype toStringto act on the incoming objcontext (by callpointing thisto obj)

five,__proto__

var arr = []'
arr.__proto__ === Array.prototype; // true

var obj = {}'
obj.__proto__ === Object.prototype; // true

var str = '';
str.__proto__ === String.prototype; // true

var num = 0;
num.__proto__ === Number.prototype; // true

6. Others

1. Array.isArray()Make judgments based on ES6

Array.isArrray(obj);

1. viaArray.prototype.isPrototypeOf

Array.prototype.isPrototypeOf(obj)