关于前端:前端百题斩001typeof和instanceof

思虑好久，终于要动笔写“前端百题斩”了，尽管是百题斩，但目前仅“js、浏览器和网络”局部就确定了100个高能知识点。写该系列文章的初衷是“让每位前端工程师把握高频知识点，为工作助力”。心愿敌人们关注公众号“执鸢者”，用常识武装本人的头脑。

1.1 typeof

1.1.1 根底介绍

typeof是一个运算符，其有两种应用形式：（1）typeof(表达式)；（2）typeof 变量名；返回值是一个字符串，用来阐明变量的数据类型；所以能够用此来判断number, string, object, boolean, function, undefined, 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// undefinedconsole.log(typeof(undefined)); // undefined// 对象console.log(typeof({})); // object// 数组console.log(typeof([])); // object// nullconsole.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的prototypeconsole.log(Object.prototype);// 判断arr的原型是否与Object的prototype相等console.log(proto1 === Object.prototype); // false// 判断arr的原型的原型是否与Object的prototype相等console.log(proto2 === Object.prototype); // true

1.如果感觉这篇文章还不错，来个分享、点赞吧，让更多的人也看到

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