【javascript】原型继承

在编程中,我们经常会想获取并扩展一些东西。

例如,我们有一个 user 对象及其属性和方法,并希望将 adminguest 作为基于 user 稍加修改的变体。我们想重用 user 中的内容,而不是复制/重新实现它的方法,而只是在其之上构建一个新的对象。

原型继承(Prototypal inheritance) 这个语言特性能够帮助我们实现这一需求。

[[Prototype]]

在 JavaScript 中,对象有一个特殊的隐藏属性 [[Prototype]](如规范中所命名的),它要么为 null,要么就是对另一个对象的引用。该对象被称为“原型”:

在这里插入图片描述

当我们从 object 中读取一个缺失的属性时,JavaScript 会自动从原型中获取该属性。在编程中,这被称为“原型继承”。很快,我们将通过很多示例来学习此类继承,以及基于此类继承的更炫酷的语言功能。

属性 [[Prototype]] 是内部的而且是隐藏的,但是这儿有很多设置它的方式。

其中之一就是使用特殊的名字 __proto__,就像这样:

let animal = {eats: true
};
let rabbit = {jumps: true
};rabbit.__proto__ = animal; // 设置 rabbit.[[Prototype]] = animal

现在,如果我们从 rabbit 中读取一个它没有的属性,JavaScript 会自动从 animal 中获取。

例如:

let animal = {eats: true
};
let rabbit = {jumps: true
};rabbit.__proto__ = animal; // (*)// 现在这两个属性我们都能在 rabbit 中找到:
alert( rabbit.eats ); // true (**)
alert( rabbit.jumps ); // true

这里的 (*) 行将 animal 设置为 rabbit 的原型。

alert 试图读取 rabbit.eats (**) 时,因为它不存在于 rabbit 中,所以 JavaScript 会顺着 [[Prototype]] 引用,在 animal 中查找(自下而上):
在这里插入图片描述

在这儿我们可以说 “animalrabbit 的原型”,或者说 “rabbit 的原型是从 animal 继承而来的”。

因此,如果 animal 有许多有用的属性和方法,那么它们将自动地变为在 rabbit 中可用。这种属性被称为“继承”。

如果我们在 animal 中有一个方法,它可以在 rabbit 中被调用:

let animal = {eats: true,walk() {alert("Animal walk");}
};let rabbit = {jumps: true,__proto__: animal
};// walk 方法是从原型中获得的
rabbit.walk(); // Animal walk

该方法是自动地从原型中获得的,像这样:
在这里插入图片描述

原型链可以很长:

let animal = {eats: true,walk() {alert("Animal walk");}
};let rabbit = {jumps: true,__proto__: animal
};let longEar = {earLength: 10,__proto__: rabbit
};// walk 是通过原型链获得的
longEar.walk(); // Animal walk
alert(longEar.jumps); // true(从 rabbit)

在这里插入图片描述

现在,如果我们从 longEar 中读取一些它不存在的内容,JavaScript 会先在 rabbit 中查找,然后在 animal 中查找。

这里只有两个限制:

  1. 引用不能形成闭环。如果我们试图给 __proto__ 赋值但会导致引用形成闭环时,JavaScript 会抛出错误。
  2. __proto__ 的值可以是对象,也可以是 null。而其他的类型都会被忽略。

当然,这可能很显而易见,但是仍然要强调:只能有一个 [[Prototype]]。一个对象不能从其他两个对象获得继承。

__proto__[[Prototype]] 的因历史原因而留下来的 getter/setter

  • 初学者常犯一个普遍的错误,就是不知道 __proto__[[Prototype]] 的区别。
  • 请注意,__proto__ 与内部的 [[Prototype]] 不一样__proto__[[Prototype]] 的 getter/setter。稍后,我们将看到在什么情况下理解它们很重要,在建立对 JavaScript 语言的理解时,让我们牢记这一点。
  • __proto__ 属性有点过时了。它的存在是出于历史的原因,现代编程语言建议我们应该使用函数 Object.getPrototypeOf/Object.setPrototypeOf 来取代 __proto__ 去 get/set 原型。稍后我们将介绍这些函数。
  • 根据规范,__proto__ 必须仅受浏览器环境的支持。但实际上,包括服务端在内的所有环境都支持它,因此我们使用它是非常安全的。
  • 由于 __proto__ 标记在观感上更加明显,所以我们在后面的示例中将使用它。

写入不使用原型

原型仅用于读取属性。

对于写入/删除操作可以直接在对象上进行。

在下面的示例中,我们将为 rabbitwalk 属性赋值:

let animal = {eats: true,walk() {/* rabbit 不会使用此方法 */}
};let rabbit = {__proto__: animal
};rabbit.walk = function() {alert("Rabbit! Bounce-bounce!");
};rabbit.walk(); // Rabbit! Bounce-bounce!

从现在开始,rabbit.walk() 将立即在对象中找到该方法并执行,而无需使用原型:
在这里插入图片描述

访问器(accessor)属性是一个例外,因为赋值(assignment)操作是由 setter 函数处理的。因此,写入此类属性实际上与调用函数相同。

也就是这个原因,所以下面这段代码中的 admin.fullName 能够正常运行:

let user = {name: "John",surname: "Smith",set fullName(value) {[this.name, this.surname] = value.split(" ");},get fullName() {return `${this.name} ${this.surname}`;}
};let admin = {__proto__: user,isAdmin: true
};alert(admin.fullName); // John Smith (*)// setter triggers!
admin.fullName = "Alice Cooper"; // (**)alert(admin.fullName); // Alice Cooper,admin 的内容被修改了
alert(user.fullName);  // John Smith,user 的内容被保护了

(*) 行中,属性 admin.fullName 在原型 user 中有一个 getter,因此它会被调用。在 (**) 行中,属性在原型中有一个 setter,因此它会被调用。

“this” 的值

在上面的例子中可能会出现一个有趣的问题:在 set fullName(value)this 的值是什么?属性 this.namethis.surname 被写在哪里:在 user 还是 admin

答案很简单:this 根本不受原型的影响。

无论在哪里找到方法:在一个对象还是在原型中。在一个方法调用中,this 始终是点符号 . 前面的对象。

因此,setter 调用 admin.fullName= 使用 admin 作为 this,而不是 user

这是一件非常重要的事儿,因为我们可能有一个带有很多方法的大对象,并且还有从其继承的对象。当继承的对象运行继承的方法时,它们将仅修改自己的状态,而不会修改大对象的状态。

例如,这里的 animal 代表“方法存储”,rabbit 在使用其中的方法。

调用 rabbit.sleep() 会在 rabbit 对象上设置 this.isSleeping

// animal 有一些方法
let animal = {walk() {if (!this.isSleeping) {alert(`I walk`);}},sleep() {this.isSleeping = true;}
};let rabbit = {name: "White Rabbit",__proto__: animal
};// 修改 rabbit.isSleeping
rabbit.sleep();alert(rabbit.isSleeping); // true
alert(animal.isSleeping); // undefined(原型中没有此属性)

结果示意图:
在这里插入图片描述

如果我们还有从 animal 继承的其他对象,像 birdsnake 等,它们也将可以访问 animal 的方法。但是,每个方法调用中的 this 都是在调用时(点符号前)评估的对应的对象,而不是 animal。因此,当我们将数据写入 this 时,会将其存储到这些对象中。

所以,方法是共享的,但对象状态不是。

for…in 循环

for..in 循环也会迭代继承的属性。

例如:

let animal = {eats: true
};let rabbit = {jumps: true,__proto__: animal
};// Object.keys 只返回自己的 key
alert(Object.keys(rabbit)); // jumps// for..in 会遍历自己以及继承的键
for(let prop in rabbit) alert(prop); // jumps,然后是 eats

如果这不是我们想要的,并且我们想排除继承的属性,那么这儿有一个内建方法 obj.hasOwnProperty(key):如果 obj 具有自己的(非继承的)名为 key 的属性,则返回 true

因此,我们可以过滤掉继承的属性(或对它们进行其他操作):

let animal = {eats: true
};let rabbit = {jumps: true,__proto__: animal
};for(let prop in rabbit) {let isOwn = rabbit.hasOwnProperty(prop);if (isOwn) {alert(`Our: ${prop}`); // Our: jumps} else {alert(`Inherited: ${prop}`); // Inherited: eats}
}

这里我们有以下继承链:rabbitanimal 中继承,animalObject.prototype 中继承(因为 animal 是对象字面量 {...},所以这是默认的继承),然后再向上是 null
在这里插入图片描述

注意,这有一件很有趣的事儿。方法 rabbit.hasOwnProperty 来自哪儿?我们并没有定义它。从上图中的原型链我们可以看到,该方法是 Object.prototype.hasOwnProperty 提供的。换句话说,它是继承的。

……如果 for..in 循环会列出继承的属性,那为什么 hasOwnProperty 没有像 eatsjumps 那样出现在 for..in 循环中?

答案很简单:它是不可枚举的。就像 Object.prototype 的其他属性,hasOwnPropertyenumerable:false 标志。并且 for..in 只会列出可枚举的属性。这就是为什么它和其余的 Object.prototype 属性都未被列出。

几乎所有其他键/值获取方法都忽略继承的属性

  • 几乎所有其他键/值获取方法,例如 Object.keysObject.values 等,都会忽略继承的属性。
  • 它们只会对对象自身进行操作。不考虑 继承自原型的属性。

总结

  • 在 JavaScript 中,所有的对象都有一个隐藏的 [[Prototype]] 属性,它要么是另一个对象,要么就是 null
  • 我们可以使用 obj.__proto__ 访问它(历史遗留下来的 getter/setter,这儿还有其他方法,很快我们就会讲到)。
  • 通过 [[Prototype]] 引用的对象被称为“原型”。
  • 如果我们想要读取 obj 的一个属性或者调用一个方法,并且它不存在,那么 JavaScript 就会尝试在原型中查找它。
  • 写/删除操作直接在对象上进行,它们不使用原型(假设它是数据属性,不是 setter)。
  • 如果我们调用 obj.method(),而且 method 是从原型中获取的,this 仍然会引用 obj。因此,方法始终与当前对象一起使用,即使方法是继承的。
  • for..in 循环在其自身和继承的属性上进行迭代。所有其他的键/值获取方法仅对对象本身起作用。

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

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

相关文章

Cisco firepower 2140 run ASA and config failover

1 背景 here we got 2 cisco firepower 2140 hardware appliance we’re planning to run ASA on it. and config failover for Primary Unit and Secondary Unit 现场2台Cisco firepower 2140防火墙, 运行ASA模式, 双机组HA,心跳线使用E1/1…

【包远程安装运行】SpringBoot+Mysql实现的图书商城平台+演示视频+开发文档(论文模板)

今天发布的是一款由SpringBootMySQL实现的在线图书商城系统源码,系统主要实现的功能分前台用户和后台管理。 前台功能主要有: 图书物展示、图书分类展示、图书搜索、用户登录注册、图书收藏、图书添加购物车、用户个人信息修改、用户充值提交、购物车图…

期货开户无情地执行交易策略

不是我们偶尔做的事情塑造了我们的生活,而是我们一贯地做的事情塑造我们的生活。这句话告诉我们,不是偶尔做的事情决定我们的人生轨迹,而是我们持之以恒的行为。我认为这个金句最鼓舞人心的地方在于,我们应该容许自己偶尔出错或失…

http和socks5代理哪个隐蔽性更强?

HTTP代理和SOCKS5代理各有其优缺点,但就隐蔽性而言,SOCKS5代理通常比HTTP代理更隐蔽。以下是它们的比较: HTTP代理: 透明性较高:HTTP代理在HTTP头中会透露原始客户端的IP地址,这使得它相对不太隐蔽。…

使用IDA查看二进制

文章目录 1 IDA是什么?2 IDA界面3 汇编基础4 IDA查看hello world二进制5 查看带有条件语句和函数调用的二进制6 总结 1 IDA是什么? IDA是一款反编译软件,可以查看二进制的汇编代码,常用于逆向和问题定位。与其他商业软件类似&…

C++11特性--统一的列表初始化

个人主页:Lei宝啊 愿所有美好如期而遇 {} 初始化及std:initializer_list 一 这种初始化方式我们建议用第一种,但是以后看见下面两种也不要感到疑惑,是可以这样初始化的。 int main() {int a 1;int b { 1 };int c{ 1 };return 0; } 二…

数据链路层(三):流量控制和链路管理

目录 1 流量控制和链路管理1.1 流量控制介绍1、什么是流量控制2、流量控制的功能和方法 1.2 停止等待1.3 滑动窗口1、滑动窗口2、发送方滑动窗口3、接收方滑动窗口4、滑动窗口的流量控制使用滑动窗口如何实现流量控制的为什么滑动窗口的大小比模数小1滑动窗口控制流量采取的措施…

【SpringBoot3+Mybatis】框架快速搭建

文章目录 GitHub 项目一、依赖二、 配置文件三、启动类四、SpringBoot3兼容Druid报错五、工具类5.1 结果封装类5.2 解决枚举类5.3 MD5加密工具类 GitHub 项目 springboot-part——springboot-integrate-07 Mybatis-plus版完整CRUD项目文档记录: 【SpringBoot3Myba…

“神器”巩膜镜,为屈光不正及难治角膜病患者带来希望!

“我不想再戴回框架眼镜了,但是由于角膜疾病问题,我曾戴普通隐形眼镜和RGP都会出现极强的异物感,非常不舒服!现在我该怎么办呢?”四川眼科医院门诊,张女士疑惑地问到。 28岁的张女士是一名圆锥角膜患者&am…

Pixelmator Pro:专业级图像编辑,触手可及mac版

Pixelmator Pro是一款功能强大的图像编辑软件,专为Mac操作系统设计。它拥有直观的界面和丰富的工具,能够满足用户各种图像处理需求。 Pixelmator Pro软件获取 首先,Pixelmator Pro支持多种文件格式,包括JPEG、PNG、GIF、BMP、TIF…

【包远程安装运行】SpringBoot+Mysql实现的美食分享菜谱制作平台+演示视频+开发文档(论文模板)

今天发布的是由【猿来入此】的优秀学员独立做的一个基于springboot脚手架的美食分享菜谱制作平台系统,该系统分为前台和后台,多用户分享平台。主要实现了 除脚手架功能以外下面是系统的功能: 前台普通用户:注册、登录、首页、美食…

政安晨:【深度学习实践】【使用 TensorFlow 和 Keras 为结构化数据构建和训练神经网络】(三)—— 随机梯度下降

政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras实战演绎 希望政安晨的博客能够对您有所裨益,如有不足之处,欢迎在评论区提出指正! 这篇文章中,咱们将使用Keras和TensorFlow…

GPT神器级插件Code Interpreter

自去年 3 月份以来,人们对 GPT-4 API 的兴趣激增,“有数百万开发人员请求访问”。OpenAI 在一篇博客文章中,分享了使用 GPT-4 正在进行的一系列令人兴奋的创新,并阐明了未来的愿景:未来基于聊天的大模型可以用在任意的…

每秒批量插入10000条数据到MySQL中,资源消耗(带宽、IOPS)有多少?

文章目录 🔊博主介绍🥤本文内容起因代码资源情况改造 📢文章总结📥博主目标 🔊博主介绍 🌟我是廖志伟,一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、…

LeetCode每日一题[c++]-322.零钱兑换

题目描述 给你一个整数数组 coins ,表示不同面额的硬币;以及一个整数 amount ,表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额,返回 -1 。 你可以认为每种硬币的数量是无…

照片变动图怎么操作?一招在线转换

GIF动画是一种特殊的图像文件格式,它可以在一张图像中显示多个图像帧,并以循环播放的方式展示,从而实现动态效果。由于GIF格式的广泛支持和较小的文件大小,它成为了互联网上常见的动画格式之一。想要制作gif动画图片可以使用Gif制…

链动2+1模式 完全合法合规 不存在传销问题!!

在商业经营中,营销策略的巧妙运用对于提升产品销量和扩大品牌影响力至关重要。然而,企业在制定和执行营销策略时,必须严格遵循法律法规,以免陷入法律风险。本文将着重探讨链动21模式的法律要素,以论证其合规性。 一、链…

穿越地心:3D可视化技术带你领略地球内部奇观

在广袤无垠的宇宙中,地球是一颗充满生机与奥秘的蓝色星球。我们每天都生活在这颗星球上,感受着它的温暖与恩赐,却往往忽略了它深邃的内部世界。 想象一下,你能够穿越时空,深入地球的核心,亲眼目睹那些亿万年…

nodeJs中实现连表查询

nodeJs中实现连表查询 router.post(/getOrder, async function(req, res, next) {let userId req.body.phone;let sql select * from orders where userId?;let orders await new Promise((resolve, reject) > {connection.query(sql, [userId], function(error, resul…

MapReduce配置和Yarn的集群部署

一、集群环境,还是如下三台服务器 192.168.32.101 node1192.168.32.102 node2192.168.32.103 node3 二、YARN架构 YARN,主从架构,有2个角色 主(Master)角色:ResourceManager从(Slave&#x…