前端百题斩[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位存储其类型信息：

000：对象；
010：浮点数；
100：字符串；
110：布尔值；
1：整数；
特例：

（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.步骤如下所示：

获取左边变量的隐式原型（即：__ proto __ ,可通过Object.getPrototypeOf()获取）；
获取右边变量的显示原型（即：prototype）；
进行判断，比较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.关注公众号执鸢者，领取学习资料，定期为你推送原创深度好文

3.扫描下方添加进群，里面大佬多多，一起向他们学习

1. 假如只剩下canvas标签

2. Vue源码思想在工作中的应用

3. 一文搞定Diff算法

4. 百度、小红书三面，均遇“赛马”问题

5. 十五张图带你彻底搞懂从URL到页面展示发生的故事

6. 一文搞懂Cookie、Storage、IndexedDB

7. 六张图带你从HTTP/0.9进化到HTTP3.0

8. （2.6w字）网络知识点灵魂拷问（上）——前端面试必问

9. （2.6w字）网络知识点灵魂拷问（下）——前端面试必问

10. 理论与API相结合理解Node中的网络通信

11. 硬核知识点——浏览器中的三类五种请求

12. 理论与实践相结合彻底理解CORS

13. 三步法解析Express源码

14. 一篇搞定前端高频手撕算法题（36道）

15. 十七张图玩转Node进程——榨干它

16. 理论与API相结合理解Node中的网络通信

17. 一文彻底搞懂前端监控

18. 前端的葵花宝典——架构

19. canvas从入门到猪头

20. 前端工程师的一大神器——puppeteer

21. 2021 年前端宝典【超三百篇】

22. 前端也要懂机器学习（上）

23. 前端也要懂机器学习（下）

24. 学架构助力前端起飞