深入理解 JavaScript 对象原型，解密原型链之谜（上）

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 摘要
  • 引言
  • 一、对象原型的基础📘
    • 解释对象原型的概念和作用
    • 展示如何创建和使用对象原型
  • 二、原型链的工作原理📚
    • 介绍原型链的基本概念
    • 通过示例解释原型链的继承机制

摘要

本文将深入探讨 JavaScript 中的对象原型，包括其工作原理、用途和优势。通过实例演示，帮助读者更好地掌握这一重要概念。🎓

引言

大家好，我是阿珊！对象原型是 JavaScript 中一个非常重要的特性，它对于理解和扩展对象的行为起着关键作用。在本文中，我们将一起探索对象原型的奥秘。让我们开启这段有趣的学习之旅吧！💡

一、对象原型的基础📘

解释对象原型的概念和作用

在 JavaScript 中，对象原型（Object Prototype）是对象继承属性和方法的一种机制。每个 JavaScript 对象都有一个原型，当我们试图访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会在该对象的原型上查找。

对象原型的概念和作用如下：

  1. 对象原型的概念：对象原型是一个包含共享属性和方法的对象。在 JavaScript 中，所有的对象都是通过原型链来访问属性和方法的。当我们创建一个对象时，它会从它的原型继承属性和方法。

  2. 对象原型的作用：对象原型使得我们可以共享属性和方法，从而减少内存占用和提高性能。当我们创建一个对象时，如果该对象需要使用一些通用的属性和方法，我们可以在原型上定义这些属性和方法，从而使得所有对象都可以共享这些属性和方法。

例如，在 JavaScript 中，所有的数组对象都有一个原型，这个原型包含了数组对象通用的属性和方法。当我们创建一个数组对象时，它会从数组原型上继承这些属性和方法。

const arr = [1, 2, 3];
console.log(arr.__proto__ === Array.prototype); // 输出：true

在上面的示例中，arr 是一个数组对象，它从 Array.prototype（数组原型）上继承了属性和方法。

总之，对象原型是 JavaScript 中对象继承属性和方法的一种机制，它使得我们可以共享通用的属性和方法，从而减少内存占用和提高性能。

展示如何创建和使用对象原型

在 JavaScript 中，可以通过以下方式创建和使用对象原型：

  1. 创建对象原型：可以使用 Object.create() 方法来创建一个对象原型。这个方法会创建一个新对象，该对象具有指定的原型。
const prototype = Object.create(Object.prototype);

在上面的示例中，我们创建了一个新对象 prototype，它的原型是 Object.prototype。

  1. 为对象原型添加属性和方法：可以为对象原型添加属性和方法，从而使得所有对象都可以共享这些属性和方法。
prototype.greeting = "Hello";
prototype.sayHello = function() {
  console.log(`${this.greeting}, world!`);
};

在上面的示例中，我们为 prototype 添加了 greeting 和 sayHello 属性和方法。

  1. 创建对象并继承原型：可以使用 Object.create() 方法创建一个新对象，并指定一个原型。这样，新对象就会从指定的原型上继承属性和方法。
const person = Object.create(prototype);
person.name = "Alice";

在上面的示例中，我们创建了一个新对象 person，并指定它的原型为 prototype。因此，person 会从 prototype 上继承 greeting 和 sayHello 属性和方法。

  1. 使用原型链访问属性和方法：当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会在该对象的原型上查找。
console.log(person.greeting); // 输出："Hello"
person.sayHello(); // 输出："Hello, world!"

在上面的示例中，我们访问了 person 对象的 greeting 和 sayHello 属性和方法，这些属性和方法是从 prototype 上继承的。

总之，在 JavaScript 中，可以通过创建对象原型、为原型添加属性和方法、创建对象并继承原型以及使用原型链访问属性和方法等方式来使用对象原型。

二、原型链的工作原理📚

介绍原型链的基本概念

原型链是 JavaScript 中对象继承属性和方法的一种机制。当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会在该对象的原型上查找。这种查找过程形成了一条原型链。

