JavaScript原型链深度剖析

目录

前言

一、原型链

1.原型链的主要组成

        原型(Prototype)

        构造函数(Constructor)

        实例(Instance)

2.原型链的工作原理

前言

        在JavaScript的世界中,原型链(Prototype Chain)是一个核心概念,它决定了对象如何继承属性和方法。对于初学者来说,理解原型链可能是个挑战,但一旦掌握了它,就能更好地利用JavaScript的动态性和灵活性。本篇文章将详细探讨JavaScript的原型链,帮助大家深入理解其工作原理。

一、原型链

        原型链是JavaScript中用来实现对象继承的一种机制。每个JavaScript对象都有一个内部链接到另一个对象,这个对象就是它的原型(prototype)。当试图访问一个对象的某个属性时,如果这个对象自身没有这个属性,那么JavaScript就会在这个对象的原型上查找这个属性,依此类推,一直向上查找,直到找到一个包含该属性的对象或者到达原型链的末尾(null)。这个过程就构成了原型链。

        每个JavaScript函数都有一个prototype属性,这个属性是一个指向一个对象的引用。当创建一个新对象(使用new关键字)时,这个新对象的内部[[Prototype]]链接(在ES6之前,这个链接是不可见的,但可以通过Object.getPrototypeOf()访问)会指向构造函数的prototype对象。

1.原型链的主要组成

        原型(Prototype)

        在JavaScript中,每个对象都有一个内部链接指向它的原型对象。原型对象的作用就是提供共享的方法和属性给所有实例。当我们试图访问一个对象的某个属性时,如果该对象自身没有这个属性,那么JavaScript就会在该对象的原型上查找这个属性,这就是原型链查找机制。通过这种方式,我们可以实现属性的继承和共享,减少内存占用。

        构造函数(Constructor)

        构造函数是一种特殊的函数,主要用来初始化新创建的对象。当我们使用new关键字创建一个对象时,JavaScript会调用一个构造函数来初始化这个新对象。构造函数通常与new一起使用,用来创建特定类型的对象。构造函数的主要任务是定义实例的属性和方法。

        实例(Instance)

实例是通过构造函数创建出来的具体对象。每个实例都是独一无二的,拥有自己的属性和方法。这些属性和方法可能继承自原型,也可能是在构造函数中定义的。实例与构造函数之间通过this关键字来建立联系,使得实例可以访问到构造函数中定义的属性和方法。

2.原型链的工作原理

        以下是一个具体的例子,通过构造函数、原型和实例来详细解释JavaScript中原型链的工作原理:

// 定义一个构造函数 Person  
function Person(name, age) {  this.name = name;  this.age = age;  
}  // 为 Person 的原型添加方法  
Person.prototype.greet = function() {  console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');  
};  // 创建一个 Person 的实例  
var john = new Person('John', 30);  // 调用实例上的方法  
john.greet(); // 输出: Hello, my name is John and I am 30 years old.

        在这个例子中,我们有一个Person构造函数,它接受两个参数nameage,并在this(即新创建的对象实例)上设置这两个属性。

        接下来,我们向Person.prototype添加了一个greet方法。这意味着所有通过Person构造函数创建的实例都将能够访问这个方法,即使这个方法不是直接在实例上定义的。

当我们调用new Person('John', 30)时,JavaScript做了以下几件事:

  1. 创建了一个新的空对象。
  2. 将这个新对象的内部[[Prototype]]链接(在ES5之前是非标准属性,但在ES6中可以通过Object.getPrototypeOf()访问)设置为Person.prototype
  3. 将这个新对象作为this的上下文,执行Person函数中的代码,设置nameage属性。
  4. 返回这个新创建的对象(除非Person函数返回了另一个对象)。

        因此,john对象现在有两个属性(nameage),并且可以访问Person.prototype上的greet方法。这是通过原型链实现的:当尝试访问john.greet时,JavaScript首先在john对象自身上查找greet属性,如果没有找到,它会沿着john[[Prototype]]链接(即Person.prototype)继续查找,最终找到了greet方法并执行它。

        如果我们在Person.prototype上添加更多的方法或属性,所有已经创建的Person实例以及未来创建的实例都将能够访问这些新方法或属性,因为它们共享同一个原型对象。

        原型链的概念允许我们实现继承,并且可以动态地向对象添加新的功能,而无需修改已存在的对象。这是JavaScript中一个非常强大的特性,使得对象可以更加灵活和可扩展。

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

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

相关文章

R语言的学习——day1

将数据框中某一列数据改成行名 代码 结果

第四十八节 Java 8 Nashorn JavaScript

Nashorn 一个 javascript 引擎。 从JDK 1.8开始,Nashorn取代Rhino(JDK 1.6, JDK1.7)成为Java的嵌入式JavaScript引擎。Nashorn完全支持ECMAScript 5.1规范以及一些扩展。它使用基于JSR 292的新语言特性,其中包含在JDK 7中引入的 invokedynamic&#xff…

.net core ef 连表查询

