js原型链与继承笔记

news2024/11/29 0:44:50

前置阅读:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain


  1. js中的“类”是一个函数。
  2. function test() {}中,test是由Function生成的。
  3. prototype与__proto__的区别:
    前者是js函数(C++中的类)的原型。
    后者是对象的原型链(比如function Base{}, const a = new Base, 那这个a对象的__proto__就是Base.prototype,且Base.prototype规定为Object.prototype)。
  4. 对于function test() {}来说,test既有prototype(即test.prototype),又有__proto__(即test.__proto__)。
    如何理解test.__proto__呢?js中的每个类似test的函数,其实是Function函数(C++中的类)的一个实例。所以基于原型链,实例的__proto__就是Function.prototype(C++中的类)。即test.__proto__===Function.prototype。控制台输出:
    在这里插入图片描述
    如何理解test.prototype呢?test也是一个函数(C++中的类。可以想一下,js中的class最终都是会编译为function,比如下图)
    在这里插入图片描述
    那函数(C++中的类)就有自己的prototype(类比Object.prototype,且Object.prototype.[[prototype]]=null)。控制台输出:
    在这里插入图片描述
    可以看到test.prototype就是test函数自己的原型。test.prototype.[[prototype]]就是Object.prototype(之后就是null)。
    注意,test.prototype!=Function.prototype,为什么?这里test和Function都是同级的概念,都是函数,所以有自己独立的prototype,两者并不相等。
    注意,这里的constructor指向了test函数自己,即 test.prototype.constructor == test 。所以test.prototype.constructor.prototype就等于test.prototype,也就是上面贴的图,即重复了。
为什么要指向自己?
1.原型链的维护:当你创建一个函数时,JavaScript会自动为该函数创建一个prototype对象,并将constructor属性指向该函数本身。这样,通过原型链,我们可以轻松地访问和操作函数的构造函数。
举个例子,假设我们有一个构造函数Person:

function Person(name) {
  this.name = name;
}

var john = new Person("John");
在这个例子中,Person函数的constructor属性指向Person本身。我们可以通过john.constructor来获取john对象的构造函数,即Person。

console.log(john.constructor); // 输出: ƒ Person(name) { this.name = name; }
通过constructor属性,我们可以方便地判断一个对象的类型,比如:

console.log(john.constructor === Person); // 输出: true

(构造函数中的super()应该也需要用到原型链中的constructor。在子类的构造函数中使用super()调用父类的构造函数时,super关键字会将子类的实例绑定到父类的构造函数中。这样,父类的构造函数可以在子类的实例上设置属性和执行其他操作。)

2.动态创建对象:constructor属性可以用于动态创建对象实例。通过构造函数的prototype属性和constructor属性,我们可以在运行时使用new关键字来创建新的对象实例。

举个例子,假设我们有一个构造函数Person:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

var john = new Person("John");
var jane = new john.constructor("Jane");

john.sayHello(); // 输出: "Hello, my name is John"
jane.sayHello(); // 输出: "Hello, my name is Jane"
在这个例子中,我们通过john.constructor获取了john对象的构造函数Person,然后使用new关键字和Person构造函数创建了一个新的对象实例jane。这样,我们可以动态地创建新的对象实例,而不需要显式地使用构造函数的名称。
  1. 如何获取proto:
  • 对象:Object.getPrototypeOf() 等价于 obj.__proto__;
  • 函数:Function.prototype;
    注意这两个是不一样的,对象的__proto__是根据其类型的prototype创建的。
  1. 检查对象本身(不包括原型链)是否存在某个属性:
  • obj.hasOwnProperty(“propertyName”);
  • Object.hasOwn(obj, “propertyName”);
  1. 使用不同的方法来创建对象和改变原型链的方法:
  • 使用语法结构创建对象

const p = { b: 2, __proto__: o };

  • 使用构造函数
function Graph() {
  this.vertices = [];
  this.edges = [];
}

Graph.prototype.addVertex = function (v) {
  this.vertices.push(v);
};
  • 使用 Object.create()