原型链的基本概念如下：

  1. 每个 JavaScript 对象都有一个原型：在 JavaScript 中，所有的对象都是通过原型链来访问属性和方法的。当我们创建一个对象时，它会从它的原型继承属性和方法。

  2. 原型也是一个对象：在 JavaScript 中，原型也是一个对象，它包含共享属性和方法。当我们创建一个对象时，它会从原型上继承属性和方法。

  3. 原型链：当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会在该对象的原型上查找。这种查找过程形成了一条原型链。

  4. 查找过程：在查找原型链时，JavaScript 会从当前对象开始，逐个检查其原型，直到找到指定的属性和方法，或者到达原型链的末尾（Object.prototype）。

  5. 原型链中断：如果到达原型链的末尾仍然没有找到指定的属性和方法，那么查找过程将会中断，并抛出一个 ReferenceError 错误。

下面是一个简单的示例，展示了原型链的基本概念：

const prototype = {
  greeting: "Hello",
  sayHello: function() {
    console.log(`${this.greeting}, world!`);
  }
};

const person = Object.create(prototype);
person.name = "Alice";

console.log(person.greeting); // 输出："Hello"
person.sayHello(); // 输出："Hello, world!"

在上面的示例中，我们创建了一个原型对象 prototype，并创建了一个新对象 person，并指定它的原型为 prototype。因此，person 会从 prototype 上继承 greeting 和 sayHello 属性和方法。当我们访问 person 对象的 greeting 和 sayHello 属性和方法时，JavaScript 会沿着原型链查找这些属性和方法，并找到它们。

总之，原型链是 JavaScript 中对象继承属性和方法的一种机制，它使得我们可以共享通用的属性和方法，从而减少内存占用和提高性能。

通过示例解释原型链的继承机制

在 JavaScript 中，对象继承属性和方法的一种方式是通过原型链。原型链继承机制允许我们在一个对象上添加或修改属性，然后在其派生对象中继承这些属性。以下是一个简单的示例，解释了原型链的继承机制：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

function Employee(name, employeeId) {
  Person.call(this, name);
  this.employeeId = employeeId;
}

Employee.prototype = Object.create(Person.prototype);

Employee.prototype.constructor = Employee;

