三种“类型判断”的方法，一起手写instanceof方法的实现原理
当前位置：知识管理交流
→『 技术文档交流 』
在Javascript中，有三种常用的方法用于判断数据类型： 1. typeof操作符typeof操作符是最常用的判断数据类型的方法之一。它是一个一元操作符，可以用于判断一个值的数据类型，并返回一个表示该数据类型的字符串。常见的typeof返回值有： - "undefined": 用于表示未定义的变量 例如： typeof undefined; // "undefined" typeof 42; // "number" typeof "hello"; // "string" typeof true; // "boolean" typeof { name: "John" }; // "object" typeof function() {}; // "function" typeof 123n; // "bigint" typeof symbol('hello'); //"symbol" 需要注意的是，typeof对于null的判断返回的是"object"，这是因为在Javascript的早期版本中，null被错误地认为是一个对象。而对于函数类型，则返回"function". 2. instanceof操作符instanceof操作符用于判断一个对象是否属于某个构造函数的实例。它比typeof更适用于判断对象类型，因为它可以准确地判断多层原型链中的实例关系。例如： var arr = []; var date = new Date(); var obj = {}; var fn = function(){};
arr instanceof Array; // true date instanceof Date; // true obj instanceof Object; // true fn instanceof Function; // true instanceof判断的结果是一个布尔值，如果对象是指定构造函数的实例，则返回true，否则返回false。 同时，也正是因为instanceof操作符可以判断多层原型链中的实例关系，那函数和数组不也可以看作是一个对象吗，那用他们用instanceof操作符来判断和Object的关系，是不是也能得到true呢，我们来看一看： var arr = []; var fn = function(){}; arr instanceof Object; // true fn instanceof Object; // true 结果也是true,欸， 这时候我们不妨先来大胆猜测一波，我们都知道，arr数组的创建实际是通过new构造函数Array()得到的，那arr就是构造函数Array()的一个实例对象，所以当我们判断 //L 实例对象 //R 要判断的数据类型 function instanceOF(L,R){ while(L !== null){ // 用实例对象的__proto__属性和要判断的数据类型的prototype进行判断 //相等返回true,不相等再用实例对象的__proto__的__proto__属性去判断 //直到L.__proto__.__proto__...为null,就通过原型链根本找不到相等的了，返回false. if(L.__proto__ === R.prototype){ return true } else L = L.__proto__ } return false } //验证我们手写的instanceOF是否正确 console.log(instanceOF([],Array)); //true console.log(instanceOF([],Object));//true 所以，搞明白之后，是不是觉得手写instanceof方法非常简单啦！好，那既然数组，函数用instanceof方法和object数据类型进行判断都为true，所以这种方法好像也不是那么完美，并不能精准判断对象的类型。那我们不妨看看下面另一种方法。 3. Object.prototype.toString方法Object.prototype.toString是一个通用的方法，可以返回一个对象的内部属性[[Class]]的值，从而判断对象的类型。toString方法被重写，并通过不同的内部属性来标识不同的类型。例如： Object.prototype.toString.call(undefined); // "[object Undefined]" Object.prototype.toString.call(42); // "[object Number]" Object.prototype.toString.call("hello"); // "[object String]" Object.prototype.toString.call(true); // "[object Boolean]" Object.prototype.toString.call({ name: "John" }); // "[object Object]" Object.prototype.toString.call(function() {}); // "[object Function]" 这时小伙伴要问啦，不是讲 console.log(Object.prototype.toString(undefined))// "[object Object]" console.log(Object.prototype.toString(42))// "[object Object]" console.log(Object.prototype.toString("hello"))// "[object Object]" 这时会发现结果都是
该文章在 2023/11/27 11:58:52 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
