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 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
Javascript学习指南
Dec 01 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
vue中activated的用法
Jan 03 Vue.js
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
You might like
PHP模板引擎SMARTY
2006/10/09 PHP
一个MYSQL操作类
2006/11/16 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
详解如何运行vue项目
2019/04/15 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Python多线程学习资料
2012/12/19 Python
Python中os.path用法分析
2015/01/15 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
书法大赛策划方案
2014/06/04 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
房屋租赁协议书
2014/10/18 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js