Let's talk about the difference between typeof and instanceof

青灯夜游
Release: 2022-03-11 11:25:14
forward
2546 people have browsed it

typeof和instanceof操作符都可用来判断数据类型,那么它们之间有什么差异?下面本篇文章就来带大家了解 typeof 和 instanceof ,聊聊它们的区别,希望对大家有所帮助!

Let's talk about the difference between typeof and instanceof

typeofinstanceof操作符都是用来判断数据类型的,但是它们的使用场景却各不相同,其中一些细节也需要特别注意。接下来让我们一探究竟,彻底掌握该知识点,再也不惧面试官的提问。

typeof

typeof是一个一元运算符,放在一个运算数前面,这个运算数可以是任何类型。它返回一个字符串,说明运算数的类型。请看栗子:

const type = typeof '中国万岁'; // string typeof 666; // number typeof true; // boolean typeof undefined; // undefined typeof Symbol(); // symbol typeof 1n; // bigint typeof () => {}; // function typeof []; // object typeof {}; // object typeof new String('xxx'); // object typeof null; // object
Copy after login

通过以上例子可以看出,typeof只能准确判断基本数据类型和函数(函数其实是对象,并不属于另一种数据类型,但也能够使用 typeof 进行区分),无法精确判断出引用数据类型(统统返回 object)。

有一点需要注意,调用typeof null返回的是object,这是因为特殊值null被认为是一个对空对象的引用(也叫空对象指针)。

如果想准确判断引用数据类型,可以用instanceof运算符。

instanceof

instanceof运算符放在一个运算数的后面,给定对象的前面。它返回一个布尔值,说明运算数是否是给定对象的实例:

const result = [] instanceof Array; // true const Person = function() {}; const p = new Person(); p instanceof Person; // true const message = new String('xxx'); message instanceof String; // true
Copy after login

区别

  • typeof 会返回一个运算数的基本类型,instanceof 返回的是布尔值

  • instanceof 可以准确判断引用数据类型,但是不能正确判断基本数据类型

  • typeof 虽然可以判断基本数据类型(null 除外),但是无法判断引用数据类型(function 除外)

扩展

Object.prototype.toString.call()

typeofinstanceof都有一定的弊端,并不能满足所有场景的需求。如果需要通用检测数据类型,可以使用Object.prototype.toString.call()方法:

Object.prototype.toString.call({}); // "[object Object]" Object.prototype.toString.call([]); // "[object Array]" Object.prototype.toString.call(666); // "[object Number]" Object.prototype.toString.call('xxx'); // "[object String]"
Copy after login

注意,该方法返回的是一个格式为"[object Object]"的字符串。

封装函数

为了更方便的使用,我们可以将这个方法进行封装:

function getType(value) { let type = typeof value; if (type !== 'object') { // 如果是基本数据类型,直接返回 return type; } // 如果是引用数据类型,再进一步判断,正则返回结果 return Object.prototype.toString.call(value).replace(/^\[object (\S+)\]$/, '$1'); } getType(123); // number getType('xxx'); // string getType(() => {}); // function getType([]); // Array getType({}); // Object getType(null); // Null
Copy after login

【相关推荐:javascript视频教程web前端

The above is the detailed content of Let's talk about the difference between typeof and instanceof. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!