面试题：手写实现instance of

instanceof 定义

instanceof - JavaScript | MDN (mozilla.org)

MDN上给出的定义是用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。即：

js 复制代码

//构造函数foo()
function foo(){};
//实例对象 obj
const obj = new foo();
// instanceof 的作用相当于如下判断语句
console.log(foo.prototype === Object.getPrototypeOf(obj));   //true

这个定义的描述比较抽象，直接看MDN给出的语法可能更容易理解。

js 复制代码

//子对象  instanceof 父对象/构造函数
  object instanceof constructor

更直观的表述如下：

instanceof： 用于判断某个对象是否是某个构造函数的实例，即两者是否存在子父继承关系

下面是instance of 的一些使用示例:

js 复制代码

function Person(name, age) {
  this.name = name;
  this.age = age;
}
function Plant(name){
  this.name = name;
}

const Alex = new Person("Alex", 18);    

//沿Alex实例原型链依次向上得:
console.log(Alex instanceof Person);       //true
console.log(Person instanceof Function);   //true
console.log(Function instanceof Object);   //true  

console.log(Alex instanceof Function);     //false   Alex是构造函数创建的一个对象，本身不是构造函数
console.log(Alex instanceof Plant);        //false   Alex不是Plant创建的实例

instanceof手写实现

手写实现instanceof原理，本质上只需要弄懂这一句话即可 foo.prototype === Object.getPrototypeOf(obj)

instannceof内部的判断逻辑：

判断传入的某个对象obj,obj.__proto__的指向是否和传入的构造函数,foo.prototype的指向相同
若相同则返回true;否则将沿着__proto__继续向上判断，直到两者相等；
若一直找到最根处的Object.prototype.__proto__(即null) 仍不相等，证明该对象和该构造函数不存在子父继承关系，返回false;

js 复制代码

//instanceof手写实现
function my_instanceof(child,parent){
  let left = child.__proto__;
  let right = parent.prototype;

  while(true){
    //一直找到最根处的Object.prototype.__proto__时为null
    if(left === null){
      //找到原型链尽头,left依旧不等于right 返回false
      return false
    }
    if(left === right){
      return true;
    }
    left = Object.getPrototypeOf(left);  //继续沿原型链向上寻找
  }
}

用上文中的示例测试自己封装的这个instanceof效果，输出结果与原装instanceof一致：

js 复制代码

function Person(name, age) {
  this.name = name;
  this.age = age;
}
function Plant(name){
  this.name = name;
}

const Alex = new Person("Alex", 18);    

//沿Alex实例原型链依次向上得: 
console.log(my_instanceof(Alex,Person));       //true
console.log(my_instanceof(Person,Function));   //true
console.log(my_instanceof(Function,Object));   //true

console.log(my_instanceof(Alex,Function));     //false
console.log(my_instanceof(Alex,Plant));        //false

其他相关面试题补充：

typeof运算符的结果一共有哪些可能，说一说其与instanceof的区别?

typeof运算符结果一共有如下5种可能：

1.object 【特别注意typeof(null)结果也是object】

2.string

3.number

4.boolean

5.undefined

区别:

instance of 用于判断某个对象是否是某个构造函数的实例，是一个关系判断，其返回一个布尔值。

typeof则用于判断某个数据的数据类型,是一个类型判断，其返回传入数据的数据类型。

此外instance of的存在让我们可以更好的解决typeof无法对Object数据类型进行进一步区分的问题

例如：可以利用 [] instance of Array 来区分数组和对象，达到与Array.isArray()相等的效果。