JavaScript之instanceof方法手写示例详解

 更新时间:2022年10月31日 10:03:28   作者:十七喜欢前端  
这篇文章主要为大家介绍了JavaScript之instanceof方法手写示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

方法介绍

instanceof 是什么?

用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

语法:object instanceof constructor
object:某个实例对象
constructor:某个构造函数

简言之就是用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

个人理解:

instanceof 是用来判断左侧对象是否是右侧构造函数的实例化对象,或则说左侧对象能否通过其隐式原型 **[[proto]]**在原型链上一层层向上查找到右侧函数的原型对象,即函数原型对象出现在实例对象的原型链上就返回 true。

通俗的理解: 右侧是不是左侧的爸爸、爷爷、祖宗,只要左侧对象继承自右侧函数就为 true

instanceof 使用方式

object instanceof 构造函数, 它有两个必传参数,左侧必须为对象类型,右侧必须为函数类型。返回值为 Boolean 类型

注意: 你可能会认为js中万物皆对象,这个错误的理解可能会误导大家出现这种写法: 'str' instanceof String,返回值为false,因为 ‘str’ 就是简单的字符串,它和通过String构造函数(new String('str'))创造出来的字符串是有区别的,可自行在控制台打印出来看,其值会封装成String对象类型的字符串,同理 new Number(3) instanceof Number, new Boolean(true) instanceof Boolean ……等等返回值为true。

代码示例:

// 定义构造函数
function C () {}
function D () {}
// 实例化一个 o 对象
var o = new C()
// true,true --> C.prototype 在 o 的原型链上
console.log(o instanceof C, o.__proto__ === C.prototype, '此时 o 的 __proto__:', 
o.__proto__, '此时 C 的 prototype:', C.prototype)
// false,false --> D.prototype 不在 o 的原型链上
console.log(o instanceof D, o.__proto__ === D.prototype)
// true true --> Object.prototype 在 o 的原型链上
console.log(o instanceof Object, o.__proto__.__proto__ === Object.prototype)
// 这时我们修改构造函数 C 的原型为一个空对象
C.prototype = {}
// 实例化一个 o2 对象
var o2 = new C()
// true --> C.prototype 在 o2 的原型链上
console.log(o2 instanceof C)
// false,C.prototype 指向了一个空对象,这个空对象不在 o 的原型链上.
console.log(o instanceof C, '此时 o 的 __proto__:', o.__proto__, '此时 C 的 prototype:', C.prototype)
console.log('此时 D 的 prototype:', D.prototype);
// 继承
D.prototype = new C()
console.log('此时 D 的 prototype:', D.prototype);
var o3 = new D()
// true, true --> 因为 o3 是 构造函数 D new 出来的实例对象,所以 D.prototype 一定在 o3 的原型链上
console.log(o3 instanceof D, o3.__proto__ === D.prototype)
// true --> 因为 C.prototype 现在在 o3 的原型链上
console.log(o3 instanceof C)
// true,true --> 上面的结果为什么为 true 呢,看如下代码,D.prototype 是 构造函数 C new 出来的实例对象,所以 C.prototype 一定在 D.prototype 的原型链上
console.log(o3.__proto__ === D.prototype, D.prototype.__proto__ === C.prototype);
// true 相当于如下代码
console.log(o3.__proto__.__proto__ === C.prototype);

开始手写

由上我们可以知道,instanceof其判断的原理是:通过左侧对象的隐式原型属性 __ proto __ 在原型链上向上一层层查找,找到右侧构造函数的原型对象属性 prototype 就返回 true。明白这一点也就很容易写出自己的 instanceof。

注:需要借助循环来实现。

