JavaScript instanceof 原理

基本工作原理

基本语法

object instanceof constructor

说明

• object 是被检测对象
• constructor 是构造函数或者类
• 它会返回一个布尔值，判断 object 是不是 constructor 的实例，或者是否继承自 constructor.prototype

实现原理

代码示例

function myInstanceof(obj, constructor) {
  let proto = Object.getPrototypeOf(obj) // 取的是obj.__proto__
  // let proto = obj.__proto__
  let prototype = constructor.prototype
  while(proto !== null) {
    if (proto === prototype) {
      return true
    }
    proto = Object.getPrototypeOf(proto)
    // proto = proto.__proto__
  }
  return false
}

测试

function People() {}
function Man() {}
Man.prototype = Object.create(People.prototype)
const man = new Man()

myInstanceof(man, Man) // true
myInstanceof(man, People) // true
myInstanceof(man, Object) // true
myInstanceof(man, Array) // false

总结

两个判断点

1. 是不是构造函数的实例
2. 是否继承自构造函数的 prototype

拓展

• obj.__proto__ 也可以被修改，修改之后可能影响 instanceof 的结果

const obj = { name: 'Alice' }
obj.__proto__ = Array.prototype
console.log(obj instanceof Array) // true
console.log(obj instanceof Object) // true

• Symbol.hasInstance 可以用来自定义 instanceof 的行为

class Dog {
  static [Symbol.hasInstance](obj) {
    return 'tail' in obj
  }
}
const dog = { tail: 1 }
console.log(dog instanceof Dog) // true

• null instanceof Object 的返回值是 false