[JS设计模式]Prototype Pattern

Prototype pattern

Prototype pattern可便于同类型的多个对象共享属性。原型(prototype)是JS原生的对象,其他对象可以通过原型链(prototype chain)来访问原型。单独看这句描述可能还是有点儿抽象,下面通过具体的示例来详细阐述。

class Dog {constructor(name) {this.name = name;}bark() {return `Woof!`;}
}const dog1 = new Dog("Kadi");
console.log(dog1.__proto__);
console.log(Dog.prototype);

这里可以看到,constructor有一个name属性;根据ES6类的语法规则,所有在类中定义的属性(本例的属性bark),都自动加入到类的prototype中,Dog类本身有两个属性:constructor和bark。

有两种方式可以查看类的原型中的属性,一种是通过类本身的prototype,另一种是通过实例的__proto__。

请添加图片描述

从上图的调试信息可以看到,Dog类的prototype也是一个object,其中有两个属性bark和constructor,另外还有一个原型对象([[Prototype]])。

请添加图片描述

通常类的实例的__proto__直接引用类的prototype,如果类本身不包含某个属性,JS就会向下搜索原型链,查看在原型链中是否能找到被访问的属性。而在dog1实例中,发现有两个[[prototype]],而且还有包含关系,这就是所谓的原型链。

因为所有实例都可以访问类的原型对象,因此原型模式使得实例在访问相同属性时,不用每次都创建该属性的副本。只需要将属性加入到原型中,则所有的实例都可以访问。另外,在创建实例对象后,也支持添加新的属性到原型中,其他实例对象也可以访问这个新加入的属性。

const dog2 = new Dog("Husky")
Dog.prototype.play = ()=> console.log(`playing`);
dog1.play();

我们再创建一个“Husky”的实例,然后对Dog类的原型添加一个新的属性play,接着通过dog1实例来调用play函数,看能否正常运行。

请添加图片描述
请添加图片描述

从运行结果来看,dog1能正常访问play属性。

再举个例子,定义一个SuperDog并继承Dog,SuperDog有一个fly属性。通过创建一个SuperDog的实例dog3,且dog3调用bark属性

class SuperDog extends Dog {constructor(name) {super(name);}fly() {console.log("Flying!");}
}const dog3 = new SuperDog("Super")
dog3.fly();
dog3.bark();
console.log(dog3.__proto__);

请添加图片描述

此示例中有3级原型链,实例访问属性的搜索路径也非常清晰。dog3._proto_ -> SuperDog.prototype -> Dog.prototype。

完整示例代码

class Dog {constructor(name) {this.name = name;}bark() {console.log("Woof!");}
}class SuperDog extends Dog {constructor(name) {super(name);}fly() {console.log("Flying!");}
}const dog1 = new Dog("Kadi");
console.log(dog1.__proto__);
console.log(Dog.prototype);const dog2 = new Dog("Husky")
Dog.prototype.play = ()=> console.log(`playing`);dog1.play();const dog3 = new SuperDog("Super")
dog3.fly();
dog3.bark();
console.log(dog3.__proto__);debugger

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

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

相关文章

深度解析ShardingJDBC:Java开发者的分库分表利器

一、ShardingSphere ShardingSphere 是一款起源于当当网内部的应用框架。2015年在当当网内部诞 生,最初就叫ShardingJDBC 。2016年的时候,由其中一个主要的开发人员张亮, 带入到京东数科,组件团队继续开发。在国内历经了当当网、电…

Unity 新版 Meta XR SDK 无法导入解决方法

文章目录 📕教程说明📕新版 SDK 说明📕从 Meta 官网导入开发包⭐依赖包⭐如何导入⭐导入后包存放在哪里了?⭐场景样例文件去哪了? 此教程相关的详细教案,文档,思维导图和工程文件会放入 Spatia…

报表控件FastReport VCL 中的新 S3 传输 (Amazon)

在本文中,我们将探讨新的 S3 传输。从功能上来说,S3 与大多数人习惯使用的有很大不同,因此在本文的开头,我们将详细介绍它的主要功能。 FastReport .NET 是适用于.NET Core 3,ASP.NET,MVC和Windows窗体的全…

软件测试/测试开发丨Python内置库学习笔记

内置库 一、内置库OS 1、os概述 os: Operating Systemos 模块的常用功能跨平台的差异 2、os使用 导入 os 模块查看 os 模块使用文档 help(os)dir(os) import os# 查看os模块说明文档 help(os)# 查看os模块的属性和方法 print(dir(os))3、os 常用方法 (1&…

全渠道客服系统推荐:选型指南与最佳实践分享

售后服务是影响客户满意度的最直接的因素。有些企业不注重产品的售后服务,不仅是对客户的伤害,更是对企业品牌的损害。所以,做好售后服务对于企业来讲至关重要。 企业谈到做好售后服务,少不了一款好用的客服系统工具。其中&#…

C# PrinterSettings修改打印机纸张类型,paperType

需求:直接上图,PrinterSettings只能改变纸张大小,打印质量,无法更改打印纸类型 爱普生打印机打印照片已经设置了最高质量,打印图片仍不清晰,需要修改打印纸类型,使用PrintDialog调出对话框&…

