JavaScript 原型对象与原型链的魔法与艺术

在JavaScript的世界里,原型对象和原型链是两个非常重要的概念。它们不仅帮助我们理解对象的创建过程,还为我们提供了一种高效的方式来管理共享的属性和方法。本文将深入探讨JavaScript中的原型对象和原型链,包括它们的定义、工作原理以及在实际项目中的最佳实践。

什么是原型对象?

在JavaScript中,每个对象都有一个内部属性 [[Prototype]],这个属性指向该对象的原型(Prototype)。原型本身也是一个对象,它可以包含属性和方法,这些属性和方法可以被所有通过该原型创建的对象共享。

示例
function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log(`Hello, ${this.name}`);
};const person1 = new Person('Alice');
person1.sayHello(); // 输出: Hello, Alice

在这个例子中,Person.prototypePerson 构造函数的原型对象,它包含了一个方法 sayHello。当创建 person1 实例时,person1 会自动继承 Person.prototype 上的所有属性和方法。

原型链是什么?

原型链(Prototype Chain)是指从一个对象的原型开始,逐层向上查找属性或方法的过程。当访问一个对象的属性或方法时,如果该对象自身没有这个属性或方法,JavaScript会沿着原型链向上查找,直到找到为止。

示例
function Animal(species) {this.species = species;
}Animal.prototype.eat = function() {console.log('This animal eats food.');
};function Dog(name) {Animal.call(this, 'Dog'); // 继承Animal的属性this.name = name;
}Dog.prototype = Object.create(Animal.prototype); // 设置Dog的原型为Animal的原型
Dog.prototype.constructor = Dog; // 修正constructor指向
Dog.prototype.bark = function() {console.log(`${this.name} says woof!`);
};const dog1 = new Dog('Rex');
dog1.eat(); // 输出: This animal eats food.
dog1.bark(); // 输出: Rex says woof!

在这个例子中,Dog 的原型是 Animal.prototype,而 Animal.prototype 的原型是 Object.prototype。这样形成了一条原型链:dog1 -> Dog.prototype -> Animal.prototype -> Object.prototype

原型链的工作原理

当访问 dog1.eat() 时,JavaScript会按照以下步骤进行:

  1. 检查 dog1 自身是否有 eat 方法:没有。
  2. 沿原型链向上查找:在 Dog.prototype 上找到了 eat 方法,执行该方法。
  3. 继续向上查找:如果在 Dog.prototype 上找不到,会继续在 Animal.prototype 上查找,以此类推。

原型链的实际应用

1. 继承机制

原型链提供了一种实现继承的机制,允许一个类继承另一个类的属性和方法。这种继承方式比传统的面向对象编程中的类继承更为灵活。

function Parent(name) {this.name = name;
}Parent.prototype.greet = function() {console.log(`Hello, my name is ${this.name}.`);
};function Child(age) {this.age = age;
}Child.prototype = Object.create(Parent.prototype); // 子类继承父类的原型
Child.prototype.constructor = Child; // 修正constructor指向
Child.prototype.getAge = function() {console.log(`I am ${this.age} years old.`);
};const child1 = new Child(10);
child1.greet(); // 输出: Hello, my name is undefined.
child1.getAge(); // 输出: I am 10 years old.
2. 共享方法和属性

利用原型链,可以实现多个对象共享同一个方法和属性,从而节省内存和提高效率。

function Car(make, model) {this.make = make;this.model = model;
}Car.prototype.displayInfo = function() {return `${this.make} ${this.model}`;
};const car1 = new Car('Toyota', 'Corolla');
const car2 = new Car('Honda', 'Civic');
console.log(car1.displayInfo()); // 输出: Toyota Corolla
console.log(car2.displayInfo()); // 输出: Honda Civic

总结

原型对象和原型链是JavaScript中非常强大的特性,它们不仅帮助我们理解对象的创建和继承机制,还为我们提供了一种高效的方式来管理共享的属性和方法。在实际项目中,合理地使用原型对象和原型链,可以提高代码的可维护性和性能。通过本文的介绍,希望能够帮助大家更好地理解和应用这两个概念,提升JavaScript编程技能。

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

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

相关文章

力扣题目 - 3264.K 次乘运算后的最终数组I

题目 还需要你前往力扣官网查看详细的题目要求 地址 1.给你一个整数数组 nums ,一个整数 k 和一个整数 multiplier 。2.你需要对 nums 执行 k 次操作,每次操作中:找到 nums 中的 最小 值 x ,如果存在多个最小值,选择最…

黑马商城微服务复习(6)

MQ高级 1. 消息可靠性2. 发送者的可靠性1. 发送者问题2. 生产者重试机制3. 生产者确认机制4. MQ可靠性5. 消费者的可靠性 3. 延迟消息1. 定义2. 死信交换机 1. 消息可靠性 发送消息时丢失: 生产者发送消息时连接MQ失败生产者发送消息到达MQ后未找到Exchange生产者发…

内网是如何访问到互联网的(华为源NAT)

私网地址如何能够访问到公网的? 在上一篇中,我们用任意一个内网的终端都能访问到百度的服务器,但是这是我们在互联网设备上面做了回程路由才实现的,在实际中,之前也说过运营商是不会写任何路由过来的,那对于…

oracle归档模式下的快速热备方法-适合小库

在我们的一些小型的oracle生产库中,有些时候我们可以在不停库且不使用rman的情况下实现数据库的热备。该热备的原理是通过控制数据文件块头的scn号在备份时候不变化,进而保证备份的数据文件数据一致性。 一、环境 数据库版本: 数据库需要开启…

