js中typeof与instanceof的区别

91 阅读2分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

最近在看《高程 三》,看到书中一些例子,就想到typeof和instanceof的区别。

众所周知,js数据类型可分为基本数据类型和引用数据类型:基本类型是保存在栈内存中的简单数据段,简言之也就是有单一字面量的值;引用数据类型指的是有多个值构成的对象。

那么typeof与instanceof的区别到底有什么区别呢?

typeof是一个用来检测变量数据类型的操作符,主要用来检测基本数据类型。

为什么这么说呢?因为它可以判断一个变量是字符串、数值、布尔值还是undefined,但是如果检测的变量是引用数据类型,可以返回object或者function,但不能细致地分出是array还是RegExp。

typeof运算符的返回类型为字符串,值包括如下几种:

'undefined'              --未定义的变量或值

 'boolean'                 --布尔类型的变量或值

 'string'                     --字符串类型的变量或值

'number'                  --数字类型的变量或值

 'object'                    --对象类型的变量或值,或者null(这个是js历史遗留问题,将null作为object类型处理)

 'function'                 --函数类型的变量或值

"symbol"                 --Symbol (ECMAScript 2015 新增)

而 instanceof是ES6新增的,为了解决typeof 无法检查出具体对象类型,返回布尔值。它的主要的目的就是检测引用类型,它可以判断出对象是Array还是RegExp。

instanceof的本质:检测构造函数(右边)的 prototype 属性是否出现在某个实例对象(左边)的原型链上。

// 检查是否属于某个构造函数
function A() {
  return "A"
}
var a = new A();
console.log(a instanceof A) // true

var b = {};
console.log(b instanceof Object); //true
var c = [];
console.log(c instanceof Object); //true
console.log(c instanceof Array); //true
console.log( ({a:1}) instanceof Object) // true

let obj = Object.create(null)
console.log(obj instanceof Object) // false
// Object.create(null) 例外
//[].proto 原型是指向Array.prototype的,说明两个对象是属于同一条原型链的,返回true

总结起来就是:

typeof和instanceof都是用来检测变量类型的操作符,二者的区别在于typeof一般是检测基本数据类型,而instanceof是用来检测引用数据类型。