JavaScript高级:原型和原型链

news2024/12/22 18:45:35

在 JavaScript 中,原型与原型链是一种强大的继承机制,它使对象之间能够共享属性和方法,从而实现高效的代码复用。虽然这听起来可能有些复杂,但是我们可以用通俗易懂的方式来理解这个概念。本文将为你详解原型和原型链的概念与作用,帮助你更好地掌握 JavaScript 的继承机制。

1. 原型的概念

在 JavaScript 中,每个对象都有一个关联的原型对象(也叫原型)。当你访问一个对象的属性或方法时,如果对象本身没有该属性或方法,JavaScript 引擎会沿着原型链向上查找,直到找到为止。

在 JavaScript 中,每个构造函数都拥有一个 prototype 属性,它指向构造函数的原型对象,这个原型对象中有一个 construtor 属性指回构造函数;每个实例都有一个__proto__属性,当我们使用构造函数去创建实例时,实例的__proto__属性就会指向构造函数的原型对象。

// 创建一个Dog构造函数
function Dog(name, age) {
  this.name = name
  this.age = age
}
Dog.prototype.eat = function() {
  console.log('喜欢吃骨头')
}
// 使用Dog构造函数创建dog实例
const dog = new Dog('小黑', 6)

 

 

 

2. 原型链的作用

原型链是一系列对象的链接,它们之间通过原型关系相互连接。原型链的作用在于实现对象之间的属性和方法的继承。当我们试图访问一个对象的属性或方法时,JavaScript 引擎会先查找对象自身是否有该属性或方法,如果没有,就会在原型链上继续查找。

3. 实例与原型的关系

在 JavaScript 中,构造函数通过 prototype 属性来指定其原型对象,而实例对象通过 __proto__ 属性来指向其构造函数的原型对象。

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

const person = new Person('Alice');

console.log(person.__proto__ === Person.prototype); // 输出:true

4. 使用原型添加方法

我们可以通过在原型对象上添加方法,让所有该构造函数创建的实例对象都共享这些方法。

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

person.sayHello(); // 输出:Hello, my name is Alice!

5. 原型链的延伸

原型链可以被延伸,一个原型对象可以作为另一个构造函数的实例对象。这将构成一个更长的原型链。

function Student(name, school) {
  this.name = name;
  this.school = school;
}

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

const student = new Student('Bob', 'XYZ School');
student.sayHello(); // 输出:Hello, my name is Bob!

6. 原型链的终点

原型链的终点是 Object.prototype,这是 JavaScript 中所有对象的最终原型。Object.prototype 中包含一些基本的方法,如 toStringvalueOf

原型与原型链是 JavaScript 中非常重要的概念,它们构成了对象之间属性和方法继承的机制。每个对象都有一个关联的原型对象,通过原型链,我们可以实现高效的代码复用和继承。理解原型与原型链,将使你更加熟悉 JavaScript 的对象模型,能够更好地构建和维护代码。通过在构造函数的原型上添加方法,你可以让对象共享这些方法,而通过延伸原型链,你可以实现更复杂的继承关系。不管你是初学者还是有经验的开发者,掌握原型与原型链的概念,将让你在 JavaScript 的编程之旅中获得更多的信心,创造出令人惊叹的应用!

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

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

相关文章

win11虚拟机安装

win11虚拟机安装 下载虚拟机客户端安装客户端创建虚拟机下载 ISO切换root账号GNOME桌面 下载虚拟机客户端 版本是16.2.3 链接:https://pan.baidu.com/s/13c6XVWFbeQKbCnrlfxD8cA 提取码:qxdc 安装客户端 安装向导 点击下一步 接收条款,点…

C#小轮子:自动连续Ping网络地址

文章目录 前言Ping代码异步问题 前言 工作中,我们经常用到Ping这个指令,有时候我们需要Ping整个网段来查看这个网段上面有什么设备,哪些Ip地址是通的,这个时候就需要Ping指令 Ping 代码 我这个是批量Ping的代码,而…

Stable Diffusion WebUI安装和使用教程(Windows)

目录 下载Stable Diffusion WebUI运行安装程序,双击webui.bat界面启动插件安装(github)模型下载(有些需要魔法)安装过程遇到的大坑总结参考的博客 整个过程坑巨多,我花了一个晚上的时间才全部搞定,本教程针对有编程基础…

Ctfshow web入门 SSTI 模板注入篇 web361-web372 详细题解 全

