乐趣区

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

jiezi

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

退出移动版