function myInstanceof(obj, func) {
    if(!['function', 'object'].includes(typeof obj) || obj === null) {
    	// 基本数据类型直接返回false,因为不满足instanceof的左侧参数是对象或者说引用类型
        return false
    }
    let objProto = obj.__proto__, funcProto = func.prototype
    while(objProto !== funcProto) {
    	// obj.__proto__不等于func.prototype时,继续通过__proto__向上层查找
    	// 当找到原型链尽头Object.prototype.__proto__=null 时还未找到,就返回false
        objProto = objProto.__proto__
        if(objProto === null){
            return false
        }
    }
    // obj.__proto__ 等于 prototype = func.prototype 时,不会进入上面循环,返回true
    // 不等进入上面循环,找到相等时会跳出循环,走到这里返回true
    return true
}
//测试
function A(){}
let a=new A;
console.log(myInstanceof(a,A))//true
console.log(myInstanceof([],A))//false

以上就是JavaScript之instanceof方法手写示例详解的详细内容,更多关于JavaScript instanceof 方法的资料请关注脚本之家其它相关文章!

相关文章

  • JS实现电脑虚拟键盘的操作

    JS实现电脑虚拟键盘的操作

    这篇文章主要为大家详细介绍了JS实现电脑虚拟键盘的操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 详解如何用JavaScript编写一个单元测试

    详解如何用JavaScript编写一个单元测试

    测试代码是确保代码稳定的第一步。能做到这一点的最佳方法之一就是使用单元测试。这篇文章主要介绍了如何用JavaScript编写你的第一个单元测试,感兴趣的可以了解一下
    2022-11-11
  • 原生js仿jquery实现对Ajax的封装

    原生js仿jquery实现对Ajax的封装

    大家都知道jquery在我们日常开发中的使用频率非常高,但jquery说到底还是对js的封装,我们不能光会使用,只有知道了其中的远离才能更好的使用,所以这篇文章主要介绍的是原生js仿jquery实现对Ajax封装的方法。
    2016-10-10
  • JS中移除非数字最多保留一位小数

    JS中移除非数字最多保留一位小数

    这篇文章主要介绍了JS中移除非数字最多保留一位小数的实现代码,文章给大家提到了js处理数字保留2位小数,强制保留2位小数不够补上.00的完整代码,感兴趣的朋友一起看看吧
    2018-05-05
  • JavaScript宏任务(macrotask)和微任务(microtask) 执行顺序实例详解

    JavaScript宏任务(macrotask)和微任务(microtask) 执行顺序实例详解

    JavaScript是单线程指的是同一时间只能干一件事情,只有前面的事情执行完,才能执行后面的事情,这篇文章主要介绍了JavaScript宏任务(macrotask)和 微任务(microtask) 执行顺序,需要的朋友可以参考下
    2023-10-10
  • 弹出遮罩层后禁止滚动效果【实现代码】

    弹出遮罩层后禁止滚动效果【实现代码】

    下面小编就为大家带来一篇弹出遮罩层后禁止滚动效果【实现代码】。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04
  • 用webpack4开发小程序的实现方法

    用webpack4开发小程序的实现方法

    这篇文章主要介绍了用webpack4开发小程序的实现方法,分享通过webpack来构建小程序的开发架构,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 基于input框覆盖掉数字英文的实例讲解

    基于input框覆盖掉数字英文的实例讲解

    下面小编就为大家带来一篇基于input框覆盖掉数字英文的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JavaScript中Async/Await通过同步的方式实现异步的方法介绍

    JavaScript中Async/Await通过同步的方式实现异步的方法介绍

    在JavaScript的异步编程中,我们经常使用回调函数、Promise和 Async/Await来解决异步操作的问题,Async/Await 又是Promise的语法糖,它的出现让异步编程变得更加直观和易于理解,本文将详细讲解Async/Await如何通过同步的方式实现异步
    2023-06-06
  • Three.js实现浏览器变动时进行自适应的方法

    Three.js实现浏览器变动时进行自适应的方法

    这篇文章主要给大家介绍了关于Three.js实现浏览器变动时进行自适应的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-09-09

最新评论