揭秘原型链：探索 JavaScript 面向对象编程的核心（上）

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 一、引言
    • 原型链的定义和背景
    • 原型链在 JavaScript 中的重要性
  • 二、原型链的基本概念
    • 对象原型
    • 原型链的结构
  • 三、原型链的工作原理
    • 继承和属性共享
    • 原型链的查询过程
  • 四、原型链的应用

一、引言

原型链的定义和背景

原型链是 JavaScript 中一种用于实现继承和共享属性的机制。
它基于原型对象和原型链的概念，允许对象之间共享属性和方法。

在 JavaScript 中，每个对象都有一个原型对象（Prototype），它是一个包含该对象的属性和方法的对象。当你访问一个对象的属性或方法时，如果该对象本身没有定义这个属性或方法，那么 JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

原型链的背景是为了实现继承和代码复用。在 JavaScript 中，没有像其他面向对象语言中的类继承机制，而是通过原型链来实现继承。通过将一个对象的原型对象设置为另一个对象，就可以实现继承，从而使子对象可以访问父对象的属性和方法。

原型链的工作方式可以用下面的图来表示：

Object ---> Person ---> Employee

在这个例子中，Person 是 Employee 的原型对象，Employee 可以访问 Person 中的属性和方法。同样，Object 是所有对象的原型对象，因此 Person 和 Employee 都可以访问 Object 中的属性和方法。

原型链是 JavaScript 中非常重要的概念，它对于实现继承、代码复用和对象的扩展都非常有用。理解原型链的工作原理对于深入理解 JavaScript 的面向对象编程特性非常重要。

原型链在 JavaScript 中的重要性

原型链在 JavaScript 中具有重要的作用，主要体现在以下几个方面：

  1. 实现继承：原型链是 JavaScript 中实现继承的主要机制。通过将一个对象的原型对象设置为另一个对象，可以实现子对象继承父对象的属性和方法。这种继承方式可以实现代码的复用和扩展，提高了开发效率。

  2. 共享属性和方法：原型链允许对象之间共享属性和方法。当多个对象需要共享相同的属性或方法时，可以将这些属性或方法定义在一个原型对象中，然后将该原型对象作为这些对象的原型。这样，所有的子对象都可以访问和使用这些共享的属性和方法，避免了代码的重复定义。

  3. 动态扩展对象：原型链使得对象可以在运行时动态地扩展。通过向原型对象中添加属性或方法，可以在不修改原始对象的情况下为其添加新的功能。这种动态扩展对象的能力提高了代码的灵活性和可维护性。

  4. 理解面向对象编程：原型链是理解 JavaScript 面向对象编程的关键概念之一。它提供了一种不同于其他面向对象语言中的类继承机制的方式，帮助开发者更好地理解 JavaScript 中的对象、属性和方法的关系。

在这里插入图片描述

总之，原型链在 JavaScript 中扮演着重要的角色，它提供了一种灵活、高效的方式来实现继承、共享属性和方法，以及动态扩展对象。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

二、原型链的基本概念

对象原型

在 JavaScript 中，对象原型（Object Prototype）是指一个对象用于定义其他对象的属性和方法的模板。每个对象都有一个关联的原型对象，它可以被用来共享属性和方法，从而实现继承和代码复用。

当你创建一个新的对象时，它会自动继承其原型对象的属性和方法。你可以通过对象的 __proto__ 属性来访问其原型对象，也可以通过 Object.getPrototypeOf() 方法来获取对象的原型对象。

原型对象本身也是一个对象，它可以有自己的属性和方法。当你访问一个对象的属性或方法时，如果该对象本身没有定义这个属性或方法，JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

通过原型链，你可以实现对象之间的继承。一个对象可以将另一个对象作为其原型，从而继承该对象的属性和方法。这种继承方式与其他面向对象语言中的类继承机制不同，它是基于原型对象的继承。

原型链在 JavaScript 中非常重要，它是实现继承、共享属性和方法、动态扩展对象等功能的基础。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

原型链的结构

原型链是一个由对象和它们的原型对象组成的链，用于实现继承和共享属性和方法。

下面是一个简单的示例来展示原型链的结构：