Employee.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and my employee ID is ${this.employeeId}`);
};

var employee = new Employee("Alice", "E123");
employee.sayHello(); // 输出：Hello, my name is Alice and my employee ID is E123

在这个示例中，我们首先创建了一个 Person 构造函数和一个 Employee 构造函数。Employee 继承了 Person。为了实现继承，我们使用 Object.create(Person.prototype) 创建了一个新的原型对象，这个新原型对象继承了 Person 的原型。然后我们将 Employee 的原型指向这个新创建的原型对象。这样，Employee 就继承了 Person 的属性和方法。

我们还重写了 Employee 的 sayHello 方法，使其输出更具体的信息。当我们创建一个 Employee 实例并调用 sayHello 方法时，由于继承了 Person 的 sayHello 方法，所以可以正常调用并输出结果。

总之，在 JavaScript 中，可以通过原型链继承机制在一个对象上添加或修改属性，然后在其派生对象中继承这些属性。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

前端Vue项目无法启动服务，提示无 ‘dev‘ npm的脚本问题解决

前端Vue项目无法启动服务，提示无 ‘dev‘ npm的脚本问题解决

目录 一、问题详情 二、问题解决 一、问题详情 上周还能运行的项目，今天突然无法执行了，连最基本的启动按钮也没有了，所有的项目本地都突然跑不起来了，附上截图。 二、问题解决 后来排查的根本原因有点奇葩，是因为…
阅读更多...
C语言--- 指针（3）

C语言--- 指针（3）

一.字符指针变量 在指针的类型中&#xff0c;我们知道有一种指针类型为字符指针char * 一般使用&#xff1a; #include<stdio.h> int main() {char ch a;char* p &ch;*p b;printf("%c\n",ch);return 0; } 其实还有一种使用方式 &#xff1a; #inc…
阅读更多...
JSP实现数据传递与保存（一）

JSP实现数据传递与保存（一）

一、Web开发步骤 1.1两类模式 后端——————前端 先有前端&#xff0c;前端用的时候直接调用 后端已实现注册接口&#xff0c;接口名为doRegister.jsp 前端此时&#xff1a; 前端的form表单中的action提交地址就只能填doRegister.jsp&#xff0c;即&#xff1a; <f…
阅读更多...
ESD管理应用中的浪涌电阻？

ESD管理应用中的浪涌电阻？

静电放电 &#xff08;ESD&#xff09; 会对敏感的电子元件和电路造成严重破坏。为了保护电子设备免受ESD的影响&#xff0c;系统设计人员采用了许多保护措施&#xff0c;包括浪涌电阻器。本文探讨了浪涌电阻器在ESD管理应用中的作用。 首先是一个定义&#xff0c;术语脉冲通常…
阅读更多...
Rider 2023：打造高效.NET项目的智能IDE，让开发更简单mac/win版

Rider 2023：打造高效.NET项目的智能IDE，让开发更简单mac/win版

JetBrains Rider 2023激活版下载是一款专为.NET开发者打造的强大集成开发环境&#xff08;IDE&#xff09;。这款IDE提供了丰富的功能&#xff0c;旨在帮助开发者更快速、更高效地编写、调试和测试.NET应用程序。 Rider 2023 软件获取 Rider 2023在保持了其一贯的智能代码补全…
阅读更多...
jmeter 数据库断言

jmeter 数据库断言

当前版本&#xff1a; jmeter 5.6.3mysql 5.7.39 简介 本篇文章主要通过获取结果集断言&#xff0c;流程&#xff1a;先通过查看结果树获取正确结果&#xff0c;再将正确的结果放入文本断言中&#xff0c;直接启动即可。测试数据库的详细方法见另一篇文章&#xff1a; https:/…
阅读更多...
设计模式（八）外观模式

设计模式（八）外观模式

相关文章设计模式系列 1.外观模式简介 外观模式介绍 当我们开发Android的时候&#xff0c;无论是做SDK还是封装API&#xff0c;我们大多都会用到外观模式&#xff0c;它通过一个外观类使得整个系统的结构只有一个统一的高层接口&#xff0c;这样能降低用户的使用成本。 外观…
阅读更多...
【c++leetcode】1382. Balance a Binary Search Tree

【c++leetcode】1382. Balance a Binary Search Tree

问题入口 DSW (DAY, STOUT & WARREN) ALGORITHM 时间复杂度O(n) class Solution { public:int makeVine(TreeNode* grand, int cnt 0){auto n grand->right;while (n ! nullptr){if(n->left ! nullptr){auto old_n n;n n->left;old_n->left n->righ…
阅读更多...
基于Java SSM框架实现高考填报信息系统项目【项目源码】计算机毕业设计

基于Java SSM框架实现高考填报信息系统项目【项目源码】计算机毕业设计

基于java的SSM框架实现高考填报信息系统演示 JAVA简介 Java主要采用CORBA技术和安全模型&#xff0c;可以在互联网应用的数据保护。它还提供了对EJB&#xff08;Enterprise JavaBeans&#xff09;的全面支持&#xff0c;java servlet API&#xff0c;JSP&#xff08;java serv…
阅读更多...
消息中间件篇之Kafka-数据清理机制

消息中间件篇之Kafka-数据清理机制

一、Kafka文件存储机制 Kafka文件存储结构&#xff1a;一个Topic有多个分区。每一个分区都有多个段&#xff0c;每个段都有三个文件。 为什么要分段&#xff1f;1. 删除无用文件方便&#xff0c;提高磁盘利用率。 2. 查找数据便捷。 二、数据清理机制 1.日志的清理策略方案1 根…
阅读更多...
关于python的数据可视化与可视化：数据读取

关于python的数据可视化与可视化：数据读取

带着问题寻找答案可以使自己不再迷茫或者不知所措&#xff01; 了解什么python的数据可视化&#xff1f; 数据的读取&#xff08;一般伴随着课程文件中会进行提供和利用&#xff09; 数据可视化是将Python应用于大气海洋科学中数据处理及分析过程的重要环节&#xff0c;它可以…
阅读更多...
Flutter SDK 常见问题

Flutter SDK 常见问题

镜像配置 配置pub服务的镜像地址&#xff1a; export PUB_HOSTED_URLhttps://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn 第一次运行项目很慢&#xff0c;搜索整个Flutter SDK项目&#xff0c;使用以下内容替换google和mavenCentral仓…
阅读更多...
进行模型测量这种量出来坡面的是平面面积还是真实面积？

进行模型测量这种量出来坡面的是平面面积还是真实面积？

斜面面积&#xff0c;不是表面积。 DasViewer是由大势智慧自主研发的免费的实景三维模型浏览器,采用多细节层次模型逐步自适应加载技术,让用户在极低的电脑配置下,也能流畅的加载较大规模实景三维模型,提供方便快捷的数据浏览操作。 #DasViewer##实景三维##三维重建##三维模型…
阅读更多...
CKA认证，开启您的云原生之旅！

CKA认证，开启您的云原生之旅！

在当今数字化时代&#xff0c;云计算已经成为企业和个人发展的关键技术。而获得CKA&#xff08;Certified Kubernetes Administrator&#xff09;认证&#xff0c;将是您在云原生领域迈出的重要一步。 CKA认证是由Kubernetes官方推出的权威认证&#xff0c;它旨在验证您在Kuber…
阅读更多...
嵌入式学习day25 Linux

嵌入式学习day25 Linux

进程基本概念: 1.进程: 程序&#xff1a;存放在外存中的一段数据组成的文件 进程&#xff1a;是一个程序动态执行的过程,包括进程的创建、进程的调度、进程的消亡 2.进程相关命令: 1.top 动态查看当前系统中的所有进程信息&#xff08;根据CPU占用率排序&a…
阅读更多...
网站三合一缩略图片介绍展示源码

网站三合一缩略图片介绍展示源码

网站三合一缩略图片介绍展示源码&#xff0c;PHP源码&#xff0c;运行需要php环境支持&#xff0c;效果截图如下 蓝奏云下载&#xff1a;https://wfr.lanzout.com/ihY8y1pgim6j
阅读更多...
php脚本输出中文在浏览器中显示乱码

php脚本输出中文在浏览器中显示乱码

问题说明 这个问题一般出现在较低版本的php中&#xff0c;原因是php和浏览器的字符解析方式不对应 &#xff0c;导致中文字符被错误解析成乱码 &#xff08;注&#xff0c;此处的php版本任意切换是依赖于小皮面板&#xff08;phpstudy&#xff09;实现的&#xff0c;感兴趣可以…
阅读更多...
政安晨：【机器学习基础】（三）—— 提高泛化能力

政安晨：【机器学习基础】（三）—— 提高泛化能力

根据我这个系列的前两篇文章&#xff0c;您会发现您的模型已经表现出了一定的泛化能力&#xff0c;并且能够过拟合&#xff0c;接下来应该专注于将泛化能力最大化。 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 政安晨的机器学习笔记 希…
阅读更多...
CSS 入门手册(一)

CSS 入门手册(一)

目录 什么是 CSS? 1-CSS语法规则 2-样式表 外部样式表 内部样式表 行内样式表 3-选择器 4-背景 4.1 颜色定义方式 4.2 背景图像 5-文本 5.1 文本颜色 5.2 文本对齐方式 5.3 文本装饰 5.4 文本转换 5.5 文本首行缩进/间距 6-字体 6.1 字体系列 6.2 字体样式…
阅读更多...
常见集合框架底层原理

常见集合框架底层原理

常见集合框架底层原理 常见的集合有哪些 Java集合类主要由两个接口Collection和Map派生出来的&#xff0c;Collection有三个子接口: List、 Set、Queue List代表了有序可重复集合&#xff0c;可直接根据元素的索引来访问Set代表了无序集合&#xff0c;只能根据元素本身来访问…
阅读更多...
最新文章

Copyright @ 2022~2023