2023-12-30 AIGC-LangChain介绍

摘要: 2023-12-30 AIGC-LangChain介绍 LangChain介绍 1. https://youtu.be/Ix9WIZpArm0?t353 2. https://www.freecodecamp.org/news/langchain-how-to-create-custom-knowledge-chatbots/ 3. https://www.pinecone.io/learn/langchain-conversational-memory/ 4. https://de…

乒乓球室计时计费软件,乒乓球馆怎么计时

一,软件程序问答 1、软件有计时功能吗,有会员管理功能吗? 如下图,软件以 佳易王乒乓球馆计时计费软件 为例说明 软件既可以既可以计时计费,也可以会员管理,会员可以用卡片也可以直接用手机号即可。 2、软…

2023年度总结——关于如何认清自己是个FW

前言 不到各位有没有今年过得特别快的感觉。写总结时候一整理,我敲,我今年这么忙? 从三月份开说 三月份 这段时间刚开学,还算比较懵懂。不过初生牛犊不怕虎,那个寒假学了点怎么挖edusrc,开学迫不及待地…

SpireCV项目实战——电诈园区人员及房屋情况识别

项目介绍前言 随着科技的进步和大数据时代的到来,计算机视觉技术逐渐渗透到各个行业领域,为人们的生活和工作带来了诸多便利。近年来,电信诈骗案件频发,给社会带来了巨大的经济损失和心理负担。电诈园区作为电信诈骗的高发区域&a…

弱电工程计算机网络系统基础知识

我们周围无时无刻不存在一张网,如电话网、电报网、电视网、计算机网络等;即使我们身体内部也存在许许多多的网络系统,如神经系统、消化系统等。最为典型的代表即计算机网络,它是计算机技术与通信技术两个领域的结合。 计算机网络的…

Windows 10启用Hyper-V

Windows 10启用Hyper-V 官网教程PowerShell 启用 Hyper-V启用 Hyper-V 角色 我们知道VMware是创建虚拟机的好工具,那Windows平台上有没有虚拟工具呢? 今天我们要讲解的就是Windows才入局的虚拟工具:Hyper-V 官网教程 https://learn.microsof…

table表格中使用el-popover 无效问题解决

实例只针对单个的按钮管用在表格里每一列都有el-popover相当于是v-for遍历了 所以我们在触发按钮的时候并不是单个的触发某一个 主要执行 代码 <el-popover placement"left" :ref"popover-${scope.$index}"> 动态绑定了ref 关闭弹窗 执行deltask…

【数据结构和算法】找出两数组的不同

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 哈希类算法题注意事项 2.2 方法一&#xff1a;哈希法 三、代码 3.1 方法一&#xff1a;哈希法 四…

Linux文件类型

在 Linux 系统中&#xff1a; b 文件类型&#xff1a;代表块设备文件。块设备文件通常是对应于设备&#xff0c;如硬盘驱动器或其他块设备&#xff0c;使用块级别的 I/O 操作。 c 文件类型&#xff1a;代表字符设备文件。字符设备文件通常是对应于设备&#xff0c;如串口、键盘…

[年终总结]人生就是大闹一场

讲真的,感觉过去这一年的体验,非常精彩,哈哈哈哈 体验了 裸辞,并没有想象中那么可怕,也没有想象中那么焦虑 经历了 入职之后又被裁员,心情没有那么大的起伏 解锁了 深圳/佛山/珠海/澳门/昆明/大理/新疆/成都 ,见了很多人,碰撞出了很多 idea 体会了 没有目的的去做一件事情,是什…

GitHub的2FA验证问题解决工具

文章目录 前言认识2FA开源工具使用&#xff1a;AuthenticatorPro获取AuthenticatorPro的安卓APK如何使用 参考文章 前言 打开GitHub跳出来这个提示&#xff0c;需要进行验证&#xff1a; 如何解决呢&#xff1f;方案有很多&#xff0c;我们可以使用开源的一个工具&#xff1a;…

java图书管理系统

主要模块&#xff1a; 为用户开通借书服务增加图书信息登记图书借出信息 技术栈&#xff1a; JSPServletTomcat9.0IDEAMysql 前台登录验证使用框架 数据库脚本包括登录用户名和密码已经写在了数据库脚本.sql 中 解压“需要的jar包”添加到项目的dependency中 运行效果&a…

2023年度总结———豫见及遇见

目录 一.AI 人工智能方向 二.华为数通网络方向 三.腾讯云AI绘画方向 四.年度心得总结板块 博主C站主页&#xff1a;知孤云出岫_网络,计算机,计算机网络教案-CSDN博客 博主腾讯云主页&#xff1a; 知孤云出岫 - 个人中心 - 腾讯云开发者社区-腾讯云 2023年年度词&#xff1a…

移动端开发框架mui代码在安卓模拟器上运行(HbuilderX连接到模拟器)

开发工具 HBuilder X 3.8.12.20230817 注意&#xff1a;开发工具尽量用最新的或较新的。太旧的版本在开发调试过程中可能会出现莫名其妙的问题。 1、电脑下载安装安卓模拟器 我这里使用的是 夜神模拟器 &#xff0c;也可以选择其他安卓模拟器 夜神模拟器官网&#xff1a;夜神安…