js原型链与继承笔记

前置阅读: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 ---> nullconst 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.mzph.cn/pingmian/10803.shtml

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

相关文章

Linux学习之路 -- 文件系统 -- 缓冲区

前面介绍了文件描述符的相关知识,下面我们将介绍缓冲区的相关知识。 本质上来说,缓冲区就是一块内存区域,因为内核上的缓冲区较复杂,所以本文主要介绍C语言的缓冲区。 目录 1.为什么要有缓冲区 2.应用层缓冲区的默认刷新策略 …

如何在bud里弄3d模型?---模大狮模型网

随着数字化设计的不断发展,越来越多的设计软件提供了对3D模型的支持,为设计师们带来了更广阔的创作空间。Bud作为一款功能强大的设计工具,也提供了添加和编辑3D模型的功能,让用户能够更加灵活地进行设计创作。本文将为您详细介绍如…

【计算机网络】计算机网络体系结构

🚩本文已收录至专栏:计算机网络学习之旅 一.常见的三种结构 (1) OSI参考模型 为了使不同体系结构的计算机网络都能互连起来,国际标准化组织于1977年成立了专门机构研究该问题,提出了著名的开放系统互连基本参考模型&#xff0c…

pycharm 将项目连同库一起打包及虚拟环境的使用

目录 一、创建虚拟环境 1、用 anaconda 创建 2、Pycharm 直接创建 二、虚拟环境安装第三方库 1、创建项目后,启动终端(Alt F12),或者点击下方标记处。 2、使用 pip 或者 conda 来进行三方库的安装或卸载 3、将项目中的库放入文档,便于…

李宏毅-注意力机制详解

原视频链接:attention 一. 基本问题分析 1. 模型的input 无论是预测视频观看人数还是图像处理,输入都可以看作是一个向量,输出是一个数值或类别。然而,若输入是一系列向量,长度可能会不同,例如把句子里的…

Spring STOMP-消息处理流程

一旦STOMP的接口被公布,Spring应用程序就成为连接客户端的STOMP代理。本节描述服务端消息处理的流程。 spring-messaging模块包含消息类应用的基础功能,这些功能起源于Spring Integration项目。并且,后来被提取整合到Spring框架,…

Spring Boot 调用外部接口的几种方式

Spring Boot 调用外部接口的几种方式 在微服务架构中,服务间的调用是不可或缺的环节。Spring Boot 为开发者提供了多种方式来实现这一任务,这个文章将为你详细介绍这些方式。 一、使用RestTemplate RestTemplate是 Spring Boot 早期版本中常用的 REST 客…

十个最适合论文写作的GPTs及其应用

文章目录 一、GPTs让一切皆有可能二、最适合论文写作的GPTs及其应用1、[Paper Search Engine](https://chat.openai.com/g/g-9v5gHG9Bo)2、[Academic Paper Specialist(学术论文撰写专家)](https://chat.openai.com/g/g-jryw3pfsH)3、[Paper Connect 论文…

微信公众号接入chatGPT自动回复(2)

微信公众平台 配置自动回复的服务器 application.properties中的配置 验证服务器接口配置 其实就两个接口(相同的url地址,只不过请求方式不一样) 1.验证接口(get请求) 2.自动回复接口(post请求) 完整代码 这个地址就是上面URL配置的地址 如果使用Nginx的话自动配置 将该代…

11个免费的 android数据恢复应用程序功能分析

在手机上丢失数据是一个很大的错误。但是,在这种情况下,除了惊慌失措之外,最好开始使用android数据恢复应用程序搜索以查找将其取回的方法。您可以检查手机的备份存储以在Android上进行数据恢复,但是如果数据仍然无处可寻&#xf…

@PostConstruct

PostConstruct initializeBean方法–> PostProcessor.postProcessMergedBeanDefinition --> InitDestroyAnnotationBeanPostProcessor.postProcessBeforeDestruction 被PostConstruct注解的方法会在Bean初始化的时候被调用,如下图: 继承关系如下…

jenkins连接ubuntu普通用户节点

1.创建credentials 2.创建node 3.在jenkins服务器还需要进行的操作(jenkins服务器中) mkdir /var/lib/jenkins/.ssh ssh-keyscan -H 192.168.110.204 >> /var/lib/jenkins/.ssh/known_hosts chown -R jenkins:jenkins /var/lib/jenkins/.ssh/ 4.…

相交链表(数据结构)

160. 相交链表 - 力扣(LeetCode)https://leetcode.cn/problems/intersection-of-two-linked-lists/description/ 题目 解决思路 1,找到相交的点 相交链表的关键也就是找到相交的点,所以我们需要首先判断有没有相交的节点&#…

最新的云渲染100活动有哪些?渲染100邀请码1a12

随着科技的进步,云渲染已经成为设计行业的必备工具,各个云渲染平台为了吸引用户也推出各种各样的活动,今天我们以广受好评的渲染100为例,来说下它们的活动体系。 1、新用户活动 渲染100对新用户很友好,提供了充足的测…

K-RTD01和利时FW248中控卡件

K-RTD01和利时FW248中控卡件。 系统概述 的全称为保护工程师站及录波分析后台”是利用现代计算机和网络技术,K-RTD01和利时FW248中控卡件。实时收集变电站运行和故障信息,并通过对变电站的故障信息进行综合分析,K-RTD01和利时FW248中控卡件。…

Ps 滤镜:便条纸

Ps菜单:滤镜/滤镜库/素描/便条纸 Filter Gallery/Sketch/Note Paper 便条纸 Note Paper滤镜用于模拟手工纸张的质感和视觉效果。此滤镜将图像简化并添加浮雕和颗粒效果,使图像看起来像是在手工制作的纸上绘制或打印。 “便条纸”滤镜通过结合使用浮雕效果…

Copilot for Microsoft 365 扩充新增 16 种语言

最近,微软公司发布公告,进一步扩大 Copilot for Microsoft 365 语言支持,新增 16 种,支持的语言总数达到 25 种。 新支持的语言如下: 阿拉伯语 捷克语 丹麦语 荷兰语 芬兰语 希伯来语 匈牙利语 韩语 挪威语&am…

云动态摘要 2024-05-12

给您带来云厂商的最新动态,最新产品资讯和最新优惠更新。 最新优惠与活动 [免费试用]即刻畅享自研SaaS产品 腾讯云 2024-04-25 涵盖办公协同、营销拓客、上云安全保障、数据分析处理等多场景 云服务器ECS试用产品续用 阿里云 2024-04-14 云服务器ECS试用产品续用…

【解决】Android Studio Toast点击不显示

问题描述 开发Android程序过程中,突然发现在Android studio的模拟机上,运行测试程序,Toast弹框不能使用了,但是解决方法非常粗暴和直接:重新加载一个新的虚拟机或清空当前虚拟机的数据,然后再重启。 明显&a…