JavaScript中isPrototypeOf函数详解

晴空闲云
• 阅读 579

有时看一些框架源码的时候,会碰到 isPrototypeOf() 这个函数,那么这个函数有什么作用呢?

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中内置类Number、String、Boolean、Function、Array因为都是继承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也是Number、String、Boolean、Function、Array的实例的原型。

示例5,Object也是函数(类):

另外值得一提的是 Function.prototype 也是Object的原型,因为Object也是一个函数(类),它们是互相生成的。

请看下面输出:

console.log(Object.prototype.isPrototypeOf(Function)); // true
console.log(Function.prototype.isPrototypeOf(Object)); // true

和 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 函数,关键是要理解原型链这个玩意。

点赞
收藏
评论区
推荐文章
Karen110 Karen110
2年前
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript有函数作用域:这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域:它们只能在函数中访问。JS://codeherecann
Karen110 Karen110
2年前
一篇文章带你了解JavaScript Object 对象
一、概念JavaScript原生提供Object对象(注意起首的O是大写),介绍该对象原生的各种方法。JavaScript的所有其他对象都继承自Object对象,即那些对象都是Object的实例。二、Object()Object本身是一个函数,可以当作工具方法使用,将任意值转为对象。这个方法常用于保证某个值一定是对象。如果参数为空(或者为undefi
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
2年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳(从19700101 00:00:00 UTC到指定时间的秒数)到当前时区的时间格式举例:hive   selec
Stella981 Stella981
2年前
ES6中的super
对象方法中的super原型对于javascript来说非常重要,甚至可以说是javascript中最为重要的知识点。然而,很多人一看到原型就懵逼。ES5我们可以使用Object.getPrototypeOf()来返回原型对象,使用Object.setPrototypeOf()来设置原型对象。看下面的例子:letpe
Wesley13 Wesley13
2年前
JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对
Wesley13 Wesley13
2年前
PHP中的NOW()函数
是否有一个PHP函数以与MySQL函数NOW()相同的格式返回日期和时间?我知道如何使用date()做到这一点,但是我问是否有一个仅用于此的函数。例如,返回:2009120100:00:001楼使用此功能:functiongetDatetimeNow(){
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
晴空闲云
晴空闲云
Lv1
男 · 教师
专注前端,把复杂的编程讲简单,又不失深度。@公众号:晴空闲云
文章
26
粉丝
7
获赞
35