CTFshow SSTI web361 笔记分享 一、代码块 变量块 {{}} 用于将表达式打印到模板输出 注释块 {##} 注释 控制块 {%%} 可以声明变量,也可以执行语句 {% for i in .__class__.__mro__[1].__subclasses__() %}{% if i.__name___wrap_close %}{% print i.__init__.…

面试热题(反转链表)

给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 链表的题&#xff0c;大部分都可以用指针或者递归可以做&#xff0c;指针如果做不出来的话&#xff0c;…

adb 通过wifi连接手机

adb 通过wifi连接手机 1. 电脑通过USB线连接手机2. 手机开启USB调试模式&#xff0c;开启手机开发者模式3.手机开启USB调试模式 更多设置-》开发者选项-》USB调试4.点击Wi-Fi 高级设置&#xff0c;可以查看到手机Wi-Fi的IP地址&#xff0c;此IP地址adb命令后面的ip地址&#xf…

竞赛项目 疫情数据分析与3D可视化 - python 大数据

文章目录 0 前言1 课题背景2 实现效果3 设计原理4 部分代码5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 大数据全国疫情数据分析与3D可视化 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff0…

【办公软件】WPS2019打开时报错:安装Office自定义项,安装期间出错

文章目录 一、报错信息二、解决方法&#xff1a; 三、原因 一、报错信息 二、解决方法&#xff1a; 1.按一下左下角【开始】按钮&#xff0c;点击【运行】&#xff0c;在对话框输入【regedit】打开注册表 2.按CtrlF查找【YdWordAddIn.vsto】 3.删除【Manifest】下的数据 (如…

flutter引入高德地图,release 版本闪退问题解决

前提是在确定了闪退是由于地图引起的之后。报错内容如下 1、检查高德开放平台&#xff0c;查看参数是否正确配置&#xff0c;SHA1 和包名是否正确。配置 SHA1 可参考获取 Android 的 SHA1 值_LoveShadowing的博客-CSDN博客 2、检查是否引入 sdk&#xff0c;是否配置混淆&#…

痞子衡嵌入式:AppCodeHub - 一站网罗恩智浦MCU应用程序

近日&#xff0c;恩智浦官方隆重上线了应用程序代码中心(Application Code Hub&#xff0c;简称 ACH)&#xff0c;这是恩智浦 MCUXpresso 软件生态的一个重要组成部分。痞子衡之所以要如此激动地告诉大家这个好消息&#xff0c;是因为 ACH 并不是又一个恩智浦官方 github proje…

k8s集群网络插件搭建——————解决集群notready(k8s1.20版本,docker24)

前面已经提到&#xff0c;在初始化 k8s-master 时并没有网络相关配置&#xff0c;所以无法跟 node 节点通信&#xff0c;因此状态都是“NotReady”。但是通过 kubeadm join 加入的 node 节点已经在k8s-master 上可以看到。 那么&#xff0c;这个时候我们该怎么办呢&#xff1f;…

微信小程序备案流程

微信小程序备案流程 &#x1f4d4; 千寻简笔记介绍 千寻简笔记已开源&#xff0c;Gitee与GitHub搜索chihiro-notes&#xff0c;包含笔记源文件.md&#xff0c;以及PDF版本方便阅读&#xff0c;且是用了精美主题&#xff0c;阅读体验更佳&#xff0c;如果文章对你有帮助请帮我…

基于Promise.resolve实现Koa请求队列中间件

本文作者为360奇舞团前端工程师 前言 最近在做一个 AIGC 项目&#xff0c;后端基于 Koa2 实现。其中有一个需求就是调用兄弟业务线服务端 AIGC 能力生成图片。但由于目前兄弟业务线的 AIGC 项目也是处于测试阶段&#xff0c;能够提供的服务器资源有限&#xff0c;当并发请求资源…

uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次

uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次 问题代码官方说明参考资料 问题代码 直接从官方示例中复制过来改的。为了演示 <template><view><uni-forms ref"form" :modelValue"formData" :rules"rules&qu…

vue-pc端实现按钮防抖处理-自定义指令

前言 我们经常在移动端会处理按钮和输入框的防抖和节流处理&#xff0c;在pc端很少进行这样的操作 但是在pc端也是可以进行按钮的防抖操作&#xff0c;这样也是比较合理&#xff0c;可以不用但不可以不会 我们只要配合vue项目自定义指令加上全局注册&#xff0c;就可以实现按…

maven的入门使用

maven的入门使用 1.Maven&#xff08;Maven Apache&#xff09;是一个流行的项目构建和管理工具&#xff0c;2.项目结构和POM文件&#xff1a;3.POM文件&#xff08;Project Object Model&#xff09;4.依赖管理&#xff1a; 在POM文件中5.生命周期和构建过程1.前言2.插件系统3…

【MAC】 M2 brew安装 docker 运行失败 解决

MAC 安装 brew install --cask docker 之后一直显示docker: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?. 网上看了一些文章 发现 这个不适用于M2 所以要从官网上下载 docker 安装成功

Java算法_ 房子强盗(LeetCode_Hot100)

题目描述&#xff1a;你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表…

在 Windows 上安装 OpenCV – C++ / Python

在这篇博文中&#xff0c;我们将在 Windows 上安装适用于 C 和 Python 的 OpenCV。 C 安装是在自定义安装 exe 文件的帮助下完成的。而Python的安装是通过Anaconda完成的。 在 Windows 上安装 OpenCV – C / Python&#xff08;opencv官方Wndows上安装openCV- C/ Pthon 的链接…

多核异构处理器A核与M核通信过程

多核异构处理器是指集成了不同类型或架构的CPU的系统级芯片&#xff08;SoC&#xff09;。 例如&#xff0c;有些处理器同时包含了高性能的A核&#xff08;如Cortex-A&#xff09;和低功耗的M核&#xff08;如Cortex-M&#xff09;。 这样的设计可以让不同的CPU负责不同的任务…