// 创建一个 Person 类
function Person(name, age) {this.name = name;this.age = age;
}// 创建一个 Employee 类，继承自 Person 类
function Employee(salary) {Person.call(this, "John", 30); // 调用 Person 类的构造函数this.salary = salary;
}// 为 Person 类添加一个方法
Person.prototype.getInfo = function() {return `姓名：${this.name}，年龄：${this.age}`;
};// 为 Employee 类添加一个方法
Employee.prototype.getSalary = function() {return this.salary;
};// 创建 Person 对象和 Employee 对象
const person = new Person("John", 30);
const employee = new Employee(5000);// 访问对象的属性和方法
console.log(person.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getSalary()); // 输出：5000

在这个示例中，我们创建了两个类：Person 和 Employee。Employee 类继承自 Person 类，通过调用 Person 类的构造函数来初始化 Employee 对象的属性。

每个类都有一个原型对象，它是一个用于共享属性和方法的模板。在这个例子中，Person.prototype 和 Employee.prototype 分别是 Person 类和 Employee 类的原型对象。

当我们创建 person 和 employee 对象时，它们会自动继承其类的原型对象的属性和方法。因此，person 对象可以访问 Person.prototype 上的 getInfo 方法，而 employee 对象可以访问 Person.prototype 上的 getInfo 方法以及 Employee.prototype 上的 getSalary 方法。

原型链的结构可以用下面的图来表示：

Person.prototype -> Person
Employee.prototype -> Person.prototype -> Object.prototype -> null
person -> Employee.prototype -> Person.prototype -> Object.prototype -> null
employee -> Employee.prototype -> Person.prototype -> Object.prototype -> null

在这个图中，每个对象都有一个指向其原型对象的指针（__proto__ 属性），从而形成了一个原型链。当访问一个对象的属性或方法时，如果该对象本身没有定义这个属性或方法，JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

通过原型链，我们可以实现继承、共享属性和方法、动态扩展对象等功能。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

三、原型链的工作原理

继承和属性共享

在 JavaScript 中，继承和属性共享是通过原型链实现的。

继承是指一个类（子类）可以从另一个类（父类）中继承属性和方法。子类可以访问父类的属性和方法，并且可以根据需要覆盖或扩展这些属性和方法。在上面的示例中，Employee 类从 Person 类继承了属性和方法，因此 employee 对象可以访问 Person 类的属性和方法。

属性共享是指多个对象可以共享相同的属性和方法。这是通过原型对象实现的。原型对象是一个用于共享属性和方法的模板，所有的子类对象都可以访问原型对象上的属性和方法。在上面的示例中，Person.prototype 和 Employee.prototype 分别是 Person 类和 Employee 类的原型对象，它们用于共享属性和方法。

当我们创建 person 和 employee 对象时，它们会自动继承其类的原型对象的属性和方法。因此，person 对象可以访问 Person.prototype 上的 getInfo 方法，而 employee 对象可以访问 Person.prototype 上的 getInfo 方法以及 Employee.prototype 上的 getSalary 方法。

通过原型链，我们可以实现继承和属性共享，从而提高代码的复用性和可扩展性。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

原型链的查询过程

原型链的查询过程是指当访问一个对象的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

以下是一个简单的示例来演示原型链的查询过程：

function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.getInfo = function() {return `姓名：${this.name}，年龄：${this.age}`;
};function Employee(salary) {Person.call(this, "John", 30); // 调用 Person 类的构造函数this.salary = salary;
}Employee.prototype = Object.create(Person.prototype); // 将 Employee 的原型对象设置为 Person 的原型对象
Employee.prototype.getSalary = function() {return this.salary;
};const person = new Person("John", 30);
const employee = new Employee(5000);console.log(person.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getSalary()); // 输出：5000

在这个示例中，我们创建了两个类：Person 和 Employee。Employee 类继承自 Person 类，通过调用 Person 类的构造函数来初始化 Employee 对象的属性。

每个类都有一个原型对象，它是一个用于共享属性和方法的模板。在这个例子中，Person.prototype 和 Employee.prototype 分别是 Person 类和 Employee 类的原型对象。

当我们创建 person 和 employee 对象时，它们会自动继承其类的原型对象的属性和方法。因此，person 对象可以访问 Person.prototype 上的 getInfo 方法，而 employee 对象可以访问 Person.prototype 上的 getInfo 方法以及 Employee.prototype 上的 getSalary 方法。

当我们访问 person.getInfo() 或 employee.getInfo() 时，JavaScript 会沿着原型链向上查找，直到找到定义了该方法的原型对象。在这个例子中，Person.prototype.getInfo() 方法被找到并执行，因此输出结果为 姓名：John，年龄：30。

