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 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
You might like
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
php检测文件编码的方法示例
2014/04/25 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python定时任务sched模块用法示例
2018/07/16 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python获取Pandas列名的几种方法
2019/08/07 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
校园安全教育广播稿
2014/02/17 职场文书
中队活动总结
2014/08/27 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
python_tkinter事件类型详情
2022/03/20 Python
Kubernetes控制节点的部署
2022/04/01 Servers