面试题:手写实现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内部的判断逻辑:

  1. 判断传入的某个对象obj,obj.__proto__的指向是否和传入的构造函数,foo.prototype的指向相同
  2. 若相同则返回true;否则将沿着__proto__继续向上判断,直到两者相等;
  3. 若一直找到最根处的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()相等的效果。

相关推荐
爱编程的喵几秒前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
ITfeib2 分钟前
Flutter
开发语言·javascript·flutter
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
百锦再2 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
优雅永不过时_v2 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue2 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html