instanceof方法是什么,使用方式是怎样的?
Admin 2022-12-07 群英技术资讯 262 次浏览
用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
语法:object instanceof constructor
object:某个实例对象
constructor:某个构造函数
简言之就是用来检测 constructor.prototype 是否存在于参数 object 的原型链上。
个人理解:
instanceof 是用来判断左侧对象是否是右侧构造函数的实例化对象,或则说左侧对象能否通过其隐式原型 **[[proto]]**在原型链上一层层向上查找到右侧函数的原型对象,即函数原型对象出现在实例对象的原型链上就返回 true。
通俗的理解: 右侧是不是左侧的爸爸、爷爷、祖宗,只要左侧对象继承自右侧函数就为 true
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
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
代码分片是webpck打包工具所特有的一项技术,通过这项功能可以把代码按照特定的形式进行拆分,使用户不必一次全部加载,而是按需加载。本文就来详细介绍,感兴趣的可以了解一下
本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于分支优化的相关内容,如果有许多个判断条件,使用大量的if分支会使整个代码的可读性和可维护都大大降低,下面一起来看一下,希望对大家有帮助。
目录Axios与proxy反向代理1、Axios 的特性2、Axios 的安装3、Axios 与proxy反向代理的使用axios反向代理proxy个人理解使用反向代理proxy的原因proxy基本配置Axios与proxy反向代理Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.j
配置文件:RedisOptions.jsconstoptions={host:'208.167.233.104',port:15001,password:'123456',detect_buffers:true//传入buffer返回也是buffer否则会转换成String}module.exports=options 封装r
vue跟小程序的区别:1、vue一般会在created或者mounted中请求数据,而在小程序会在onLoad或onShow中请求数据;2、vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号,而小程序绑定某个变量的值为元素属性时,会用两个大括号括起来;3、vue用“v-if”和“v-show”控制元素的显示和隐藏,小程序用“wx-if”和hidden控制。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008