js中的instance,isPrototype和getPrototypeOf的使用,来判断类的关系

😁 作者简介:一名大四的学生,致力学习前端开发技术

⭐️个人主页:夜宵饽饽的主页

❔ 系列专栏:JavaScript小贴士

👐学习格言:成功不是终点,失败也并非末日,最重要的是继续前进的勇气

​🔥​前言:

这里是关于对类的关系和判断,我们可以使用instance和isPrototype和getPrototypeOf这三个方法来判断一个类和对象的从属关系,希望可以帮助到大家,欢迎大家的补充和纠正

文章目录

检查类的关系instance和isPrototype,getPrototypeOf

1 instance方法

概念: **instanceof**运算符用于检测构成函数的prototype属性是否出现在某一个实例对象的原型链上面

语法:

js 复制代码
object instanceof constructor

参数:

  • object:某一个实例对象
  • constructor:某一个构造函数

实例:

js 复制代码
//第一种情况
function Foo(){

}

Foo.prototype.blah=function(){
	console.log('验证')
}

var a=new Foo()

console.log(a instanceof Foo) //true

//第二种情况
class Person {}

const p = new Person();

console.log(p instanceof Person); // true

上述的代码中,instanceof 操作符的左操作数是一个普通的对象,右操作数是一个函数。instanceof 回答的问题是:在 a 的整条 [[Prototype]] 链中是否有指向 Foo.prototype 的对象?

😔 可惜的是,这个方法只能处理对象(a)和函数之间的关系,如果想要判断两个对象(比如a和b)之间是否通过[[Prototype]]链关联,我们就得请出下一个方法isPrototypeOf

2 isPrototypeOf()方法

概念: isPrototypeOf() 方法用于检查一个对象是否存在于另一个对象的原型链中。

语法:

js 复制代码
prototypeObj.isPrototypeOf(object)

参数:

  • object:要搜索其原型链的对象
  • prototypeObj:原型对象

例子:

js 复制代码
//第一种情况
function Person() {} 

var p = new Person();

console.log(Person.prototype.isPrototypeOf(p)); // true

//第二种情况
function Student() {}

Student.prototype = Object.create(Person.prototype); 

var s = new Student();

console.log(Person.prototype.isPrototypeOf(s)); // true

3 getPrototypeOf方法

概念: Object.getPrototypeOf() 静态方法返回指定对象的原型(即内部 [[Prototype]] 属性的值)。

语法:

js 复制代码
Object.getPrototypeOf(obj)

参数:

  • obj:要返回原型的对象

返回值:

给定对象的原型,可能是null

例子:

js 复制代码
const proto = {};
const obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto; // true

上述代码中,创建了obj的原型对象是proto,使用getPrototypeOf方法来获取obj的原型对象,然后达到判断对象关系的目的

相关推荐
想努力找到前端实习的呆呆鸟32 分钟前
网易云桌面端--精选歌单布局思路记录
前端·javascript·vue.js
进击的尘埃3 小时前
策略模式和状态模式到底啥区别?拿审批流表单说个明白
javascript
专业抄代码选手4 小时前
在react中,TSX是如何转变成JS的
前端·javascript
进击的尘埃4 小时前
SOLID 原则在 React 组件库里怎么落地:五个重构案例
javascript
本末倒置1834 小时前
Bun 内置模块全解析:告别第三方依赖,提升开发效率
前端·javascript·node.js
进击的尘埃4 小时前
中介者模式:把面板之间的蜘蛛网拆干净
javascript
Hilaku5 小时前
OpenClaw 很爆火,但没人敢聊它的权限安全🤷‍♂️
前端·javascript·程序员
兆子龙7 小时前
React Native 完全入门:从原理到实战
前端·javascript
SuperEugene7 小时前
Vite 实战教程:alias/env/proxy 配置 + 打包优化避坑|Vue 工程化必备
前端·javascript·vue.js
兆子龙7 小时前
一文彻底搞懂 OpenClaw 的架构设计与运行原理(万字长文)
javascript