[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.mfbz.cn/a/282273.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

过滤器、拦截器、切面

过滤器、拦截器、切面作用范围 原理不同范围不同具体参考[过滤器、拦截器、切面异同](https://juejin.cn/post/7110104873265758222) 执行顺序:过滤器>拦截器>切面 过滤器、拦截器属于请求层面的拦截;切面属于方法层面的拦截 原理不同 过滤器和拦…

Zookeeper-Zookeeper应用场景实战

1. Zookeeper Java客户端实战 ZooKeeper应用的开发主要通过Java客户端API去连接和操作ZooKeeper集群。 可供选择的Java客户端API有: ZooKeeper官方的Java客户端API。 第三方的Java客户端API,比如Curator。 ZooKeeper官方的客户端API提供了基本的操作…

Select工作原理

I/O多路复用是一种并发处理的机制,允许一个进程通过一种机制监视多个描述符,从而在有多个I/O操作需要处理时选择其中之一进行服务。select 函数是一种常见的实现 I/O 多路复用的系统调用,它允许一个进程同时监视多个文件描述符的可读性、可写…

机器学习:贝叶斯估计在新闻分类任务中的应用

文章摘要 随着互联网的普及和发展,大量的新闻信息涌入我们的生活。然而,这些新闻信息的质量参差不齐,有些甚至包含虚假或误导性的内容。因此,对新闻进行有效的分类和筛选,以便用户能够快速获取真实、有价值的信息&…

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

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

ARM CCA机密计算软件架构之内存加密上下文(MEC)

内存加密上下文(MEC) 内存加密上下文是与内存区域相关联的加密配置,由MMU分配。 MEC是Arm Realm Management Extension(RME)的扩展。RME系统架构要求对Realm、Secure和Root PAS进行加密。用于每个PAS的加密密钥、调整或加密上下文在该PAS内是全局的。例如,对于Realm PA…

ACW741.斐波那契额数列

输入整数 N,求出斐波那契数列中的第 N项是多少。 斐波那契数列的第 0项是 0,第 1项是 1,从第 2 项开始的每一项都等于前两项之和。输入格式 第一行包含整数 T,表示共有T个测试数据。接下来 T行,每行包含一个整数 N。输…

Android长按图标展示快捷方式

if (Build.VERSION.SDK_INT > Build.VERSION_CODES.O) {new Thread(() -> {// 获取ShortcutManager实例ShortcutManager shortcutManager getSystemService(ShortcutManager.class);// 创建要添加的快捷方式ShortcutInfo.Builder shortcutBuilder new ShortcutInfo.Bui…

UGF框架中尝试加载AB资源来运行案例工程失败的解决办法

打开GameFramework场景,在编辑器模式下找到 表示当前资源加载模式是编辑器模式。(个人理解是和正常开发下的资源加载模式无异) CXK补充的内容:需要找到如下图的脚本,把资源加载的模式改为Package模式(单机…

com.microsoft.sqlserver.jdbc.SQLServerException: 驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接。错误:“The

配置文件示例: # SQL Server 数据源配置 spring.datasource.dynamic.datasource.sqlserver.urljdbc:sqlserver://100.100.0.0\\shili;databaseNamecs; spring.datasource.dynamic.datasource.sqlserver.usernamesa spring.datasource.dynamic.datasource.sqlserver.password sp…

【LearnOpenGL基础入门——5】着色器

目录 一.简介 二.GLSL 三.数据类型 四.输入与输出 五.Uniform 六.更多属性 一.简介 着色器(Shader)是运行在GPU上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说,着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立…

python 1200例——【13】计算阶乘

阶乘是一个数学概念,表示为 n!(读作 n 的阶乘),表示从 1 到 n 的所有正整数的乘积。例如,5! = 5 4 3 2 1 = 120。 在 Python 中,我们可以使用多种方法来计算阶乘。以下是其中的一些方法: 方法一:使用循环 这是最基本的方法,我们通过循环从 1 到 n 依次乘起来。…

【Linux】内核编译 镜像制作

文章目录 一、Ubuntu内核编译1.1 为什么自己编译内核1.2 Ubuntu 内核源码下载1.21 内核的作用1.22 Linux内核与ubuntu内核1.23 Ubuntu内核源码获取 1.3 在Windows系统下编译ubuntu内核1.4 在Linux系统下编译ubuntu内核 二、镜像制作 一、Ubuntu内核编译 1.1 为什么自己编译内核…

拓扑排序

目录 拓扑排序 有向图的拓扑排序 拓扑排序 一个有向图,如果图中有入度为 0 的点,就把这个点删掉,同时也删掉这个点所连的边。 一直进行上面出处理,如果所有点都能被删掉,则这个图可以进行拓扑排序。 举例子&#…

【机器学习】人工智能概述

人工智能(Artificial Intelligence,简称AI)是一门研究如何使机器能够像人一样思考、学习和执行任务的学科。它是计算机科学的一个重要分支,涉及机器学习、自然语言处理、计算机视觉等多个领域。 人工智能的概念最早可以追溯到20世…

vue3框架笔记

Vue Vue 是一个渐进式的前端开发框架,很容易上手。Vue 目前的版本是 3.x,但是公司中也有很多使用的是 Vue2。Vue3 的 API 可以向下兼容 2,Vue3 中新增了很多新的写法。我们课程主要以 Vue3 为主 官网 我们学习 Vue 需要转变思想&#xff0…

[YoloV8目标检测与实例分割——目标检测onnx模型推理]

一、模型转换 1.onnxruntime ONNX Runtime(ONNX Runtime或ORT)是一个开源的高性能推理引擎,用于部署和运行机器学习模型。它的设计目标是优化执行使用Open Neural Network Exchange(ONNX)格式定义的模型,ON…

设备健康管理系统助力制造企业实现数字化转型

在当今快速变革的制造业环境中,数字化转型已成为制造企业保持竞争力和实现可持续发展的关键。在这个数字化转型的浪潮中,设备健康管理系统正发挥着重要的作用。设备健康管理系统通过实时监测、预测分析和智能诊断等功能,为制造企业提供了全面…

亚马逊云科技Amazon Q,一款基于生成式人工智能的新型助手

近日,亚马逊云科技宣布推出Amazon Q,这是一款基于生成式人工智能(AI)的新型助手,专为辅助工作而设计,可以根据您的业务量身定制。通过连接到公司的信息存储库、代码、数据和企业系统,可以使用Am…

Redis(认识NoSQL,认识redis,安装redis,redis桌面客户端,redis常见命令,redis的Java客户端)

文章目录 Redis快速入门1.初识Redis1.1.认识NoSQL1.1.1.结构化与非结构化1.1.2.关联和非关联1.1.3.查询方式1.1.4.事务1.1.5.总结 1.2.认识Redis1.3.安装Redis1.3.1.依赖库1.3.2.上传安装包并解压1.3.3.启动1.3.4.默认启动1.3.5.指定配置启动1.3.6.开机自启 1.4.Redis桌面客户端…