js基础：instanceof 原理和简单实现

instanceOf 被问到的频率太高了，记录一波

1. 是什么

在 MDN 上是这样描述 instanceof 的：

The instanceof operator tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object.

instanceof 运算符用于测试构造函数的 prototype 属性是否出现在对象原型链中的任何位置

2. 实现

这里已经描述的很清楚了, 怎么实现呢
思路:

• 首先 instanceof 左侧必须是对象, 才能找到它的原型链
• instanceof 右侧必须是函数, 函数才会prototype属性
• 迭代 , 左侧对象的原型不等于右侧的 prototype时, 沿着原型链重新赋值左侧

代码:

const instance_of = (left, right) => {
  // 基本的数据类型为false
  const baseType = ['number', 'string', 'boolean', 'undefined', 'symbol']
  if (baseType.includes(typeof left)) return false
  // 右侧函数的原型
  const RP = right.prototype
  while (true) {
    // 出口, left.__proto__.__proto__....的尽头是null,
    // 并且 null instanceof 任何类型 都不成立, 即使是Object, 下面会说到
    if (left === null) {
      return false
    } else if (left === RP) {
      return true
    }
    // 找不到 ? 把left的值改为它的原型
    left = left.__proto__
  }
}

3. 需要注意的一些情况

以下状况均为 false

/**
 * 因为 'abc' 是字符串, 是基本数据类型
 * 有人说 'abc'.__proto__ === String.prototype 明明是成立的呀
 * 这是因为, 当一个字符串调用方法或者属性的时候( 如'abc'.__proto__ )，会发生一个装箱操作，转换为包装类型
 * 隐式转换为 new String('abc')
 * 但是 'abc' instanceof String 并不存在装箱操作
 */
'abc' instanceof String // false

// null不具有任何对象的特性, null也没有__proto__属性
null instanceof Object // false

// String.__proto__.constructor.name === 'Function'
String instanceof String // false
Number instanceof Number // false
//....
//....