当我们访问 employee.getSalary() 时，同样的过程会发生，但是这次 JavaScript 会在 Employee.prototype 上找到定义了该方法的原型对象，并执行 Employee.prototype.getSalary() 方法，因此输出结果为 5000。

通过原型链，我们可以实现继承、共享属性和方法、动态扩展对象等功能。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

四、原型链的应用

  • 实现继承
  • 共享属性和方法

在这里插入图片描述

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

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

相关文章

第九节HarmonyOS 常用基础组件2-Image

第九节HarmonyOS 常用基础组件2-Image

一、组件介绍 组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI声名式为开发者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。 组件根据功能可以分为以下五大类：基础组件…
阅读更多...
SmartSoftHelp8，Web前端性能提升，js，css，html 优化压缩工具

SmartSoftHelp8，Web前端性能提升，js，css，html 优化压缩工具

Web前端js，css，html 优化压缩工具 提高web 前端性能，访问速度优化专业工具 CSS，js，html 单文件，多文件 单个，批量压缩优化 web前端优化：减少空格，体积压缩&#xff0…
阅读更多...
基于算能的国产AI边缘计算盒子8核心A53丨17.6Tops算力

基于算能的国产AI边缘计算盒子8核心A53丨17.6Tops算力

边缘计算盒子 8核心A53丨17.6Tops算力 ● 可提供17.6TOPS（INT8）的峰值计算能力、2.2TFLOPS（FP32）的高精度算力，单芯片最高支持32路H.264 & H.265的实时解码能力。 ● 适配Caffe/TensorFlow/MxNet/PyTorch/ ONNX/…
阅读更多...
面试数据库八股文十问十答第一期

面试数据库八股文十问十答第一期

面试数据库八股文十问十答第一期 作者：程序员小白条，个人博客 1.MySQL常见索引、 MySQL常见索引有: 主键索引、唯一索引、普通索引、全文索引、组合索引(最左前缀)主键索引特点：唯一性，非空，自增（如果使用…
阅读更多...
Ubuntu 安装 MySQL8 配置、授权、备份、远程连接

Ubuntu 安装 MySQL8 配置、授权、备份、远程连接

目录 0100 系统环境0200 下载0300 安装0400 服务管理0401 关闭、启动、重启服务0402 查看服务状态 0500 查看配置文件0600 账号管理0601 添加账号0602 删除账号0603 修改密码0604 忘记root密码 0700 自动备份0800 远程访问 0100 系统环境 [rootlocalhost ~]# cat /proc/versio…
阅读更多...
AD生产BOM表时如何隐藏不需要的器件记录

AD生产BOM表时如何隐藏不需要的器件记录

在完成图纸设计号通常需要生产BOM表，以便采购等，如果不做一些操作，往往输出的BOM表中包含一些非需要采购的器件，如下图 这时就需要对原理图或者PCB图做一些处理，以原理图为例，在需要屏蔽的器件上双击&#…
阅读更多...
Nginx实现多虚拟主机配置

Nginx实现多虚拟主机配置

Nginx实现多虚拟主机配置 Nginx为什么要进行多虚拟主机配置呢？what？ Nginx实现多虚拟主机配置的主要原因是，一个服务器可能会承载多个网站或应用程序，这些网站或应用程序需要使用不同的域名或IP地址来进行访问。如果只有一个虚拟…
阅读更多...
ctfhub技能树_web_web前置技能_HTTP

ctfhub技能树_web_web前置技能_HTTP

目录 一、HTTP协议 1.1、请求方式 1.2、302跳转 1.3、Cookie 1.4、基础认证 1.5、响应包源代码 一、HTTP协议 1.1、请求方式 注：HTTP协议中定义了八种请求方法。这八种都有：1、OPTIONS ：返回服务器针对特定资源所支持的HTTP请求方法…
阅读更多...
通过查看ThreadLocal的源码进行简单理解

通过查看ThreadLocal的源码进行简单理解

目录 为什么要使用ThreadLocal？ 简单案例 ThreadLocal源码分析 断点跟踪 为什么要使用ThreadLocal 在多线程下，如果同时修改公共变量可能会存在线程安全问题，JDK虽然提供了同步锁与Lock等方法给公共访问资源加锁，但在高并发…
阅读更多...
力扣 --- H指数

力扣 --- H指数

