[经典面试题]JS的typeof和instanceof区别

一、typeof

typeof 是一个一元操作符不是函数,所以不需要传递参数,使用方法非常简单:typeof A

对于基本类型

let s = "Nicholas";

let b = true;

let i = 22;

let u;

let sb = undefined;

console.log(typeof s); // string

console.log(typeof b); // boolean

console.log(typeof i); // number

console.log(typeof u); // undefined

console.log(typeof sb); // undefined

对于引用类型

let o = {}; let a = [];

console.log(typeof o); // object

console.log(typeof a); // object

对于NULL类型

let n = null;

console.log(typeof n); // object

虽然typeof null为object,但这只是JavaScript 存在的一个悠久 Bug,不代表null就是引用数据类型,并且null本身也不是对象

对于函数类型

let nn = function() {}

console.log(typeof nn); // function

对于日期类型

let date0 = new Date()

console.log(typeof date0); // object

对于正则类型

let r = /a-z/;

console.log(typeof r ); // object

对于包装类型

let sss = new String('sss')

let nnn = new Number(123)

let bbb = new Boolean(true)

let fff = new Function ()

console.log(typeof sss) // object

console.log(typeof nnn) // object

console.log(typeof bbb) // object

console.log(typeof fff) // function

使用new操作符,除Function外的所有构造函数的类型都是object。

二、instanceof

instance中文翻译为实例,instanceof就是判断该对象是谁的实例。与typeof不同,它返回布尔值。

instanceof是对象运算符

instanceof的判断就是根据原型链进行搜寻,在对象obj1的原型链上如果存在另一个对象obj2的原型属性,那么表达式(obj1 instanceof obj2)返回值为true;否则返回false。

所以:

let sss = 'sss'

let nnn = 123

let bbb = true

console.log(sss instanceof String) // false

console.log(nnn instanceof Number) // false

console.log(bbb instanceof Boolean) // false

因为sss nnn bbb是原始值,而不是通过包装函数生成的实例。

let sss = new String('sss')

let nnn = new Number(123)

let bbb = new Boolean(true)

console.log(sss instanceof String) // true

console.log(nnn instanceof Number) // true

console.log(bbb instanceof Boolean) // true

正则和函数也一样

let rrr = new RegExp(/a-z/)

var fff = new Function()

console.log(rrr instanceof RegExp) // true

console.log(fff instanceof Function) // true

如果是作用在自己定义的构造函数呢?

let Cat = function() {}

let benz = new Cat()

benz instanceof Cat // true

benz是实例不是构造函数所以:

benz instanceof Object // true

benz instanceof Function //false

再来个构造函数:

let BigCat = function() {}

BigCat.prototype = new Cat();
let bigBenz = new BigCat()

bigBenz instanceof Car // true

再来个奇葩的

let obj = Object.create(benz); //Car {}

obj instanceof Object //true

let obj = Object.create(null);

obj instanceof Object // false

instanceof检测null和undefined :

null instanceof Object // false

undefined instanceof Object // false

三、总结 区别

  1. typeof会返回一个变量的基本类型,instanceof返回的是一个布尔值
  2. typeof是一元运算符 instanceof是对象运算符
  3. typeof 更合适判断基本类型,对引用类型、构造函数的实例对象以及null无法判断出准确类型
    instanceof 用于判断实例对象是否是某一构造函数的实例化对象,从而判处该对象所属的类型。 这种方式是通过原型链查找。
相关推荐
Mr Xu_1 分钟前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝4 分钟前
RBAC前端架构-01:项目初始化
前端·架构
Liekkas Kono6 分钟前
RapidOCR Python 贡献指南
开发语言·python·rapidocr
张张努力变强13 分钟前
C++ STL string 类:常用接口 + auto + 范围 for全攻略,字符串操作效率拉满
开发语言·数据结构·c++·算法·stl
程序员agions13 分钟前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发13 分钟前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法
xyq202415 分钟前
Matplotlib 绘图线
开发语言
m0_6948455719 分钟前
tinylisp 是什么?超轻量 Lisp 解释器编译与运行教程
服务器·开发语言·云计算·github·lisp
程序员猫哥_20 分钟前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html
龙飞0521 分钟前
Systemd -systemctl - journalctl 速查表:服务管理 + 日志排障
linux·运维·前端·chrome·systemctl·journalctl