面试题:手写实现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()相等的效果。

相关推荐
UGOTNOSHOT4 分钟前
7.4项目一问题准备
面试
zhanshuo30 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan30 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
lemonzoey1 小时前
Node.js child_process 核心 API 详解
前端·javascript
lemonzoey1 小时前
pnpm 与 npm 的依赖管理机制深度解析
前端·javascript
lemonzoey1 小时前
PNPM 全局存储机制深度解析
前端·javascript
YaHuiLiang2 小时前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
gnip2 小时前
markdown预览自定义扩展实现
前端·javascript