rabbitMq举例

新来个技术总监,把 RabbitMQ 讲的那叫一个透彻,佩服! 生产者 代码举例 public String sendMsg(final String exchangeName,final String routingKey,final String msg) {} /*** 发送消息* param exchangeName exchangeName* param routin…

2024年12月13日Github流行趋势

项目名称:nexus-xyz / nexus-zkvm 项目维护者:govereau slumber danielmarinq sjudson yoichi-nexus项目介绍:Nexus zkVM 是一个零知识虚拟机。项目star数:1,948项目fork数:343 项目名称:soxoj / maigret …

(九)机器学习 - 多项式回归

多项式回归(Polynomial Regression)是一种回归分析方法,它将自变量 xx 和因变量 yy 之间的关系建模为 nn 次多项式。多项式回归的目的是找到一个 nn 次多项式函数,使得这个函数能够最好地拟合给定的数据点。 多项式回归的数学表达…

Linux USB开发整理和随笔

目录 1 概述 2 硬件原理基础 2.1 USB发展 2.2 USB的拓扑 2.3 硬件接口 2.4 USB总线协议 2.4.1 通信过程 2.4.2 概念关系 2.4.3 管道PIPE 2.4.4 传输 2.4.5 事务 2.4.6 包结构与类型 2.4.6.1 令牌包 2.4.6.2 数据包 2.4.6.3 握手包 2.5 描述符 2.5.1 设备描述符…

️️️ 避坑指南:如何修复国密gmssl 库填充问题并提炼优秀加密实践20241212

🛡️ 避坑指南:如何修复国密gmssl 库填充问题并提炼优秀加密实践 ✨ 引言 在当下的数据安全环境中,SM4作为中国国家密码算法的代表性选择,被广泛应用于金融、通信和政府领域。然而,在实际开发中,即便是开…

Redis客户端(Jedis、RedisTemplate、Redisson)

1. 简介 Redis作为一个当下很火热的非关系型数据库,Java从业人员基本都离不开对Redis的使用。在Java程序中该数据库,需要借助于市面上的开源客户端,如Jedis、Spring Data Redis、Redisson,它们可以作为操作Redis非关系型数据库的桥…

沈阳理工大学《2024年811自动控制原理真题》 (完整版)

本文内容,全部选自自动化考研联盟的:《沈阳理工大学811自控考研资料》的真题篇。后续会持续更新更多学校,更多年份的真题,记得关注哦~ 目录 2024年真题 Part1:2024年完整版真题 2024年真题

2023 年 408 大题解析

讲解视频推荐: 【BOK408真题讲解-2023】 一、数据结构 1. 算法题(图的邻接矩阵)13’ 已知有向图 G 采用邻接矩阵存储,类型定义如下: typedef struct{ //图的类型定义int num Vertices, numEdges; //图的顶点数和有…

蓝桥杯刷题——day3

蓝桥杯刷题——day3 题目一题干题目解析代码 题目二题干题目解析代码 题目一 题干 每张票据有唯一的 ID 号,全年所有票据的 ID 号是连续的,但 ID 的开始数码是随机选定的。因为工作人员疏忽,在录入 ID 号的时候发生了一处错误,造…

nginx.conf 请求时间部分参数说明新手教程

下面来说下nginx.conf 的部分参数,配置如下: http {include mime.types;default_type application/octet-stream;client_max_body_size 1000M;#log_format main $remote_addr - $remote_user [$time_local] "$request" # …

【R语言】基础知识

一、对象与变量 R语言中的所有事物都是对象,如向量、列表、函数,变量、甚至环境等。它的所有代码都是基于对象object的操作,变量只是调用对象的手段。 1、对象 在R语言中,对计算机内存的访问是通过对象实现的。 # 字符型向量 …

【SpringBug】lombok插件中@Data不能生成get和set方法

一:问题引入 可以看到我们在类UserInfo上写了Data注解,但是在测试文件中生成的反编译target文件Us二Info中没有get和set方法 二:解决方法 1:Spring升级问题(解决了我的问题) 原因是Spring官方进行了升级…

Java版-图论-最短路-Floyd算法

实现描述 网络延迟时间示例 根据上面提示,可以计算出,最大有100个点,最大耗时为100*wi,即最大的耗时为10000,任何耗时计算出来超过这个值可以理解为不可达了;从而得出实现代码里面的: int maxTime 10005…

STM32 CubeMx HAL库 独立看门狗IWDG配置使用

看门狗这里我就不多介绍了,能搜到这篇文章说明你了解 总之就是一个单片机重启程序,设定好超时时间,在超时时间内没有喂狗,单片机就会复位 主要应用在单片机异常重启方面,比如程序跑飞(注意程序跑飞时你就…

uni-app实现小程序、H5图片轮播预览、双指缩放、双击放大、单击还原、滑动切换功能

前言 这次的标题有点长,主要是想要表述的功能点有点多; 简单做一下需求描述 产品要求在商品详情页的头部轮播图部分,可以单击预览大图,同时在预览界面可以双指放大缩小图片并且可以移动查看图片,双击放大&#xff0…

【Hive】-- hive 3.1.3 伪分布式部署(单节点)

1、环境准备 1.1、版本选择 apache hive 3.1.3 apache hadoop 3.1.0 oracle jdk 1.8 mysql 8.0.15 操作系统:Mac os 10.151.2、软件下载 https://archive.apache.org/dist/hive/ https://archive.apache.org/dist/hadoop/ 1.3、解压 tar -zxvf apache-hive-4.0.0-bin.tar…