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 27 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
Node.js返回JSONP详解
May 18 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
bootstrap table实例详解
Jan 06 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
You might like
解析PHP高效率写法(详解原因)
2013/06/20 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
php检测文本的编码
2015/07/26 PHP
浅谈PHP的反射API
2017/02/26 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
vue中的router-view组件的使用教程
2018/10/23 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python OS模块常用函数说明
2015/05/23 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python和php学习哪个更有发展
2020/06/17 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
详解Python中的for循环
2022/04/30 Python
Redis 限流器
2022/05/15 Redis