JavaScript 中的原型和原型链
JavaScript 中的原型和原型链也是一个相对较难理解透彻的知识点，下面结合详细例子来进行说明：
一、原型的概念
在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性指向一个对象，这个对象就是所谓的 “原型对象”。当通过构造函数创建一个新的实例对象时，该实例对象会自动拥有一个指向构造函数原型对象的内部属性（在大多数浏览器中可以通过 proto 来访问这个内部属性，虽然它并非标准属性，但方便理解）。
例如：
function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.sayHello = function () {console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};let john = new Person('John', 30);
john.sayHello();
// 输出：Hello, my name is John and I'm 30 years old.
在这个例子中：
首先定义了一个 Person 函数作为构造函数，用来创建 Person 类型的实例。
然后给 Person 函数的 prototype 属性添加了一个 sayHello 方法。
当通过 new Person(‘John’, 30) 创建了 john 这个实例后，john 本身并没有 sayHello 这个方法的定义，但是它可以通过内部的 proto 属性（指向 Person.prototype）找到并调用 sayHello 方法。
二、原型链的形成
当在一个对象上访问某个属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 就会自动沿着它的原型链去查找。原型链就是由对象的 proto 属性连接起来的一系列对象。
继续上面的例子，假设我们有这样一个情况：
function Employee(name, age, department) {Person.call(this, name, age);this.department = department;
}Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;Employee.prototype.sayDepartment = function () {console.log(`I work in the ${this.department} department.`);
};let jane = new Employee('Jane', 25, 'Engineering');
jane.sayHello();
// 输出：Hello, my name is Jane and I'm 25 years old.
jane.sayDepartment();
// 输出：I work in the Engineering department.
在这个例子中：
首先定义了 Employee 函数作为构造函数来创建 Employee 类型的实例，并且在构造函数内部通过 Person.call(this, name, age) 调用了 Person 构造函数，以便让 Employee 实例继承 Person 实例的 name 和 age 属性。
然后通过 Employee.prototype = Object.create(Person.prototype) 让 Employee 的原型对象继承自 Person 的原型对象，这样 Employee 实例就可以沿着原型链找到 Person 原型对象上的方法（如 sayHello）。同时，重新设置了 Employee.prototype.constructor 为 Employee，以保证构造函数的正确性。
最后给 Employee 原型对象添加了 sayDepartment 方法。
当我们在 jane（Employee 实例）上调用 sayHello 方法时，jane 本身没有 sayHello 方法，它会通过自己的 proto 属性（此时指向 Employee.prototype）找不到，就继续沿着 Employee.prototype 的 proto（因为 Employee.prototype = Object.create(Person.prototype)，所以 Employee.prototype.proto 指向 Person.prototype）找到 Person.prototype 上的 sayHello 方法并调用。
三、原型链的查找顺序
为了更清楚地展示原型链的查找顺序，我们再看一个例子：
function Animal() {}
Animal.prototype.eat = function () {console.log('Eating...');
};function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function () {console.log('Woof!');
};let myDog = new Dog();
myDog.eat();
// 输出：Eating...
myDog.bark();
// 输出：Woof!// 查看原型链
console.log(myDog.__proto__ === Dog.prototype);
// 输出：true
console.log(myDog.__proto__.__proto__ === Animal.prototype);
// 输出：true
console.log(myDog.__proto__.__proto__.__proto__ === Object.prototype);
// 输出：true
console.log(myDog.__proto__.__proto__.__proto__.__proto__ === null);
// 输出：true
在这个例子中：
定义了 Animal 函数和其原型对象上的 eat 方法。
定义了 Dog 函数，并让其原型对象继承自 Animal 原型对象，同时在 Dog 原型对象上添加了 bark 方法。
当创建了 myDog 这个 Dog 实例后，在 myDog 上调用 eat 方法时，首先 myDog 本身没有 eat 方法，它会沿着原型链查找。先通过 myDog.proto（指向 Dog.prototype）找不到，再通过 myDog.proto.proto（指向 Animal.prototype）找到并调用 eat 方法。同样，调用 bark 方法时，在 myDog 本身找不到，通过 myDog.proto 就能找到并调用。
从 myDog 的原型链可以看出，查找顺序是先在实例本身查找，然后沿着 proto 指向的对象依次查找，一直到 Object.prototype，最后 Object.prototype.proto 为 null，表示原型链的尽头。
四、原型和原型链的难点
概念的抽象性：原型和原型链涉及到对象、函数、构造函数、原型对象等多个概念的相互关系，理解起来比较抽象。例如，要清楚地区分函数的 prototype 属性和实例对象的 proto 属性，以及它们之间是如何相互作用来实现属性和方法的继承的，这对于初学者来说并不容易。
复杂的继承关系：当涉及到多层继承时，如上面例子中的 Employee 继承自 Person，再加上可能还有更多层的继承关系，要准确把握每个实例沿着原型链查找属性和方法的路径以及如何正确设置继承关系（比如通过 Object.create 等方式），这需要对原型链的机制有深入的理解。
与其他语言的差异：对于有其他编程语言背景的开发者来说，JavaScript 的原型继承方式与基于类的继承（如 Java、C++ 等）有很大的不同。在基于类的继承中，继承关系通常是通过类的定义和关键字（如 extends）来明确规定的，而 JavaScript 是通过原型和原型链这种相对更灵活但也更抽象的方式来实现继承的，所以习惯了类继承的开发者可能会觉得难以适应。
原型和原型链在 JavaScript 中是非常重要的概念，虽然理解起来有一定难度，但掌握它们对于深入理解 JavaScript 的对象系统以及编写高效、灵活的代码至关重要。
相关文章：
JavaScript 中的原型和原型链
JavaScript 中的原型和原型链也是一个相对较难理解透彻的知识点，下面结合详细例子来进行说明： 一、原型的概念 在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性指向一个对象，这个对象就是所谓的 “原型对…...
tensorflow.python.framework.errors_impl.FailedPreconditionError
以下是我的报错 Traceback (most recent call last):File "e:\tool\anaconda\envs\openmmlab\lib\runpy.py", line 194, in _run_module_as_mainreturn _run_code(code, main_globals, None,File "e:\tool\anaconda\envs\openmmlab\lib\runpy.py", line 8…...
lua-cjson 例子
apt install -y lua-cjson 安装 编辑 tmp.lua cjson require "cjson" p 666 d "23.42" payload{"d":[{"pres":..(p)..,"temp":"..(d).."}]} print("payload " .. payload) j cjson.decode(payloa…...
《白帽子讲Web安全》15-16章
《白帽子讲Web安全》15-16章 《白帽子讲Web安全》15章15、Web Server配置安全15.1、Apache安全15.2、Nginx安全15.3、jBoss远程命令执行15.4、Tomcat远程命令执行15.5、HTTP Parameter Pollution15.6、小结 第四篇 互联网公司运营安全《白帽子讲Web安全》16章16、互联网业务安全…...
挑战用React封装100个组件【001】
项目地址 https://github.com/hismeyy/react-component-100 组件描述 组件适用于需要展示图文信息的场景，比如产品介绍、用户卡片或任何带有标题、描述和可选图片的内容展示 样式展示 代码展示 InfoCard.tsx import ./InfoCard.cssinterface InfoCardProps {ti…...
在 macOS 上安装 MongoDB Community Edition
https://www.mongodb.com/zh-cn/docs/manual/tutorial/install-mongodb-on-os-x/...
网络安全运行与维护高级 - 题库汇总百题
1. 单选题 内部信息安全管理组织中的（）担负保护系统安全的责任，但工作重点偏向于监视系统的运行情况，并且对安全管理制度的贯彻执行情况进行监督和检查。 A. 安全审查和决策机构 B. 安全主管机构 C. 安全运行维护机构 D. 安全审计机构 正确答案：D 2. 单选题 下列那…...
在html页面显示一个变量，而这个变量中有xss脚本，如何安全的把这个变量原样展示出来
当你想要在HTML页面安全地展示一个可能包含XSS（跨站脚本攻击）脚本的变量原样内容时，可以通过以下几种常见的方式来实现安全展示： 方法一：使用文本节点 在JavaScript中，当你要将变量插入到HTML页面的某个元…...
【Linux】TCP网络编程
目录 V1_Echo_Server V2_Echo_Server多进程版本 V3_Echo_Server多线程版本 V3-1_多线程远程命令执行 V4_Echo_Server线程池版本 V1_Echo_Server TcpServer的上层调用如下，和UdpServer几乎一样： 而在InitServer中，大部分也和UDP那里一样&…...
openGauss你计算的表大小，有包含toast表么？
openGauss你计算的表大小，有包含toast表么？ 最近有一个同事问我说“openGauss中pg_relation_size函数在计算表的大小时是否包含了大字段的大小？”，经过思考后，自己觉得表的大小是不包含大字段的大小的，然后…...
Python字典的用法（定义、增加、删除、修改、查询、遍历）
一.字典的介绍 dictionary（字典）是除了列表以外的 Python 中最灵活的数据类型。dict（字典）可以采用多个数据，通常用于存储描述一个物体的相关信息。 字典和列表最主要的区别是，字典是无序的对象集合&#x…...
分布式锁的实现原理
作者：来自 vivo 互联网服务器团队- Xu Yaoming 介绍分布式锁的实现原理。 一、分布式锁概述 分布式锁，顾名思义，就是在分布式环境下使用的锁。众所周知，在并发编程中，我们经常需要借助并发控制工具，如 mute…...
linux（centos） 环境部署，安装JDK，docker（mysql, redis,nginx,minio,nacos）
目录 1.安装JDK (非docker)1.1 将文件放在目录下： /usr/local/jdk1.2 解压至当前目录1.3 配置环境变量 2.安装docker2.1 验证centos内核2.2 安装软件工具包2.3 设置yum源2.4 查看仓库中所有docker版本，按需选择安装2.5 安装docker2.6 启动docker 并 开机…...
批量生成不同用户的pdf 文件（html样式）
技术 selenium thymeleaf itextpdf chromedriver 使用thymeleaf 将动态数据替换 使用selenium chromedriver 进行js ，css等逻辑运算后渲染视图 使用itextpdf 将html 转为pdf 文件 html模板 <!DOCTYPE html> <html xmlns:th"http://www.thymeleaf…...
常见的排序算法
一、基于比较的排序算法 基于比较的排序算法通过比较元素之间的大小来完成排序。 1.1 冒泡排序（Bubble Sort） 特点：通过多次交换相邻元素，将最大（或最小）元素“冒泡”到序列末端。时间复杂度：…...
从语法、功能、社区和使用场景来比较 Sass 和 LESS
一：可以从语法、功能、社区和使用场景来比较 Sass 和 LESS： 1：语法 原始的 Sass 采用的是缩进而不是大括号，后续的 Sass 版本与 LESS 一样使用与 CSS 类似的语法： address {.fa.fa-mobile-phone {margin: 0 3px 0 2…...
hdlbits系列verilog解答（Exams/m2014 q4b）-87
文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 本节学习如何实现下图中的电路。 模块声明 module top_module ( input clk, input d, input ar, // asynchronous reset output q); 思路： 只是实现一种带异步复位的D触发器。 时钟边沿两种触发方式的关键字…...
Python 和 Pyecharts 对Taptap相关数据可视化分析
结果展示： 数据来源： Python爬取TapTap 热门游戏信息并存储到数据库（详细版） 目录 结果展示： 数据来源： Python爬取TapTap 热门游戏信息并存储到数据库（详细版 一、引言 二、准备工作 三、…...
系统学习算法： 专题二 滑动窗口
题目一： 算法原理： 依然第一反应是暴力枚举，将所有的子数组都枚举出来，找到满足条件的长度最小的子数组，但是需要两层循环，时间复杂度来到O（N^2） 接下来就该思考如何进行优化 如果…...
Docker的save和export命令的区别,load和import的区别 笔记241124
Docker的save和export命令的区别,load和import的区别 解说1: Docker的save和export命令，以及load和import命令，在功能和使用场景上存在显著的区别。以下是对这两组命令的详细对比和解释： Docker save和export命令的区别 使用方式和目的&am…...
cad中为什么不使用C0C1C2连续，而使用G0G1G2连续
在CAD中，之所以使用G0、G1、G2连续而不是C0、C1、C2连续，主要是因为G连续性更侧重于几何空间的连续性，与视觉感知和制造过程更为相关。 • G0连续：保证曲线或曲面在连接点处没有断开，即位置连续。这在CAD中非常重要&a…...
Linux：makefile的使用
makefile小结： makefile的应用： 一个简单的 Makefile 文件包含一系列的“规则”，其样式如下： 目标(target)…: 依赖(prerequiries)… 命令(command) 目标(target)通常是要生成的文件的名称，可以是可执行文件或OBJ文件…...
局域网的网络安全
网络安全 局域网基本上都采用以广播为技术基础的以太网，任何两个节点之间的通信数据包，不仅为这两个节点的网卡所接收，也同时为处在同一以太网上的任何一个节点的网卡所截取。因此，黑客只要接入以太网上的任一节点进行侦听&#…...
【Leetcode 每日一题 - 补卡】3235. 判断矩形的两个角落是否可达
问题背景 给你两个正整数 x C o r n e r xCorner xCorner 和 y C o r n e r yCorner yCorner 和一个二维整数数组 c i r c l e s circles circles，其中 c i r c l e s [ i ] [ x i , y i , r i ] circles[i] [x_i, y_i, r_i] circles[i][xi,yi,ri] 表示…...
Android Studio安装TalkX AI编程助手
文章目录 TalkX简介编程场景 TalkX安装TalkX编程使用ai编程助手相关文章 TalkX简介 TalkX是一款将OpenAI的GPT 3.5/4模型集成到IDE的AI编程插件。它免费提供特定场景的AI编程指导，帮助开发人员提高工作效率约38%，甚至在解决编程问题的效率上提升超过2倍…...
C++类型转换
C类型转换 1.C语言中的类型转换2.C强制类型转换2.1.static_cast2.2.reinterpret_cast2.3.const_cast2.4.dynamic_cast 3.RTTI 🌟🌟hello，各位读者大大们你们好呀🌟🌟 🚀🚀系列专栏：【…...
241127学习日志——[CSDIY] [InternStudio] 大模型训练营 [20]
CSDIY：这是一个非科班学生的努力之路，从今天开始这个系列会长期更新，（最好做到日更），我会慢慢把自己目前对CS的努力逐一上传，帮助那些和我一样有着梦想的玩家取得胜利！！&…...
关于函数式接口和编程的解析和案例实战
文章目录 匿名内部类“匿名”在哪里 函数式编程lambda表达式的条件Supplier使用示例 ConsumeracceptandThen使用场景 FunctionalBiFunctionalTriFunctional 匿名内部类 匿名内部类的学习和使用是实现lambda表达式和函数式编程的基础。是想一下，我们在使用接口中的方…...
基于米尔全志T527开发板的FacenetPytorch人脸识别方案
本篇测评由优秀测评者“小火苗”提供。 本文将介绍基于米尔电子MYD-LT527开发板（米尔基于全志 T527开发板）的FacenetPytorch人脸识别方案测试。 一、facenet_pytorch算法实现人脸识别 深度神经网络 1.简介 Facenet-PyTorch 是一个基于 PyTorch 框架实…...
和Runtime.gc()的作用？)
Java基础面试题11：简述System.gc()和Runtime.gc()的作用？
System.gc() 和 Runtime.gc() 是 Java 中用于提示 JVM（Java 虚拟机）进行垃圾回收的两个方法。它们的作用类似，但也有一些细微的区别。下面我们来详细说明。 System.gc() 和 Runtime.gc() 的区别 简单来说，System.gc() 等同于 Run…...
物料理解笔记·蓝白段子线·端子线座子焊接反了怎么处理！！！
目录 蓝白端子排线 端子线座子焊接错了怎么办 端子线如何拆线 编写不易，请勿搬运，仅供学习，感谢理解 蓝白端子排线 蓝白端子排线，这种端子线常用与编码电机的接线，或者在板子上通过提供段子线的接口，通…...
string接口模拟实现2
文章目录 浅拷贝insert插入一个字符insert插入一个字符串删除erasefind(查找一个字符)\\\\\\\find(查找一个字符串:子串substr)查找的练习（网址）赋值operator比较大小 浅拷贝 //浅拷贝string::string(const string& str){//开一样大的空间࿰…...
第 42 章 - Go语言 设计模式
在Go语言中，设计模式是一种被广泛接受的解决常见问题的最佳实践。这些模式可以分为三类：创建型模式、结构型模式和行为型模式。下面我将结合案例以及源代码对这三种类型的设计模式进行详细讲解。 创建型模式 创建型模式主要关注对象的创建过程…...
使用redis-plus-plus库连接redis
使用redis-plus-plus库连接redis 一、安装redis-plus-plus1.1安装hiredis1.2编译安装redis-plus-plus 二、redis的连接使用2.1创建redis对象2.2向redis中添加元素2.3判断元素是否存在2.4获取元素2.5设置获取过期时间2.6获取类型2.7 删除当前数据库 一、安装redis-plus-plus C …...
qt QGraphicsRotation详解
1、概述 QGraphicsRotation 是 Qt 框架中 QGraphicsTransform 的一个子类，它专门用于处理图形项的旋转变换。通过 QGraphicsRotation，你可以对 QGraphicsItem（如形状、图片等）进行旋转操作，从而创建动态和吸引人的视觉…...
嵌入式Qt使用ffmpeg视频开发记录
在此记录一下Qt下视频应用开发的自学历程，可供初学者参考和避雷。 了解常用音频格式yuv420p、h264等了解QML，了解QVideoOutput类的使用，实现播放yuv420p流参考ffmpeg官方例程，调用解码器实现h264解码播放 不需要手动分帧。ffmpeg…...
《String类》
目录 一、定义与概述 二、创建字符串对象 2.1 直接赋值 2.2 使用构造函数 三、字符串的不可变性 四、常用方法 4.1 String对象的比较 4.1.1 比较是否引用同一个对象 4.1.2 boolean equals(Object anObject)方法：按照字典序比较 4.1.3 int compareTo(Strin…...
Java—Properties类
Properties类是Java中用于处理属性文件（.properties文件）的类。属性文件是一种简单的文本文件，用于存储键值对数据，常用于保存配置信息。 Properties类继承自Hashtable类，它的键和值都是字符串类型。它提供了一些方法…...
wireshark抓包TR069协议
Wireshark是一个网络协议分析器，它允许用户捕获和详细查看网络流量。TR069协议是CPE（Customer Premises Equipment，用户驻地设备）和ACS（Auto-Configuration Server，自动配置服务器）之间沟通的通…...
【连接池】.NET开源 ORM 框架 SqlSugar 系列
.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…...
FileReader和 FileWriter
FileReader和FileWriter是用于操作文件的类，它们分别用于读取和写入数据。下面是它们的一些基本用法： FileReader： 创建一个FileReader对象，指定要读取的文件路径。使用read()方法读取文件的内容，返回一个整数字符表…...
html 中的 ＜code＞标签
定义和用途 <code> 标签是HTML中的一个内联元素，用于定义计算机代码片段。当你需要在网页内容中展示代码，比如编程语言代码（如JavaScript、Python、Java等）、命令行指令、标记语言代码（如HTML、XML等）…...
使用Apache HttpClient发起一个POST HTTP请求
Apache HttpClient 是一个强大的Java库，用于处理HTTP请求。 它支持多种HTTP方法，包括GET、POST、PUT、DELETE等。 本教程将重点介绍如何使用Apache HttpClient发送POST HTTP请求。 POST请求通常用于向服务器发送数据以创建或更新资源。 我们将演示如…...
Android复习代码1-4章
public class RudioButton extends AppCompatActivity {Overrideprotected void onCreate(Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_rudio_button);// 找到RadioGroup和TextView的实例RadioGroup radioGrou…...
CSS新特性（11）
一.计算盒子宽度calc函数，可以用加减乘除来计算 -*/ 让父盒子永远比子盒子小30像素 二.CSS3过渡transition搭配hover一起使用 该盒子宽度可以从200px到400px,谁做变化给谁加 不仅要写宽还要写高利用逗号，多个属性一起写都用逗号 既想要宽度变又想要高度…...
架构-微服务-服务网关
文章目录 前言一、网关介绍1. 什么是API网关2. 核心功能特性3. 解决方案 二、Gateway简介三、Gateway快速入门1. 基础版2. 增强版3. 简写版 四、Gateway核心架构1. 基本概念2. 执行流程 五、Gateway断言1. 内置路由断言工厂2. 自定义路由断言工厂 六、过滤器1. 基本概念2. 局部…...
Leetcode（区间合并习题思路总结，持续更新。。。）
讲解题目：合并区间 以数组 intervals 表示若干个区间的集合，其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间， 并返回一个不重叠的区间数组，该数组需恰好覆盖输入中的所有区间。示例 1：输入&a…...
11.21c++中的函数
练习： 编写mystring类：拥有以下功能： 1.带参、无参构造函数，拷贝构造函数，析构函数 2.编写 append(const mystring r) 为当前字符串尾部，拼接新的字符串r 3.编写 isEqual(const mystring r) 判断当前字符串…...
)
Rook入门：打造云原生Ceph存储的全面学习路径(下)
文章目录 六.Rook部署云原生CephFS文件系统6.1 部署cephfs storageclass6.2 创建容器所需cephfs文件系统6.3创建容器pod使用rook-cephfs提供pvc6.4 查看pod是否使用rook-cephfs 七.Ceph Dashboard界面7.1 启用dashboard开关7.2 ceph-dashboard配置外部访问7.3 Dashboard web ad…...
UI控件使用说明
文章目录 一、控件的公共属性二、常用控件的私有属性三、控件的显示与隐藏 一、控件的公共属性 struct element {u32 highlight: 1; //高亮标志u32 state: 3; //内核记录控件的状态u32 ref: 5; //内核计数值u32 prj: 3; //工程序号u32 hide_action: 1; //HIDE_WI…...