JS | JS中类的 prototype 属性和__proto__属性

news2024/10/11 18:31:35

大多数浏览器的 ES5 实现之中,每一个对象都有__proto__属性,指向对应的构造函数的prototype属性。Class 作为构造函数的语法糖,同时有prototype属性和__proto__属性,因此同时存在两条继承链。

构造函数的有prototype属性‌ 子类通过继承机制继承了父类的属性,包括prototype属性。子类的prototype属性不仅存在,而且其__proto__属性指向父类,而子类prototype属性的__proto__属性指向父类的prototype属性‌。

在JavaScript中,构造函数用于创建对象,其子类通过继承父类的属性和方法来实现功能的扩展。子类的prototype属性允许子类实例共享方法和属性,这与父类的prototype属性相关联,形成了原型链‌。

具体来说,当创建一个子类的实例时,该实例的原型(proto)指向父类,而子类prototype属性的__proto__则指向父类的prototype。这样,子类实例可以通过原型链访问父类的方法和属性,实现方法的共享和继承‌。

(1)子类的__proto__属性,表示构造函数的继承,总是指向父类。

(2)子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性。

class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

上面代码中,子类B__proto__属性指向父类A,子类Bprototype属性的__proto__属性指向父类Aprototype属性。

这样的结果是因为,类的继承是按照下面的模式实现的。

class A {
}

class B {
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

const b = new B();

《对象的扩展》一章给出过 Object.setPrototypeOf()方法的实现。 

Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}

 因此,就得到了上面的结果,即:

Object.setPrototypeOf(B.prototype, A.prototype);
// 等同于
B.prototype.__proto__ = A.prototype;

Object.setPrototypeOf(B, A);
// 等同于
B.__proto__ = A;

这两条继承链,可以这样理解:

作为一个对象,子类(B)的原型(__proto__属性)是父类(A);

作为一个构造函数,子类(B)的原型对象(prototype属性)是父类的原型对象(prototype属性)的实例。

B.prototype = Object.create(A.prototype);
// 等同于
B.prototype.__proto__ = A.prototype;

extends关键字后面可以跟多种类型的值。

class B extends A {
}

上面代码的A,只要是一个有prototype属性的函数,就能被B继承。由于函数都有prototype属性(除了Function.prototype函数),因此A可以是任意函数。

下面,讨论两种情况。第一种,子类继承Object类。

class A extends Object {
}

A.__proto__ === Object // true
A.prototype.__proto__ === Object.prototype // true

这种情况下,A其实就是构造函数Object的复制,A的实例就是Object的实例。

第二种情况,不存在任何继承。

class A {
}

A.__proto__ === Function.prototype // true
A.prototype.__proto__ === Object.prototype // true

这种情况下,A作为一个基类(即不存在任何继承),就是一个普通函数,所以直接继承Function.prototype。但是,A调用后返回一个空对象(即Object实例),所以A.prototype.__proto__指向构造函数(Object)的prototype属性。

实例的 __proto__ 属性 

子类实例的__proto__属性的__proto__属性,指向父类实例的__proto__属性。也就是说,子类的原型的原型,是父类的原型。

var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');

p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true

上面代码中,ColorPoint继承了Point,导致前者原型的原型是后者的原型。因此,通过子类实例的__proto__.__proto__属性,可以修改父类实例的行为。

p2.__proto__.__proto__.printName = function () {
  console.log('Ha');
};

p1.printName() // "Ha"

上面代码在ColorPoint的实例p2上向Point类添加方法,结果影响到了Point的实例p1


参考资料:

详解JS原型,构造函数以及class之间的原型关系-腾讯云开发者社区-腾讯云

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2205456.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

搭建知识库:助力大健康零售电商的快速发展

一、大健康零售电商行业的快速发展及其对知识库的需求 随着互联网技术的飞速发展和人们对健康意识的显著提升,大健康零售电商行业迎来了前所未有的发展机遇。这一行业不仅涵盖了传统零售业的商品销售,还融入了健康管理、健康咨询、健康数据分析等多元化…

『网络游戏』数据库表格转储【25】

避免勿删数据库表格,可以将表格存储 放到桌面即可 现在将表格删除后点击 浏览桌面表格保存即可 修改客户端脚本:NetSvc.cs 目的是在数据库更新异常时弹出提示以便修改 本章结束

使用 Helsinki-NLP 中英文翻译本地部署 - python 实现

通过 Helsinki-NLP 本地部署中英文翻译功能。该开源模型性价比相对高,资源占用少,对于翻译要求不高的应用场景可以使用,比如单词,简单句式的中英文翻译。 该示例使用的模型下载地址:【免费】Helsinki-NLP中英文翻译本…

Pura 70系列和Pocket 2已支持升级尝鲜鸿蒙NEXT,报名教程在这里

相信不少关注鸿蒙 NEXT 的人都知道,10月8日起,华为开启了鸿蒙 NEXT 系统的公测,但有不少人不知道的是,除了公测的 Mate 60 和 Mate X5 两个系列的机型,还有两个系列的手机其实也可以提前升级体验鸿蒙 NEXT 系统。 Pur…

随时随地一键开播的云微客实景直播神器,你想要吗?

AI实景直播系统正在以自动化、智能化的特性,逐渐成为直播行业的新宠。在众人频繁使用手机的时代背景下,直播已经成为了大多数人娱乐的方式之一,然而传统的直播方式不仅操作繁琐而且人员成本也高;现在云微客实景直播不仅可以告别人…

