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.rhkb.cn/news/325455.html

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

相关文章

零基础学MySQL

1. 零基础学MySQL 1.1 数据库简介 1.1.1 数据库三层结构 1. 所谓安装Mysql数据库,就是在主机安装一个数据库管理系统(DBMS),这个管理程序可以管理多个数据库。DBMS(database manage system) 2. 一个数据库中可以创建多个表,以保存数据(信息)。 3. 数据…

网络工程师练习题

网络工程师练习题 网桥怎样知道网络端口连接了那些网站?如果从端口收到一个数据帧,则将其源地址记入该端口的数据库当网桥连接的局域网出现环路时怎么办?运行生成树协议阻塞一部分端口。使用IEEE 802.1q协议,最多可以配置4094个VLAN。VLAN中继协议(VTP)有不同的工作模式,…

深度学习--DCGAN

代码之后的注释和GAN的一样,大家如果已经掌握GAN,可以忽略掉哦!!! 在学习DCGAN之前,我们要先掌握GAN,深度学习--生成对抗网络GAN-CSDN博客 这篇博客讲的就是GAN的相关知识,还是很详…

JVM之运行时数据区

Java虚拟机在运行时管理的内存区域被称为运行时数据区。 程序计数器: 也叫pc寄存器,每个线程会通过程序计数器记录当前要执行的字节码指令的地址。程序计数器在运行时是不会发生内存溢出的,因为每个线程只存储一个固定长度的内存地址。 JAVA虚…

51基于单片机的温室大棚系统设计

设计摘要: 本设计旨在基于51单片机和蓝牙技术,实现一个功能完善的温室大棚系统。该系统具备以下主要功能:首先,通过连接的显示屏能够实时地显示当前的温度和湿度信息,方便用户了解温室内的环境变化。其次,…

Neo4j 之安装和 CQL 基本命令学习

正常使用结构化的查询语言 SQL(Structured Query Language)较多一些,但是像 Neo4j 这种非结构化的图形数据库来说,就不得不学习下 CQL(Cypher Query Language)语言了。如果你之前学过 《离散数学》或《图论…

使用SPI驱动串行LCD的驱动实现(STM32F4)

目录 概述 1. 硬件介绍 1.1 ST7796-LCD 1.2 MCU IO与LCD PIN对应关系 2 功能实现 2.1 使用STM32Cube配置Project 2.2 STM32Cube生成工程 3 代码实现 3.1 SPI接口实现 3.2 LCD驱动程序实现 3.3 测试程序实现 4 测试 源代码下载地址: https://gitee.com/mf…

常用Linux命令详细总结

一、文档编辑、过滤、查看命令 1、cp 复制文件和目录 -a 复制文件并保持文件属性 -d 若源文件为链接文件,则复制链接文件属性而非文件本身 -i 覆盖文件前提示,如果不要提示,在命令前加上\ -r 递归复制,通常用于目录的复制 …

C++的数据结构(三):栈

栈(Stack)是一种后进先出(LIFO, Last In First Out)的数据结构,它只允许在一端(称为栈顶)进行插入和删除操作。栈的这种特性使得它在解决函数调用、括号匹配、表达式求值等问题时具有天然的优势…

SpringCloud 2023.0.1

本文介绍如何使用 springboot3及cloud2023 进行微服务模块化开发 采用父-module 模块开发 父工程 demo-java pom.xml <!--配置 springboot的依赖的版本号, 方便 module 进行继承--><dependencyManagement><dependencies><!--增加 springboot的依赖--&g…

宝塔安装多个版本的PHP,如何设置默认的PHP版本

如何将默认的PHP版本设置为7.3.32&#xff0c; 创建软链接指向7.3版本&#xff0c;关键命令&#xff1a;ln -sf /www/server/php/73/bin/php /usr/bin/php 然后再查看PHP版本验证一下结果 [rootlocalhost ~]# ln -sf /www/server/php/73/bin/php /usr/bin/php [rootlocalho…

zabbix“专家坐诊”第238期问答

问题一 Q&#xff1a;请问一下 zabbix 如何监控服务器端口的出和入流量?就类似iftop这样的。 A&#xff1a;可以用snmp去监控。 问题二 Q&#xff1a;各位有什么工具能导出zabbix主机列表成execl格式吗&#xff1f; A&#xff1a;进mysql&#xff0c;到hostid&#xff0c;然…

WEB后端复习——监听器、过滤器

Listener监听器 是Servlet规范中定义的一种特殊类&#xff0c;它用于监听web应用程序中的ServletContext, HttpSession和ServletRequest等域对象的创建与销毁事件&#xff0c;以及监听这些域对象中的属性发生修改的事件。 注解WebListener 1.ServletContextListener 监听Serv…

Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告

这篇文章主要介绍了Python3 Appium 安卓模拟器实现APP自动化测试并生成测试报告,本文给大家介绍的非常详细&#xff0c;对大家的学习或工作具有一定的参考借鉴价值&#xff0c;需要的朋友可以参考下 本文主要分为以下几个部分 安装Python3 安装Python3的Appium库 安装Andr…

K-CU12和利时工控单元

K-CU12和利时工控单元。控制策略组态&#xff0c;使用专用的组态软件 人机界面HMI设计&#xff1a;操作员站画面设计&#xff0c;使用专用的组态软件 K-CU12和利时工控单元文件组态 2文档管理软件 在工程师站上进行系统组态的主要工作&#xff1a; K-CU12和利时工控单元。系统配…

【全开源】Fastflow工作流系统(源码搭建/上线/运营/售后/维护更新)

一款基于FastAdminThinkPHP开发的可视化工作流程审批插件&#xff0c;帮助用户基于企业业务模式和管理模式自行定义所需的各种流程应用&#xff0c;快速构建企业自身的流程管控体系&#xff0c;快速融合至企业协同OA办公系统。 提供全部无加密服务端源码和前端源代码&#xff0…

如何在 Linux / Ubuntu 上下载和安装 JMeter?

Apache JMeter 是一个开源的负载测试工具&#xff0c;可以用于测试静态和动态资源&#xff0c;确定服务器的性能和稳定性。在本文中&#xff0c;我们将讨论如何下载和安装 JMeter。 安装 Java&#xff08;已安装 Java 的此步骤可跳过&#xff09; 安装 Java 要下载 Java&…

【计算机网络篇】数据链路层(10)在物理层扩展以太网

文章目录 &#x1f354;扩展站点与集线器之间的距离&#x1f6f8;扩展共享式以太网的覆盖范围和站点数量 &#x1f354;扩展站点与集线器之间的距离 &#x1f6f8;扩展共享式以太网的覆盖范围和站点数量 以太网集线器一般具有8~32个接口&#xff0c;如果要连接的站点数量超过了…

使用Three.js绘制快速而逼真的水

本文将利用GPUComputationRenderer来实现水波纹的绘制&#xff0c;相似的案例可以看threejs官方的GPGPU Water示例。更多精彩内容尽在数字孪生平台。 什么是 GPGPU GPGPU代表通用图形处理单元&#xff08;General-Purpose Graphic Processing Unit&#xff09;&#xff0c;意思…

从0开始linux(2)——热键、如何查阅手册

欢迎来到博主的专栏——从0开始linux 博主ID&#xff1a;代码小豪 博主使用的linux发行版&#xff1a;CentOS 7.6 文章目录 热键[Tab]热键Ctrl cshift[pageup]和[pagedown] 查阅手册\-\-help在线手册maninfo手册 热键 我们的命令行模式中存在很多的组合热键&#xff0c;这些按…