instanceof的底层实现原理,手动实现一个instanceof

instanceof

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

obj instabceof Object

描述: 检测Object.prototype是否在obj的原型链上

  // 基础用法
  // 我们先通过构造函数来创建一个对象
  function Person() {
     
    this.name = 'XXXX'
  }
  let p = new Person()
  console.log(p.name)   // XXXX
  
  // p instanceof Object 底层查找逻辑
  // 理解这一块需要熟悉js的原型及原型链知识
  
  // 我们通过_proto_属性来查看p的原型链,直到原型链的尽头
  // 可以在浏览器的控制台尝试
  console.log(p.__proto__)    // {constructor: ƒ}
  console.log(p.__proto__.__proto__)   //   {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
  console.log(p.__proto__.__proto__.__proto__)  // null 可以看到此时p的原型链已经到头了,即为Object的原型null

  // 接下来,我们来看看Object的prototype属性
  console.log(Object.prototype)   // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

  // 接下来我们吧Object的prototype属性和p的每一层原型做一个比较
  p.__proto__ === Object.prototype         // false
  p.__proto__.__proto__ === Object.prototype  // true
  
  // 所以
  p instanceof Object          // true

从上面的代码可以看出来,p的原型链中确实有一层原型和Object.prototype全等

手动类实现

function Person() {
     
   this.name = 'XXXX'
}
let p = new Person()
console.log(p.name)   // XXXX
  
function newinstanceof(a, b) {
     
   // 这里需要依次判断
   while(true){
     
     if(a.__proto__  === b.prototype) return true
     if(a.__proto__ === null) return false
     a = a.__proto__
   }
}

newinstanceof(p, Object)    // true
newinstanceof(p, Array)    // false

你可能感兴趣的:(前端知识自检,javascript)