Information和TypeInfo连表查询 类似: select st.Title1,si.* from [Star_Information] si left join Star_TypeInfo st on si.typeId2st.id 先在EfCoreDbContext.cs配置 protected override void OnModelCreating(ModelBuilder builder){base.OnModelCreating(b…

基于SSM的文物管理系统(含源码+sql+视频导入教程+文档+PPT)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的文物管理系统拥有俩种角色 管理员:个人信息管理、用户管理、分类管理、文物信息管理、文物外借管理、文物维修管理、留言板管理等 用户:登录注册、分类…

[华为OD] C卷 服务器cpu交换 现有两组服务器QA和B,每组有多个算力不同的CPU 100

题目: 现有两组服务器QA和B,每组有多个算力不同的CPU,其中A[i]是A组第i个CPU的运算能 力,B[i]是B组第i个CPU的运算能力。一组服务器的总算力是各CPU的算力之和。 为了让两组服务器的算力相等,允许从每组各选出一个CPU进行一次交换。 求两…

Linux 权限的简单讲解

1、前言 当我们分别使用 touch、mkdir 命令创建一名为 test1 的文件和名为 test2 的目录,发现其中有些参数不一样,本文就来给大家来剖析一下。 2、 参数讲解 我们可以通过切片分为下面几个区域,本文就只简单讲解文件类型、权限、所属用户、所…

github中fasttext库README官文文档翻译

参考链接:fastText/python/README.md at main facebookresearch/fastText (github.com) fastText模块介绍 fastText 是一个用于高效学习单词表述和句子分类的库。在本文档中,我们将介绍如何在 python 中使用 fastText。 环境要求 fastText 可在现代 …

http作业

综合练习:请给openlab搭建web网站 网站需求: 1.基于域名www.openlab.com可以访问网站内容为 welcome to openlab!!! 2.给该公司创建三个子界面分别显示学生信息,教学资料和缴费网站,基于www.openlab.com/student 网站访问学生信息…

CGAL 网格热力图

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里实现一个很有趣的功能,生成网格热力图,思路其实很简单:通过指定一个点,计算网格其他点到指定点的测地线距离,以此来为每个网格顶点进行赋色即可。 二、实现代码 //CGAL #include <CGAL/Simple_cartesi…

用HTML5实现播放gif文件

用HTML5实现播放gif文件 在HTML5中&#xff0c;你可以使用<img>标签来播放GIF文件。GIF文件本质上是一种图像格式&#xff0c;它支持动画效果&#xff0c;因此当在网页上加载时&#xff0c;它会自动播放动画。先看一个简单的示例&#xff1a; <!DOCTYPE html> &l…

Elasticsearch:探索 11 种流行的机器学习算法

作者&#xff1a;来自 Elastic Elastic Platform Team 过去几年中&#xff0c;机器学习&#xff08;ML&#xff09;已经悄然成为我们日常生活中不可或缺的一部分。它影响着从购物网站和流媒体网站上的个性化推荐&#xff0c;到保护我们的收件箱免受我们每天收到的大量垃圾邮件的…

2024年第二十六届“华东杯”(B题)大学生数学建模挑战赛|数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 让我们来看看华东杯 (B题&#xff09;&#xff01; 第一个问题…

神经网络与深度学习(四)--自然语言处理NLP

这里写目录标题 1.序列模型2.数据预处理2.1特征编码2.2文本处理 3.文本预处理与词嵌入3.1文本预处理3.2文本嵌入 3.RNN模型3.1RNN概要3.2RNN误差反传 4.门控循环单元&#xff08;GRU&#xff09;4.1GRU基本结构 5.长短期记忆网络 (LSTM) 1.序列模型 分类问题与预测问题 图像分…

K8S安装Calico节点总是NotReady

问题场景&#xff1a; 今天部署了K8S主节点&#xff0c;Master节点安装了Calico网络插件&#xff0c;在运行node列表结果是NotReady&#xff1a; [rootmaster ~]# kubectl get nodes NAME STATUS ROLES AGE VERSION master NotReady master 22h v1.19.4…

关于chatgpt的理解与探索

引言 人工智能&#xff08;AI&#xff09;的发展一直以来都备受关注&#xff0c;而自然语言处理&#xff08;NLP&#xff09;领域的进展尤其引人瞩目。ChatGPT 作为其中的一员&#xff0c;以其强大的语言理解和生成能力而备受关注。本文将深入探讨 ChatGPT 的原理、应用以及对…

显示和隐藏两个不同表格在同一个位置,列的宽度错乱。

当切换按钮&#xff0c;显示和隐藏两个不同表格在同一个位置的时候。列的宽度又是不固定的&#xff0c;会出现列宽度错乱的问题 刚开始我是用的el-table自带的doLayout()&#xff0c;并不适合用。反正我这边是不起作用的&#xff0c;不知道是不是我用错了。 1&#xff0c; 在…

java版本共存与fastjson反序列化rmi服务器的搭建

文章目录 java 8下载远程加载类工具编译工具mvn多版本共存配置mvn编译marshalsec编译rce文件利用marshalsec加载远程RCE类 java 8下载 链接&#xff1a;https://pan.baidu.com/s/1B8U9v8QAe4Vc67Q84_nqcg?pwd0000 提取码&#xff1a;0000 远程加载类工具 https://github.co…

C++类的设计编程示例

一、银行账户类 【问题描述】 定义银行账户BankAccount类。 私有数据成员&#xff1a;余额balance&#xff08;整型&#xff09;。 公有成员方法&#xff1a; 无参构造方法BankAccount()&#xff1a;将账户余额初始化为0&#xff1b; 带参构造方法BankAccount(int m)&#xff1…

Cesium 3dTileset 支持 uv 和 纹理贴图

原理: 使用自定义shader实现uv自动计算 贴图效果: uv效果:

(Microsoft SQL Server,错误: 233)

错误信息: A connection was successfully established with the server, but then an error occurred during the pre-login handshake. (provider: Shared Memory Provider, error: 0 - 管道的另一端上无任何进程。) (Microsoft SQL Server&#xff0c;错误: 233) 原因&…