JavaScript中isPrototypeOf函数


Posted in Javascript onNovember 07, 2021

 有时看一些框架源码的时候,会碰到 isPrototypeOf() 这个函数,那么这个函数有什么作用呢?

1、isPrototypeOf()

isPrototypeOf() Object函数(类)的下的一个方法,用于判断当前对象是否为另外一个对象的原型,如果是就返回 true,否则就返回 false

这个函数理解的关键是在原型链上,这个据说是JavaScript的三座大山之一。

这里不详述其中的原理,简单的来讲就是3点:

  • 1. 函数对象,都会天生自带一个prototype原型属性。
  • 2. 每一个对象也天生自带一个属性__proto__指向生成它的函数对象的prototype
  • 3. 函数对象的prototype也有__proto__指向生成它的函数对象的prototype

示例1,Object类实例:

let o = new Object();
console.log(Object.prototype.isPrototypeOf(o)); // true

因为o对象是Object的实例,所以o对象的原型(__proto__)指向Object的原型(prototype),上面会输出true。

示例2,自己定义Human类:

function Human() {}
let human = new Human();
 
console.log(Human.prototype.isPrototypeOf(human)); // true

这例和上例类似,因为human对象是Human的实例,所以human对象的原型(__proto__)指向Human的原型(prototype),上面会输出true

示例3,再来看看Object的原型(prototype)是否是human的原型:

console.log(Object.prototype.isPrototypeOf(human)); // true

为什么呢?,用代码可能更好解释,请看下面推导:

// 因为 Human 的原型(prototype)中的原型(__proto__)指向 Object 的原型(prototype)
Human.prototype.__proto__ === Object.prototype
// 又因为 human 的原型(__proto__)指向 Human 的原型(prototype)
huamn.__proto__  === Human.prototype
// 所以human对象的原型(__proto__)的原型(__proto__)指向Object的原型(prototype)
huamn.__proto__.__proto__  === Object.prototype

如果查看human的结构就很容易清楚了:

JavaScript中isPrototypeOf函数

Object 的原型(prototype) 是不是就是 human 对象的原型呢?确切的说Object 的原型(prototype)是在 human 的原型链上。

示例4,Object.prototype是否是内置类的原型:

JavaScript中内置类NumberStringBooleanFunctionArray因为都是继承Object,所以下面的输出也都是true

console.log(Object.prototype.isPrototypeOf(Number)); // true
console.log(Object.prototype.isPrototypeOf(String)); // true
console.log(Object.prototype.isPrototypeOf(Boolean)); // true
console.log(Object.prototype.isPrototypeOf(Array)); // true
console.log(Object.prototype.isPrototypeOf(Function)); // true

自然Object.prototype也是NumberStringBooleanFunctionArray的实例的原型。

示例5,Object也是函数(类):

另外值得一提的是 Function.prototype 也是Object的原型,因为Object也是一个函数(类),它们是互相生成的。

请看下面输出:

console.log(Object.prototype.isPrototypeOf(Function)); // true
console.log(Function.prototype.isPrototypeOf(Object)); // true

2、和 instanceof 的区别

instanceof 是用来判断对象是否属于某个对象的实例。

例如:

function Human() {}
let human = new Human();
 
// human 是 Human 的实例,所以结果输出true
console.log(human instanceof Human); // true
 
// 因为所有的类都继承Object,所以结果也输出true
console.log(human instanceof Object); // true
 
// 因为 human 对象不是数组,所以结果输出false
console.log(human instanceof Array); // false

再来一些内置类的例子:

// 【1,2,3] 是 Array 的实例,所以输出true
console.log([1, 2, 3] instanceof Array); // true
 
// 方法 function(){} 是 Function的实例,所以输出true
console.log(function(){} instanceof Function);

instanceof 作用的原理就是判断实例的原型链中能否找到类的原型对象(prototype),而 isPrototypeOf 又是判断类的原型对象(prototype)是否在实例的原型链上。

所以我的理解,这两个表达的意思是一致的,就是写法不同,下面两个输出应该是一致的:

console.log(A instanceof B);
console.log(B.prototype.isPrototypeOf(A));

小结

其实要理解 isPrototypeOf 函数,关键是要理解原型链这个玩意。

到此这篇关于JavaScriptisPrototypeOf函数的文章就介绍到这了,更多相关JavaScript中isPrototypeOf内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
You might like
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
2017/09/28 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
python中rb含义理解
2020/06/18 Python
降低python版本的操作方法
2020/09/11 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
运动会广播稿200字
2014/01/15 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
销售经理工作检讨书
2015/02/19 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android