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验证表单大全
Nov 25 Javascript
使用正则替换变量
May 05 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
javascript中scrollTop详解
Apr 13 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 Javascript
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
You might like
PHP解析RSS的方法
2015/03/05 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
关于python的list相关知识(推荐)
2017/08/30 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
竞选班长演讲稿
2013/12/30 职场文书
小学数学国培感言
2014/03/10 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
踏青活动策划方案
2014/08/19 职场文书
见习报告格式范文
2014/11/08 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
导游词之镇江焦山
2019/11/21 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers