如何理解原型及原型链?js的继承方式
原型与原型链
- 原型
在js中,每个对象都有一个原型(prototype)。原型是一个对象,其他对象可以通过原型来共享属性和方法。当我们创建一个对象时,它会自动关联到一个原型对象。
例如:
在上面的代码中,创建了一个Person对象,有通过person创建了person1和person2对象,这两个对象都关联到function Person(name, age) { this.name = name; this.age = age; }// 在 Person 构造函数的原型上添加一个 greet 方法 Person.prototype.greet = function() { console.log(`Hello, my name is ${this.name}.`); };const person1 = new Person('Alice', 30); const person2 = new Person('Bob', 25);person1.greet(); // 输出 "Hello, my name is Alice." person2.greet(); // 输出 "Hello, my name is Bob."Person.prototype原型对象,并且可以共享greet方法。 - 原型链
原型链是福哦个对象通过原型链条连接在一起的数据结构。当访问一个对象的属性或方法时,js引擎会先在对象本身中寻找,如果找不到,就会沿着原型链继续找,知道找到该属性或方法,或者达到原型链的顶端(Object.prototype)。
举个例子:
function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.greet = function() {console.log(`Hello, my name is ${this.name}.`);
};const person1 = new Person('Alice', 30);console.log(person1.toString()); // 输出 "[object Object]"
在这个例子中 person1通过原型链继承了toString方法。
所以是Object.prototype原型链的顶端,它是所有对象的原型,包括内置对象和自定义对象。当查找属性或方法时,原型链会一直往上查找,直到 Object.prototype。如果在整个原型链上都找不到该属性或方法,则返回 undefined。
原型链继承
原型继承是通过原型链来实现对象间的属性和方法共享。在原型继承中,一个对象可以从另一个对象继承属性和方法,这样可以实现对象之间的复用和扩展。
原型继承的基本概念如下:
- 每个 JavaScript 对象都有一个原型对象(prototype),它是一个普通对象。
- 当访问一个对象的属性或方法时,如果该对象本身没有该属性或方法,JavaScript 引擎会沿着原型链向上查找,直到找到为止。
- 原型链是由多个对象通过原型关联形成的链条,最终的原型对象通常是
Object.prototype,它是 JavaScript 中所有对象的原型。 - 如果在整个原型链上都找不到该属性或方法,则返回
undefined。
在原型继承中,我们可以通过构造函数的原型对象来共享属性和方法。当使用 new 关键字调用构造函数创建对象时,新对象会关联到该构造函数的原型,从而继承原型上的属性和方法。
下面是一个使用原型继承的简单示例:
// 定义一个 Person 构造函数
function Person(name) {this.name = name;
}// 在 Person 的原型上添加一个 greet 方法
Person.prototype.greet = function() {console.log(`Hello, my name is ${this.name}.`);
};// 使用 Person 构造函数创建两个对象
const person1 = new Person('Alice');
const person2 = new Person('Bob');// 调用对象的 greet 方法
person1.greet(); // 输出 "Hello, my name is Alice."
person2.greet(); // 输出 "Hello, my name is Bob."
在上面的代码中,Person 构造函数的原型对象上有一个 greet 方法,通过 new Person() 创建的对象(例如 person1 和 person2)会共享这个方法。这样,我们可以通过原型继承在多个对象之间共享方法,提高代码的重用性和可维护性。
需要注意的是,原型继承只能继承原型上的属性和方法,而不能继承构造函数内部的局部变量。如果需要更灵活的继承方式,可以考虑其他方式,例如组合继承、原型式继承、寄生式继承等。
js的其他继承方式
- 组合继承
组合继承时结合了原型链继承和构造函数继承的一种继承方式。他通过在给子类的构造函数中调用父类的构造函数来继承父类的属性,并通过将子类的原型指向一个新的创建的父类对象来继承的方法。
function Parent(name) {this.name = name;
}Parent.prototype.greet = function() {console.log(`Hello, my name is ${this.name}.`);
};function Child(name, age) {Parent.call(this, name); // 构造函数继承this.age = age;
}Child.prototype = Object.create(Parent.prototype); // 原型链继承
Child.prototype.constructor = Child;const child = new Child('Alice', 5);
child.greet(); // 输出 "Hello, my name is Alice."
- 寄生式继承
寄生式继承是在原型式的基础上增强新对象,添加额外的属性和方法。
function createPerson(proto, age) {const newPerson = createObject(proto); // 原型式继承newPerson.age = age; // 增强对象newPerson.introduce = function() {console.log(`I am ${this.name} and I am ${this.age} years old.`);};return newPerson;
}const person = {name: 'Alice',greet: function() {console.log(`Hello, my name is ${this.name}.`);}
};const newPerson = createPerson(person, 30);
newPerson.greet(); // 输出 "Hello, my name is Alice."
newPerson.introduce(); // 输出 "I am Alice and I am 30 years old."
- 寄生组合式继承
寄生组合式继承是对组合继承的一种优化,通过构造函数继承属性,同时利用Object.create()方法来继承原型,避免了调用父类构造函数时产生的不必要的属性重复赋值问题。
function Parent(name) {this.name = name;
}Parent.prototype.greet = function() {console.log(`Hello, my name is ${this.name}.`);
};function Child(name, age) {Parent.call(this, name); // 构造函数继承this.age = age;
}Child.prototype = Object.create(Parent.prototype); // 原型链继承
Child.prototype.constructor = Child;const child = new Child('Alice', 5);
child.greet(); // 输出 "Hello, my name is Alice."
- 构造函数式继承
function Animal(name) {this.name = name;
}function Dog(name, breed) {Animal.call(this, name);this.breed = breed;
}const dog = new Dog('Buddy', 'Golden Retriever');
console.log(dog.name); // 输出 "Buddy"相关文章:
如何理解原型及原型链?js的继承方式
原型与原型链 原型 在js中,每个对象都有一个原型(prototype)。原型是一个对象,其他对象可以通过原型来共享属性和方法。当我们创建一个对象时,它会自动关联到一个原型对象。 例如:function Person(name, a…...
C# 按表格中的某列排序/查询
using System; using System.Data; using System.Linq;class Program {static void Main(){// 创建一个示例的 DataTable 对象DataTable table new DataTable();table.Columns.Add("ID", typeof(int));table.Columns.Add("Name", typeof(string));table.R…...
【Vue】】img使用 :src 动态绑定图片地址,但是加载图片不成功
问题复现: img标签直接动态绑定图片的相对路径的时候,图片不能正常显示。代码如下所示 <view style"margin: 20rpx" v-for"(item, index) in showSampleImage" :key"index"><u-image :src"item.src"…...
list模拟
之前模拟了string,vector,再到现在的list,list的迭代器封装最让我影响深刻。本次模拟的list是双向带头节点的循环链表,该结构虽然看起来比较复杂,但是却非常有利于我们做删除节点的操作,结构图如下。 由于其节点结构特…...
python字典:怎么取出key对应的值
目录 python中的字典是什么 怎么判断key是否在字典中 怎么取出key对应的值 总结 python中的字典是什么 在Python中,字典(Dictionary)是一种无序且可变的数据类型,用于存储键-值(Key-Value)对。字典通过…...
okvis
论文 Keyframe-Based Visual-Inertial SLAM Using Nonlinear Optimization 摘要 由于两种感知模式的互补性,视觉和惯性线索的融合在机器人中变得很流行。虽然迄今为止大多数融合策略都依赖于过滤方案,但视觉机器人界最近转向了非线性优化方法&#x…...
fabric js双击弹出菜单, 双击弹出输入框 修改文字 群组对象
<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>测试1</title><style type"text/css">body {background-color: #ccc;float: left;}#main {background-color: #fff;border: 1px…...
路由器工作原理
路由器原理 路由概述 路由:跨越从源主机到目标主机的一个互联网络来转发数据包的过程。(为数据包选择路径的过程) 作用:路由器是连接不同网段的。 转发依据: 路由表:路径选择全看路由表,根…...
在centos 7系统docker上构建mysql 5.7
一、VM上已经安装centos 7.9,且已完成docker的构建 二、安装mysql5.7 安装镜像:[rootlocalhost lll]# docker pull mysql:5.7 查看镜像[rootlocalhost lll]# docker images 根据镜像id构建mysql容器,且分配端口号[rootlocalhost lll]# dock…...
数据库的介绍和分类
目录 一、数据库的介绍和分类 二、命令行客户端 三、数据操作 四、查询的基本操作 五、条件查询 六、分组和聚合 资料获取方法 一、数据库的介绍和分类 数据库:长期存储在计算机内、有组织的数据集合 数据库的分类: 关系型数据库 以表格的形式…...
职责链模式——请求的链式处理
1、简介 1.1、概述 很多情况下,在一个软件系统中可以处理某个请求的对象不止一个。例如SCM系统中的采购单审批,主任、副董事长、董事长和董事会都可以处理采购单,他们可以构成一条处理采购单的链式结构。采购单沿着这条链进行传递ÿ…...
docker中涉及的挂载点总结
文章目录 1.场景描述2. 容器信息在主机上位置3. 通过docker run 命令4、通过Dockerfile创建挂载点5、容器共享卷(挂载点)6、最佳实践:数据容器 1.场景描述 在介绍VOLUME指令之前,我们来看下如下场景需求: 1ÿ…...
elasticsearch 官方优化建议
.一般建议 a.不要返回过大的结果集。这个建议对一般数据库都是适用的,如果要获取大量结果,可以使用search_after api,或者scroll (新版本中已经不推荐)。 b.避免大的文档。 2. 如何提高索引速度 a.使用批量请求。为了…...
Kubernetes(K8s)从入门到精通系列之五:K8s的基本概念和术语之应用类
Kubernetes K8s从入门到精通系列之五:K8s的基本概念和术语之应用类 一、Service与Pod二、Label与标签选择器三、Pod与Deployment四、Service的ClusterIP地址五、Service的外网访问问题六、有状态的应用集群七、批处理应用八、应用配置问题九、应用的运维一、Service与Pod Ser…...
DevOps(四)
CD(二) 1. CDStep 1 - 上传代码Step 2 - 下载代码Step 3 - 检查代码Step 4 - 编译代码Step 5 - 上传仓库Step 6 - 下载软件Step 7 - 制作镜像Step 8 - 上传镜像Step 9 - 部署服务2. 整体预览2.1 预览1. 修改代码2. 查看sonarqube检查结果3. 查看nexus仓库4. 查看harbor仓库5.…...
Element-plus侧边栏踩坑
问题描述 el-menu直接嵌套el-menu-item菜单,折叠时不会出现文字显示和小箭头无法隐藏的问题,但是实际开发需求中难免需要把el-menu-item封装为组件 解决 vue3项目中嵌套两层template <template><template v-for"item in list" :k…...
支持多种通信方式和协议方便接入第三方服务器或云平台
2路RS485串口是一种常用的通信接口,可以支持Modbus Slave协议,并可接入SCADA、HMI、DSC、PLC等上位机。它还支持Modbus RTU Master协议,可用于扩展多达48个Modbus Slave设备,如Modbus RTU远程数据采集模块、电表、水表、柴油发电机…...
使用 OpenCV 进行图像模糊度检测(拉普拉斯方差方法)
写在前面 工作中遇到,简单整理人脸识别中,对于模糊程度较高的图像数据,识别率低,错误率高。虽然使用 AdaFace 模型,对低质量人脸表现尤为突出。但是还是需要对 模糊程度高的图像进行丢弃处理当前通过阈值分类ÿ…...
神经网络简单介绍
人工神经网络(artififial neural network) 简称神经网络,它是一种模仿生物神经网络结构和功能的非线性数学模型。 神经网络通过输入层接受原始特征信息,再通过隐藏层进行特征信息的加工和提取,最后通过输出层输出结果。 根据需要神经网络可以…...
16位S912ZVML32F3MKH、S912ZVML31F1WKF、S912ZVML31F1MKH混合信号MCU,适用于汽车和工业电机控制应用。
S12 MagniV微控制器是易于使用且高度集成的混合信号MCU,非常适合用于汽车和工业应用。S12 MagniV MCU提供单芯片解决方案,是基于成熟的S12技术的完整系统级封装 (SiP) 解决方案,在整个产品组合内软件和工具都兼容。 S12 MagniV系统级封装 (S…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
A2A JS SDK 完整教程:快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
多模态图像修复系统:基于深度学习的图片修复实现
多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