const a = { a: 1 };
// a ---> Object.prototype ---> null

const b = Object.create(a);
  • 使用类
class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
class Square extends Polygon {
}
  • 使用 Object.setPrototypeOf()
const obj = { a: 1 };
const anotherObj = { b: 2 };
Object.setPrototypeOf(obj, anotherObj);
// obj ---> anotherObj ---> Object.prototype ---> null
  • 使用 proto 访问器
const obj = {};
// 请不要使用该方法:仅作为示例。
obj.__proto__ = { barProp: "bar val" };
obj.__proto__.__proto__ = { fooProp: "foo val" };
console.log(obj.fooProp);
console.log(obj.barProp);

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

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

相关文章

Express框架下搭建GraphQL API

需要先下载apollo-server-express,apollo-server-express是Express框架下,用于构建GraphQL服务的中间件,属于Apollo Server的一部分: npm install apollo-server-express 随后在index.js添加 apollo-server-express包&#xff1…

【半个月我拿下了软考证】软件设计师高频考点--系统化教学-关系模式

👨‍💻 收录于专栏:软件设计师考点暴击 ⭐🅰️进入狂砍分⭐ ⭐软件设计师高频考点文档, ⭐软件设计师高频考点专栏 ⭐软件设计师高频考点⭐ 🎶(A) 考点1,关系模式 考点: 三个模式相…

Qt自定义控件--提升为

为什么要自定义控件 1,有复合小控件需要组合为一个整体控件时; 2,一个复合控件需要重复使用时; 实现 自定义控件文件 新增三个文件 关联不同组的控件 关联之前的准备工作 1,在主控件选择和子控件所有控件所在控件…

Oracle 流stream数据的复制

Oracle 流stream数据的复制 --实验的目的是捕获scott.emp1表的变化,将变化应用到远程数据库scott.emp1表中。 --设置初始化参数 AQ_TM_PROCESSES1 COMPATIBLE9.2.0 LOG_PARALLELISM1 GLOBAL_NAMEStrue JOB_QUEUE_PROCESSES2 --查看数据库的名称,我的为o…

深入解析MySQL中的事务(下)

MySQL事务管理 3. 隔离性(Isolation)查看和设置隔离级别隔离级别作用域区别与解析 四种隔离级别解析小结 4. 一致性(Consistency)如何保持一致性 5.“保持原子性、隔离性、持久性就能保证一致性”的理解: 四、如何理解…

25计算机考研院校数据分析 | 中南大学

中南大学(Central South University),位于湖南省长沙市,是中华人民共和国教育部直属的全国重点大学 ,中央直管副部级建制,位列国家“双一流”、“985工程”、“211工程”,入选国家“2011计划”牵…

BM7 链表中环的入口结点(快慢指针模板题)

描述 给一个长度为n链表&#xff0c;若其中包含环&#xff0c;请找出该链表的环的入口结点&#xff0c;否则&#xff0c;返回null。 数据范围&#xff1a; &#x1d45b;≤10000n≤10000&#xff0c;1<结点值<100001<结点值<10000 要求&#xff1a;空间复杂度 &…

【数据结构(邓俊辉)学习笔记】二叉树01——二叉树表示与实现

文章目录 0.概述1.树1.1 应用1.2 有根树1.3 有序树1.4 路径环路1.5 深度 层。1.6 树的表示 2. 二叉树的概述3 二叉树实现3.1 二叉树节点3.2 二叉树节点操作接口3.3 二叉树的实现 0.概述 介绍下二叉树的表示与实现。 1.树 1.1 应用 后缀表达式。 相对于线性结构O&#xff08…

MySQL学习笔记11——数据备份 范式 ER模型

数据备份 & 范式 & ER模型 一、数据备份1、如何进行数据备份&#xff08;1&#xff09;备份数据库中的表&#xff08;2&#xff09;备份数据库&#xff08;3&#xff09;备份整个数据库服务器 2、如何进行数据恢复3、如何导出和导入表里的数据&#xff08;1&#xff09…

