JavaScript | 手写instanceof(面试篇)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

一、简单介绍

1. 概念:instanceof运算符用于检测构造函数的prototype属性是否存在于实例对象的原型链上
2. 如何判断：

• 表达式: A instanceof B
• 如果B函数的显示原型对象在对象的原型链上,返回true,否则返回false

二、平常用法

  
  function Foo() {}
  var foo = new Foo()
  //Function是通过new自己产生的实例，所以这个打印毋庸置疑
  console.log(f1 instanceof Foo); //true 
  console.log(f1 instanceof Object); //true 
  
  //通过instanceof来判断以下类型
   console.log(Object instanceof Function) //true
   console.log(Object instanceof Object) //true
   console.log(Function instanceof Object) //true
   console.log(Function instanceof Function) //true
   //根据下图很显然Object的原型链是找不到Foo的原型对象的
   console.log(Object instanceof Foo); //false 
复制代码

通过下面这张原型链的图就能很好的知道上述打印结果了

沿着原型链去找原型对象就一清二楚了

三、手写instanceof

1. 首先分析一下思路

A instanceof B 就是 B.prototype 在A的__proto__上就返回true否则就是false

• A怎么去访问原型链: A._ proto _
• 我们都知道原型链的查找过程就是一步步的往上找直到找不到为止,所以我们需要用到while循环

2. 开始手写代码

  function myInstanceof(A, B) {
            //拿到原型对象
            var BPro = B.prototype;
            //拿到原型链
            var startA = A.__proto__;

            //如果while条件达不到，则说明B不在A的原型链上 返回false
            while (startA) {
                //如果原型链和原型对象相等说明在，直接返回true结束函数
                if (startA === BPro) {
                    return true;
                }
                //每次要获取上一级的原型对象,就是一个往上找的过程
                startA = startA.__proto__;
            }
            //当startA.__proto__往上找不到了退出循环，返回false
            return false;
        }
   //下面开始验证一下
    function Foo() {}
    var f1 = new Foo();
    console.log(myInstanceof(f1, Foo)) //true
    console.log(myInstanceof(f1, Object)) //true
    console.log(myInstanceof(Object, Function)) //true
    console.log(myInstanceof(Object, Object)) //true
    console.log(myInstanceof(Function, Object)) //true
    console.log(myInstanceof(Function, Function)) //true
    console.log(myInstanceof(Object, Foo)) //true
    //ok，验证成功，完美
复制代码

好了，以上就是本篇文章的分享，感谢阅读！