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 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
javascript入门·对象属性方法大总结
Oct 01 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
You might like
php 将excel导入mysql
2009/11/09 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python 正则表达式操作指南
2009/05/04 Python
Python 命令行非阻塞输入的小例子
2013/09/27 Python
python实现超简单端口转发的方法
2015/03/13 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
python中树与树的表示知识点总结
2019/09/14 Python
python集合删除多种方法详解
2020/02/10 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
授权委托书
2014/09/17 职场文书
教师批评与自我批评
2014/10/15 职场文书
会计专业求职信范文
2015/03/19 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
JS实现数组去重的11种方法总结
2022/04/04 Javascript
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js