前端百题斩001——typeof和instanceof

Posted 2021-09-13 执鸢者

思虑良久，终于要动笔写“前端百题斩”了，虽然是百题斩，但目前仅“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.关注公众号执鸢者，与号主一起斩杀前端百题。