在工业现场,数据采集相关的对象一般有哪些类型?

在工业现场,数据采集相关的对象一般有以下类型:一、设备运行参数类1.温度 —描述:反映设备的发热情况、工作环境温度等,对于一些对温度敏感的设备(如电子设备、精密机械等)至关重要。 —举例:在…

企业注册资金如何实缴?步骤与方式详解

在企业的发展过程中,注册资金实缴是一个重要的环节。它不仅体现了企业的实力和信誉,也为企业的经营活动提供了坚实的资金保障。那么,在 2024 年,企业注册资金实缴的步骤和方式有哪些呢? 一、企业注册资金实缴步骤 1、确…

[C语言]结构体

1.什么是结构体 结构是多种类型的数据的集合。。且每个结构成员都有名字,因此当使用特定的成员时需要指明结构体成员的名字。 2.结构体的声明 以学生的数据为例: struct student //student结构名{char name; //name结构体成员名int height;…

传知代码-自动车牌识别检测系统(论文复现)

代码以及视频讲解 本文所涉及所有资源均在传知代码平台可获取 YOLO V8实现多种车牌检测识别! 一、概述 使用yolov8进行车牌检测(训练测试演示部署) 二、支持类型 我们的车牌识别检测系统支持多种类型的车牌 具体支持类型如下&#xff1a…

云渲染农场可以用哪些CG软件!

随着数字内容创作的需求日益增长,3D艺术家们不断寻求更高效、更强大的渲染解决方案。云渲染农场以其灵活性和可扩展性,成为了许多创作者的首选。这些平台支持多种流行的CG软件,如Maya、3ds Max、Cinema 4D、Blender等,以及各种插件…

go 语言学习路线图

1. Go语言简介 Go语言的历史背景和设计理念Go的优势:简洁、高效、并发支持强Go的应用场景:微服务、云计算、系统编程 2. 开发环境设置 安装Go语言开发环境 在Windows、macOS、Linux系统上的安装方法 配置环境变量:GOROOT 和 GOPATH验证安装…

认知战认知作战:作战机构深陷的两大战略误解阵营

认知战认知作战:作战机构深陷的两大战略误解阵营 认知战认知作战:作战机构深陷的两大战略误解阵营 关键词:认知战, 认知作战, 作战机构, 如临大敌派, 水到渠成派, 战略误解, 务实之道,认知作战,新质生产力,人类命运共同体,认知战,认知域,认…

ROS理论与实践学习笔记——5 ROS机器人系统仿真之URDF集成Rviz基本流程

实现流程: (1)创建功能包,导入依赖 创建一个新的功能包,名称自定义,导入依赖包:urdf与xacro。 在当前功能包下,再新建几个目录: urdf: 存储 urdf 文件的目录 meshes:机…

如何使用ssm实现办公OA系统0

TOC 10907ssm办公OA系统10907ssm0 第一章 绪 论 1.1背景及意义 系统管理也都将通过计算机进行整体智能化操作,对于办公OA系统所牵扯的管理及数据保存都是非常多的,例如管理员;主页、个人中心、公司公告管理、设备分类管理、办公设备管理、…

入门C语言基础

文章目录 入门C语言基础1 基础语法1.1 整形1.2 浮点型1.3 常量1.4 运算符1.4.1 算数运算符1.4.2 关系运算1.4.3 逻辑运算1.4.4 赋值运算符1.4.5 其他 1.5 if判断1.6 循环1.7 函数1.8 字符串和字符串1.9 数组 2 指针2.1 定义指针类型变量和取变量地址2.2 指针类型变量解引用2.3 …

一文讲明白初学者怎么入门大语言模型(LLM)?

关于如何入门LLM,大多数回答都提到了调用API、训练微调和应用。但是大模型更新迭代太快,这个月发布的大模型打榜成功,仅仅过了一个月就被其他模型超越。训练微调也已经不是难事,有大量开源的微调框架(llamafactory、fi…

工业物联网关-系统说明

系统介绍 如下图所示,网关采集终端数据,经解析,运算,组成网络报文后上送云端服务器。从下而上分别是设备数据采集层,数据缓存计算层,云端对接层。主要功能模块包括虚拟产品、设备管理,数据缓存…

2024大模型新书《大模型基础》教材发布,开源!

我已将这本大模型资料 免费分享 出来,需要的小伙伴可以扫取。 浙江大学DAILY实验室毛玉仁研究员、高云君教授领衔撰写的《大模型基础》教材第一版付梓。本教材为开源教材,旨在为对大语言模型感兴趣的读者系统地讲解相关基础知识、介绍前沿技术。作者团…

【LLM大模型】RAG早已经过时,RAG-Fusion正当时

人工智能和自然语言处理正在以惊人的速度发展,现在比以往任何时候都更需要更好、更可靠的信息获取途径和使用方式。正如我们现在所面对的,传统系统往往难以结合丰富的上下文以最相关的方式回答我们的提问。以谷歌为例,通常需要进行多次搜索才…

性价比之王!三角型(单体式)电动采光排烟天窗

三角型(单体式)电动采光排烟天窗是一种在厂房、仓库等大型建筑屋顶上常用的通风、采光和排烟设备。一、基本概念 三角型(单体式)电动采光排烟天窗是指其窗扇与安装面形成一定角度(通常为30),整体呈“三角”形状,并通过电动装置实现开合的采光排烟天窗&am…