揭秘原型链：探索 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.rhkb.cn/news/208412.html

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

相关文章

Beta冲刺随笔-DAY6-橘色肥猫

Beta冲刺随笔-DAY6-橘色肥猫

这个作业属于哪个课程软件工程A这个作业要求在哪里团队作业–站立式会议Beta冲刺作业目标记录Beta冲刺Day6团队名称橘色肥猫团队置顶集合随笔链接Beta冲刺笔记-置顶-橘色肥猫-CSDN博客 文章目录 SCRUM部分站立式会议照片成员描述 PM报告项目程序／模块的最新运行图片…
阅读更多...
网络和Linux网络_8(传输层)TCP协议_续(流量控制+滑动窗口+拥塞控制+紧急指针+listen第二个参数)

网络和Linux网络_8(传输层)TCP协议_续(流量控制+滑动窗口+拥塞控制+紧急指针+listen第二个参数)

目录 1. 流量控制 2. 滑动窗口 2.1 滑动窗口概念 2.2 滑动窗口模型详解 高速重发控制（快重传） 3. 拥塞控制和拥塞窗口 4. 延迟应答 5. 捎带应答 6. 面向字节流 7. 粘包问题 8. 16位紧急指针 9. listen的第二个参数 10. TCP总结异常情况与UD…
阅读更多...
国产Ai大模型和chtgpt3.5的比较

国产Ai大模型和chtgpt3.5的比较

下面是针对国产大模型，腾讯混元，百度文心一言，阿里通义千问和chatgpt的比较，最基础的对一篇文章的单词书进行统计，只有文心一言和chatgpt回答差不多，阿里和腾讯差太多了
阅读更多...
WPF Mvvm模式下面如何将事件映射到ViewModel层

WPF Mvvm模式下面如何将事件映射到ViewModel层

前言 平常用惯了Command绑定，都快忘记传统的基于事件编程模式了，但是Commond模式里面有个明显的问题，就是你无法获取到事件源的参数。很多大聪明肯定会说，这还不简单，通过自己写控件，给控件加个自定义属性不就行了，想要啥事件就写啥事件进去，完全自主可控。但是对于写…
阅读更多...
〖大前端 - 基础入门三大核心之JS篇㊹〗- DOM事件委托

〖大前端 - 基础入门三大核心之JS篇㊹〗- DOM事件委托

说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…
阅读更多...
浮点运算误差

浮点运算误差

输出所有形如aabb的4位完全平方数（即前两位数字相等，后两位数字也相等） 解决这个问题首先需要表示aabb这个变量，只需要定义一个变量n存储即可，另一个问题就是如何判断n是否为完全平方数？ 第一种思路是先求出…
阅读更多...
DOM 事件的传播机制

DOM 事件的传播机制

前端面试大全DOM 事件的传播机制 🌟经典真题 🌟事件与事件流 事件流 事件冒泡流 事件捕获流 标准 DOM 事件流 🌟事件委托 🌟真题解答 🌟总结 🌟经典真题 谈一谈事件委托以及冒泡原理 &#x1f3…
阅读更多...
如何选择适合长期投资的股票板块？

如何选择适合长期投资的股票板块？

大家在学习炒股的过程中肯定没少听“板块”这个词，新手可能一脸懵逼，板块到底是啥意思？为什么会有这么多板块？ 一、什么是股票板块？常见的板块分类有哪些？ 板块理解起来其实很简单，它就是一种分…
阅读更多...
用OpenCV与MFC写一个图像格式转换程序

用OpenCV与MFC写一个图像格式转换程序

打开不同格式的图形文件，彩色装灰度图像及将其存储为需求格式是图像处理的最基本的操作。如果单纯用MFC编程，是一个令人头痛的事情，有不少的代码量。可用OpenCV与MFC编程就变得相对简单。下面来详细演示这一编程操作。 一 在VS2022中创建一…
阅读更多...
第16届中国R会议暨2023X-AGI大会开幕，和鲸科技分享ModelOps在数据科学平台中的实践与应用

第16届中国R会议暨2023X-AGI大会开幕，和鲸科技分享ModelOps在数据科学平台中的实践与应用

