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 相关文章推荐
JQuery index()方法使用代码
Jun 02 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
自己前几天写的无限分类类
2007/02/14 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
在Django的视图中使用form对象的方法
2015/07/18 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
教师个人自我评价范文
2014/04/13 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