前端百题斩【001】——typeof和instanceof

思虑良久，终于要动笔写“前端百题斩”了，虽然是百题斩，但目前仅“ js、浏览器和网络”部分就肯定了100个高能知识点。写该系列文章的初衷是“ 让每位前端工程师掌握高频知识点，为工做助力”。但愿朋友们关注公众号“ 执鸢者”，用知识武装本身的头脑。

1.1 typeof

1.1.1 基础介绍

typeof是一个运算符，其有两种使用方式：（1） typeof(表达式)；（2） typeof 变量名；返回值是一个字符串，用来讲明变量的数据类型；因此能够用此来判断 number, string, object, boolean, function, undefined, symbol 这七种类型，每种状况返回的内容以下表所示：

类型	结果
String	'string'
Number	'number'
Boolean	'boolean'
Undefined	'undefined'
Object	'object'
function函数	'function'
Symbol	'symbol'

1.1.2 原理进阶

typeof方法虽然很好用，但该方法有必定的局限性： 对于对象、数组、 null 返回的值是 object 。好比 typeof(window)， typeof(document)， typeof(null)返回的值都是 object，这是为何呢？这就要从底层提及。js在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息：

1. 000：对象；
2. 010：浮点数；
3. 100：字符串；
4. 110：布尔值；
5. 1：整数；

6. 特例：

   （1）null全部机器码均为0

   （2）undefined：用 −2^30 整数来表示

typeof就是经过机器码判断类型，因为null的全部机器码均为0，该机器码和对象同样，所以直接被看成对象来看待，因此经过 typeof就不可以判断区分对象还有 null了。

1.1.3 实验

说了这么多，尚未进行验证，下面就逐一验证一下：

// 字符串
console.log(typeof('lili')); // string
// 数字
console.log(typeof(1)); // number
// 布尔值
console.log(typeof(true)); // boolean
// undefined
console.log(typeof(undefined)); // undefined
// 对象
console.log(typeof({})); // object
// 数组
console.log(typeof([])); // object
// null
console.log(typeof(null)); // object
// 函数
console.log(typeof(() => {})); // function
// Symbol值
console.log(typeof(Symbol())); // symbol

1.2 instanceof

1.2.1 基础介绍

instanceof运算符用于检测构造函数的 prototype 属性是否出如今某个实例对象的原型链上,返回值为布尔值，用于指示一个变量是否属于某个对象的实例。其语法以下所示：

object instanceof constructor

1.2.2 原理进阶

instanceof 主要的实现原理就是只要右边变量的 prototype 在左边变量的原型链上便可。所以， instanceof 在查找的过程当中会遍历左边变量的原型链，直到找到右边变量的 prototype，若是查找失败，则会返回 false.步骤以下所示：

1. 获取左边变量的隐式原型（即：__ proto __ ,可经过Object.getPrototypeOf()获取）；
2. 获取右边变量的显示原型（即：prototype）；
3. 进行判断，比较leftVal. proto . proto …… === rightVal.prototype，相等则返回true，不然返回false。

1.2.3 实验

上面讲述了instanceof的简单使用和其原理，下面简单使用一下并验证一下该原理：

const arr = [1, 2];
// 判断Object的prototype有没有在数组的原型链上
console.log(arr instanceof Object); // true
// 数组arr的原型
const proto1 = Object.getPrototypeOf(arr);
console.log(proto1); // []
// 数组arr的原型的原型
const proto2 = Object.getPrototypeOf(proto1);
console.log(proto2); // []
// Object的prototype
console.log(Object.prototype);
// 判断arr的原型是否与Object的prototype相等
console.log(proto1 === Object.prototype); // false
// 判断arr的原型的原型是否与Object的prototype相等
console.log(proto2 === Object.prototype); // true

1.若是以为这篇文章还不错，来个分享、点赞吧，让更多的人也看到

2.关注公众号执鸢者，与号主一块儿斩杀前端百题。