11月25日，第 16 届中国 R 会议暨 2023 X-AGI 大会在在中国人民大学逸夫会堂拉开帷幕，本次会议由中国人民大学统计学院、中国人民大学应用统计科学研究中心、统计之都、原灵科技和中国商业统计学会人工智能分会（筹）主办&#xff0c…
阅读更多...
GPT实战系列-大模型训练和预测，如何加速、降低显存

GPT实战系列-大模型训练和预测，如何加速、降低显存

GPT实战系列-大模型训练和预测，如何加速、降低显存 不做特别处理，深度学习默认参数精度为浮点32位精度（FP32）。大模型参数庞大，10-1000B级别，如果不注意优化，既耗费大量的显卡资源，…
阅读更多...
十种接口安全方案！！！

十种接口安全方案！！！

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、数据加密，防止报文明文传输。 二、数据加签验签 2.1 什么是加签验签呢？ 2.2 有了https等加密数据&am…
阅读更多...
Maven总结

Maven总结

文章目录 为什么学习Maven?一、Maven项目架构管理工具二、Maven的下载安装及配置1.maven的下载2.maven目录结构3.配置阿里云镜像和本地仓库:4.maven配置环境变量。5.阿里云镜像和本地仓库说明 三、idea中maven的操作1.以模板的形式创建maven项目2.其他配置maven的方式3.不勾模…
阅读更多...
从图片或PDF文件识别表格提取内容的简单库img2table

从图片或PDF文件识别表格提取内容的简单库img2table

img2table是一个基于OpenCV 图像处理的用于 PDF 和图像的表识别和提取 Python库。由于其设计基于神经网络的解决方案，提供了一种实用且更轻便的替代方案，尤其是在 CPU 上使用时。 该库的特点： 识别图像和PDF文件中的表格，包括在表…
阅读更多...
Windows微软常用运行库合集2023

Windows微软常用运行库合集2023

微软常用运行库合集适用于Windows系统的运行库合集包，基于微软官方的运行库而制作的，包括了常用的vb，vc2005/2008/2010/2012/2013/2017/2019/2005-2022，Microsoft Universal C Runtime，VS 2010 Tools For Office Runti…
阅读更多...
智慧工地一体化解决方案（里程碑管理）源码

智慧工地一体化解决方案（里程碑管理）源码

智慧工地为管理人员提供及时、高效、优质的远程管理服务，提升安全管理水平，确保施工安全提高施工质量。实现对人、机、料、法、环的全方位实时监控，变被动“监督”为主动“监控”。 一、建设背景 施工现场有数量多、分布广，总部统…
阅读更多...
软件工程--面向对象分析用通俗语言20小时爆肝总结！（包含用例图、活动图、类图、时序图......）

软件工程--面向对象分析用通俗语言20小时爆肝总结！（包含用例图、活动图、类图、时序图......）

面向对象方法分为面向对象分析（OOA）、面向对象设计（OOD）、面向对象编程（OOP），本文详细介绍面向对象分析 本文参考教材：沈备军老师的《软件工程原理》大多图片来源其中 目录 面向对…
阅读更多...
docker部署frp穿透内网

docker部署frp穿透内网

文章目录 （1）部署frps服务器（2）部署frpc客户端（3）重启与访问frp（4）配置nginx反向代理 （1）部署frps服务器 docker安装参考文档：docker基本知识 1…
阅读更多...
亚马逊云科技re:Invent大会，助力安全构建规模化生成式AI应用

亚马逊云科技re:Invent大会，助力安全构建规模化生成式AI应用

2023亚马逊云科技re:Invent全球大会进入第三天，亚马逊云科技数据和人工智能副总裁Swami Sivasubramanian博士在周三的主题演讲中，为大家带来了关于亚马逊云科技生成式AI的最新能力、面向生成式AI时代的数据战略以及借助生成式AI应用提高生产效率的精彩分…
阅读更多...
基于机器深度学习的交通标志目标识别

基于机器深度学习的交通标志目标识别

在线工具推荐： 三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 - 3D模型预览图生成服务 智能交通系统（ITS），包括无人驾驶车辆，尽管在道路…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023