ARM架构安全特性之防御执行技术

安全之安全(security)博客目录导读 目录 1、侧信道攻击威胁 2、推测屏障Speculation Barriers 3、栈溢出攻击威胁 4、指针认证PAC 5、分支目标识别BTI 6、内存安全违规威胁 7、内存标记扩展MTE 8、加强数据保护 9、特权不可访问&#xff08;Privileged Access Never …

一套MySQL读写分离分库分表的架构,被秀到了!

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、My…

Linux进程控制——Linux进程终止

前言&#xff1a;前面了解完前面的Linux进程基础概念后&#xff0c;我们算是解决了Linux进程中的一大麻烦&#xff0c;现在我们准备更深入的了解Linux进程——Linux进程控制&#xff01; 我们主要介绍的Linux进程控制内容包括&#xff1a;进程终止&#xff0c;进程等待与替换&a…

答辩PPT设计缺乏专业感?笔灵AI提供简洁且关键的幻灯片设计

在我原本的认知里面&#xff0c;答辩PPT是要包含论文各个章节的&#xff0c;在答辩时需要方方面面都讲到的&#xff0c;什么摘要、文献综述、实证分析、研究结果样样不落。但是&#xff0c;这大错特错&#xff01; 答辩PPT环节时长一般不超过5分钟&#xff0c;老师想要的答辩P…

Linunx应急响应

Linux应急流程 1,请提交攻击者的 IP 地址2,请提交攻击者使⽤的操作系统3,请提交攻击者进⼊⽹站后台的密码4,请提交攻击者⾸次攻击成功的时间&#xff0c;格式&#xff1a;DD/MM/YY:hh:mm:ss5,请提交攻击者上传的恶意⽂件名&#xff08;含路径&#xff09;6,请提交攻击者写⼊的恶…

机器学习特征降维

目录 特征降维概念 低方差过滤法 PCA主成分分析 相关系数法 小结 特征降维概念 特征对训练模型时非常重要的&#xff1b;用于训练的数据集包含一些不重要的特征&#xff0c;可能导致模型性能不好、泛化性能不佳&#xff1b;例如&#xff1a; 某些特征的取值较为接近&…

Multisim 14 常见电子仪器的使用和Multisim的使用

multisim multisim&#xff0c;即电子电路仿真设计软件。Multisim是美国国家仪器&#xff08;NI&#xff09;有限公司推出的以Windows为基础的仿真工具&#xff0c;适用于板级的模拟/数字电路板的设计工作。它包含了电路原理图的图形输入、电路硬件描述语言输入方式&#xff0…

全面理解BDD(行为驱动开发):转变思维方式,提升软件质量

在传统的软件开发流程中&#xff0c;开发人员和测试人员的工作通常是相互独立的。开发人员负责编写代码&#xff0c;测试人员负责找出代码中的问题。然而&#xff0c;这种方法可能导致沟通不足&#xff0c;而且会浪费时间和资源。为了解决这些问题&#xff0c;出现了一种新的开…

IM是什么意思?

IM&#xff08;即时通讯&#xff09;作为现代通讯领域的重要且普遍应用&#xff0c;已成为人们日常生活和工作中不可或缺的通信方式。随着科技的不断发展和互联网的普及&#xff0c;IM工具通过实时信息传递&#xff0c;将沟通变得更加迅速、便捷、高效。 IM的诞生极大地改变了…

【python量化交易】qteasy使用教程06——创建自定义因子选股交易策略

创建自定义因子选股策略 使用qteasy创建自定义因子选股交易策略开始前的准备工作本节的目标Alpha选股策略的选股思想计算选股指标用FactorSorter定义Alpha选股策略交易策略的回测结果用GeneralStg定义一个Alpha选股策略回测结果&#xff1a;本节回顾 使用qteasy创建自定义因子选…

(Java)心得:LeetCode——19.删除链表的倒数第 N 个节点

一、原题 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5]示例 2&#xff1a; 输入&#xff1a;head [1], n 1 输出&#xff1a;[]示例 3&…