题目描述： 给你一个整数数组 citations ，其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。 根据维基百科上 h 指数的定义：h 代表“高引用次数” ，一名科研人员的 h 指数 是指他&#xff…
阅读更多...
【HDFS】调试慢节点pipiline ack信息

【HDFS】调试慢节点pipiline ack信息

Client - DN1 - DN2 - DN3 DN3 send ack：[0][d3]。 DN2 send ack: [从dn2入队到收到dn3的ack耗时,0] [d2,d3]。 DN1 send ack: [pkt从dn1入队到收到dn2的ack耗时,pkt从dn2入队到收到dn3的ack耗时,0] [d1,d2,d3]。 Client receive: 就是DN1发送过来数据。 客户端收到的第一个…
阅读更多...
【论文笔记】Universal Guidance for Diffusion Models

【论文笔记】Universal Guidance for Diffusion Models

Abstract 典型的扩散模型经过训练以接受特定形式的条件作用（最常见的是文本），并且如果不经过重新训练就不能接受其他形式的条件的作用。 这项工作中提出了一种通用制导算法(universal guidance algorithm)，使扩散模型能够通过任意…
阅读更多...
python弹球小游戏

python弹球小游戏

import pygame import random# 游戏窗口大小 WIDTH 800 HEIGHT 600# 定义颜色 WHITE (255, 255, 255) BLACK (0, 0, 0) RED (255, 0, 0) GREEN (0, 255, 0) BLUE (0, 0, 255)# 球的类 class Ball:def __init__(self):self.radius 10self.speed [random.randint(2, 4),…
阅读更多...
DELL EMC unity 存储系统日志收集方法

DELL EMC unity 存储系统日志收集方法

对于一些非简单的硬件故障，解决故障最有效、最快速的方法就是收集日志，而不是瞎搞。常见的乱搞方法就是 1. reimage系统‘ 2. 更换控制器；3， 重启。 本文详细介绍了图形界面GUI和命令行CLI下如何收集DELL EMC Unity日志的方法和常…
阅读更多...
Spring Cloud笔记 —— 什么是Spring Cloud？

Spring Cloud笔记 —— 什么是Spring Cloud？

引言： 在写这篇博客之前，其实吧，博主很久之前有过一段时间的Spring Cloud的案例项目开发经验，就是一个案例项目开发而已，也说不上有多高大上，那个时候，我其实也是从众而已罢了，毕竟现…
阅读更多...
LLM；超越记忆《第 2 部分 》

LLM；超越记忆《第 2 部分 》

一、说明 在这篇博客中，我深入研究了将大型语言模型（LLM）提升到基本记忆之上的数学框架。我们探索了动态上下文学习、连续空间插值及其生成能力，揭示了 LLM 如何理解、适应和创新超越传统机器学习模型。 LLM代表了人工智能的重大飞…
阅读更多...
基于相关性的四种机器学习聚类方法

基于相关性的四种机器学习聚类方法

在这篇文章中，基于20家公司的股票价格时间序列数据。根据股票价格之间的相关性，看一下对这些公司进行分类的四种不同方式。 苹果（AAPL），亚马逊（AMZN），Facebook（META&…
阅读更多...
TCP简介及特性

TCP简介及特性

1. TCP协议简介 TCP是Transmission Control Protocol的简称，中文名是传输控制协议。它是一种面向连接的、可靠的、基于IP的传输层协议。两个TCP应用之间在传输数据的之前必须建立一个TCP连接，TCP采用数据流的形式在网络中传输数据。TCP为了保证报文传输的…
阅读更多...
idea汉化

idea汉化

所有的jetbrains 汉化包下载地址， 包括leda ，pycharm /，datagrip 等软件，，所有方法都一样：搜索对应的版本需要的包 下载后，在idea的插件中选择从磁盘加载，然后重启 ，即可…
阅读更多...
循环队列的结构设计和基本操作的实现（初始化，入队，出队，判空，获取长度，清空，销毁）

循环队列的结构设计和基本操作的实现（初始化，入队，出队，判空，获取长度，清空，销毁）

目录 1.队列的定义 2.循环队列的设计图示 3.循环队列的结构设计 4.循环队列的实现 5.循环队列的总结 1.队列的定义 和栈相反,队列(queue)是一种先进先出(first in first out,缩写为FIFO)的线性表.它只允许在表的一端进行插入,而在另一端删除元素. 在队列中,允许插入的一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023