本篇内容主要讲解“前端中Typeof和Instanceof的原理和用法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“前端中Typeof和Instanceof的原理和用法”吧!
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())); // symbol1.2 instanceof
1.2.1 基础介绍
instanceof运算符用于检测构造函数的 prototype属性是否出现在某个实例对象的原型链上,返回值为布尔值，用于指示一个变量是否属于某个对象的实例。其语法如下所示：
object instanceof constructor1.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到此，相信大家对“前端中Typeof和Instanceof的原理和用法”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
