JS设计模式之“语言之魂” - 原型模式

image.png

前言

当我们学习JavaScript的时候,经常会听到原型(prototype)、原型链(prototype chain)和原型模式(prototype pattern)这些概念,它们之间有什么关联呢?怎么样才能使用好原型模式呢?

一. “语言之魂” - 原型模式

829语言之魂-1.png

概念

原型模式是JavaScript语言的核心机制之一,是JavaScript中最基本的设计模式,因此被称为“语言之魂”,要想在项目开发使用好原型模式,我们必须要了解原型以及原型链的概念,从而才会理解它们和原型模式之间的关系:

  1. 原型(prototype): 原型是JavaScript中对象的一个属性,它允许对象继承属性和方法。每个对象都有一个原型对象,对象可以通过__proto__属性来访问自己的原型对象。原型对象可以包含属性和方法,并且可以通过对象实例访问和共享。

  2. 原型链(prototype chain): 原型链是一通过原型对象之间的链式关系实现对象属性和方法的继承和共享机制。原型链通过对象的__proto__属性指向原型对象,从而形成一个原型的层级链条。访问一个对象的属性或方法时,JavaScript会沿着原型链向上查找,直到找到或者到达原链的末端(Object)。这样,对象可以继承原型对象的属性方法,实现了属性和方法的共享。

  3. 原型模式(prototype pattern): 原型模式是一种设计模式,它利用JavaScript中的原型机制来创建对象。通过定义构造函数,并将构造函数的原对象设置为一个模板,可以基于原型关系来实现对象的创建和属性的继承。通过使用原型模式,可以避免在每个对象实例中重复定义相同的属性和方法,实现了对象的复用和提升性能。

关系

每个对象都有一个原型,并且原型对象之间形成了原型链的关系。原型链通过__proto__属性连接起来,实了属性和方法的继承和共享。原型模式则是利用原型链关系来创建对象,并实现了对象创建和属性继承的设计模式。以可以说,原型是原型链的基础,原型链是实现对象属性和方法继承的机制,而原型模式是基于原型链关系的对象创建属性继承的设计模式。

本文不过多的讲解原型及原型链,感兴趣可以阅读之前文章:深入理解对象的原型和原型链

二. 如何使用原型模式

原型模式.png

当使用原型模式时,我们可以按照以下步骤来创建和使用对象的实例:

  1. 定义原型对象:创建一个包含需要共享的属性和方法的原型对象。

const personPrototype = {
  greet: function() {
    console(`Hello, my name isthis.name}`);
  }
};
  1. 创建新的对象实例并继承型:使用`Object.create方法创建一个新的对象实例,并将其型指向原型对象。

const person1 = Object.create(personPrototype);
person1.name = "Alice";
person1.greet(); // 输出:Hello, my name is Alice
  1. 在新对象实例上定义自己的属性和方法:根据需要,在新的对象实例上定义自己的属性和方法。

const person2 = Object.create(personPrototype);
person2.name = "Bob";
person2.age = 30;
person2.introduce = function() {
  console.log(`I am ${this.name} and I am ${this.age} years old.`);
};
person2.introduce(); // 输出:I am Bob and I am 30 years old.

在上面的例子中,我们首先定义了一个原型对象personPrototype,它包含了一个greet方法。接着,我们使用Object.create()方法创建了两新的对象实例person1person2,并且它们都继承了personPrototype属性和方法。

然后我们为person1实例设置了name属性,并调用了greet方法,输出了相应结果。同样地,我们也为person实例设置了nameage属性,并定义了一个introduce方法,用于打印自我介绍的信息。

通过原型模式,我们根据需要创建多个对象实例,并且这些实例可以共享同一个原型对象的属性和方法。这样既节省了内存空间,也可以实现属性和方法的共享和继承。

注意: 在修改对象实例的属性时,可能会影响原型和其他实例。对于每个对象实例而言,如果希望拥有独立的属性,则需要在对象实例上重新定义这些属性,而不是在原型对象上定义。

三. 深入原型模式的实现原理

JavaScript原型模式的实现原理涉及到原型链的概念。每个对象都有一个隐藏的__proto__属性,指向其原型对象(即它的父对象)。原型链实际上就是通过__proto__属性将对象连接起来形成的一条链。

当我们访问一个对象的属性或方法时,JavaScript引擎首先在当前对象中查找,如果找不到,就会沿着原型链向上查找,直到找到对应的属性或方法,或者到达原型链的顶端(null)为止。

在JavaScript中,当我们创建一个对象时,可以通过Object.create()方法指定一个原型对象,从而创建一个新的对象并继承原型对象的属性和方法。新对象的__proto__指针会指向原型对象。

相应地,我们还可以使用Object.getPrototypeOf()方法获取一个对象的原型对象,或者使用Object.setPrototypeOf()方法设置一个对象的原型对象。

当我们访问对象的属性或方法时,JavaScript引擎会按照以下步骤进行查找:

  1. 首先,它会查找对象本身是否具有相应的属性或方法。如果找到,就直接使用该属性或方法。

  2. 如果对象本身没有相应的属性或方法,它会通过__proto__指针指向的原型对象去查找。如果原型对象具有相应的属性或方法,就直接使用。

  3. 如果原型对象没有相应的属性或方法,引擎会继续沿着原型链向上查找,直到找到对应的属性或方法,或者到达原型链的顶端(null

  4. 如果最终没有找到相应的属性或方法,引擎会返回undefined

这种通过__proto__指针沿着原型链查找的机制,就是JavaScript原型模式的实现原理。通过原型的继承,我们可以实现对象之间的属性和方法的共享。

需要注意的是,当我们修改一个对象的属性时,如果该属性位于原型链上,那么会直接修改原对象的属性值。所以,如果想要每个对象实例都具有独立的属性,应该对象实例上重新定义这些属性,而不是在原型上定义。

总结一下,JavaScript原型模式通过原型链实现对象之间属性和方法继承。通过原型链的机制,我们可以在对象实例之间共享属性和方法,并实现属性和方法的查找。这种机制提高了对象的重用性,并使代码更加简洁和易于维护。

四. 原型模式的应用场景

原型模式在JavaScript中有广泛的应用场景,下面是几种常见的应用场景:

1. 创建对象实例并共享方法

image.png

假设我们需要创建多个具有相同方法的对象实例,比如创建多个 小猫 的对象实例,并且它们都具有相同的方法,比如meow()方法。可以使用原型模式在猫的原型对象上定义meow()方法,并将多个猫的对象实例的原型指向该原型对象,这样它们就共享了相同的方法。

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

Cat.prototype.meow = function() {
  console.log(this.name + ' says meow!');
};

var cat1 = new Cat('Tom');
var cat2 = new Cat('Jerry');

cat1.meow(); // 输出:Tom says meow!
cat2.meow(); // 输出:Jerry says meow!

2. 对象的继承

image.png

各种不同形状的图形对象

假设我们有一个基础对象各种个样的图形Shape,它具有getArea()方法。我们想要创建一个继承自ShapeRectangle对象,它具有自己的widthheight属性,并且可以调用父类的getArea()方法。可以使用原型模式,将Shape的实例设置为Rectangle对象的原型,实现继承关系。

function Shape() {}

Shape.prototype.getArea = function() {
  return 0;
};

function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}

Rectangle.prototype = new Shape();
Rectangle.prototype.constructor = Rectangle;

Rectangle.prototype.getArea = function() {
  return this.width * this.height;
};

var rect = new Rectangle(5, 10);
console.log(rect.getArea()); // 输出:50

3. 动态扩展和修改对象

image.png

假设我们有一个基础对象Person,它具有name属性和sayHello()方法。我们想要动态地为对象添加新的方法,例如sayGoodbye()方法。可以直接在Person的原型对象上添加新的方法,而不需要逐个修改现有对象实例。

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

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var person = new Person('John');
person.sayHello(); // 输出:Hello, my name is John

Person.prototype.sayGoodbye = function() {
  console.log('Goodbye, ' + this.name);
};

person.sayGoodbye(); // 输出:Goodbye, John

以上是几个典型的JavaScript原型模式的应用场景。通过原型链实现共享属性和方法、继承关系以及动态扩展和修改对象等操作,最终提高代码的重用性和灵活性。

五. 使用原型模式的优缺点

通过以上对原型模式的理解,我们可以总结出使用原型模式有以下的优点:

  1. 重用性和性能优化:原型模式可以将方法和属性共享给所有实例化的对象,避免了在每个对象实例中重复创建相同的方法和属性。这提高了代码的重用性,减少了内存消耗,提升了性能。

  2. 灵活的对象扩展:使用原型模式,可以动态地向原型对象添加、修改和删除属性和方法,这样会自动反映在所有对象实例中。这种灵活性使得可以方便地扩展和修改对象的功能,而无需修改已有的对象实例。

  3. 实现对象的继承:原型模式允许将一个对象设置为另一个对象的原型,从而实现对象之间的继承关系。这样,在子对象上可以访问和重写父对象的属性和方法,实现了类似于面向对象的继承机制。

然而,原型模式也有一些缺点:

  1. 属性共享和修改的潜在问题:当多个对象实例共享一个原型对象时,如果对原型对象的属性进行修改,会影响到所有对象实例。这可能会导致意外的副作用,尤其是在动态修改原型对象时需要谨慎对待。

  2. 难以实现私有属性和方法:在原型模式中,所有的属性和方法都是公开的,无法实现对外隐藏的私有属性和方法。虽然有一些技巧可以模拟私有属性,但并不能真正实现封装性。

  3. 构造函数参数的传递:在原型模式中,构造函数的参数只能通过对象实例的属性赋值来传递。这可能会导致在创建对象实例时的参数传递不够直观和灵活。

综上所述,JavaScript原型模式具有重用性性能优化灵活的对象扩展和对象继承的优点,但也存在属性共享修改问题、难以实现私有和方法,以及构造函数参数传递的局限缺点。在使用原型模式时,需要注意这些特点和限制,确保合理使用以符合需求和预期。

总结

原型模式是JavaScript语言的核心机制之一,同时也是JavaScript中最基本的设计模式,因此被称为“语言之魂”,通过对象的原型实现对象的继承和属性共享,同时基于原型链的机制实现对象的创建和属性的继承,原型模式在JavaScript中具有广泛的应用场景,使用原型模式可以节省内存,增加灵活性和可扩展性等。

但是在使用原型模式时,需要注意以下几点:

  1. 修改对象实例的属性可能会影响原型和其他实例:当我们修改对象实例的属性时,可能会影响到原型和其他实例。如果希望每个对象实例都有独立的属性,需要在对象实例重新定义这些属性,而不是在原型对象上定义。

  2. 原型链的长度和效率:随着原型链的增长,查找属性和方法可能会变慢。因此,需要注意原型链的长度,并合理设计对象的层级关系。

  3. 属性和方法的屏蔽:如果对象实例和原型上都定义了同名的属性或方法对象实例上的属性或方法会屏蔽原型上的对应属性或方法。因此,在设计对象和原型时,需要属性和方法的命名,避免冲突。

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

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

相关文章

基于yolov8的西红柿检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】 基于YOLOv8的西红柿检测系统是一种利用深度学习技术的创新应用,旨在通过自动化和智能化手段提高西红柿成熟度检测的准确性和效率。该系统采用YOLOv8算法,该算法是深度学习领域中的先进目标检测模型,具备实时检测和多目标识别的…

OpenGL Texture C++ 预览Camera视频

OpenGL是一个图形API,并不是一个独立的平台。包含了一系列可以操作图形、图像的函数。基于Texture纹理强大的功能,本篇文章实现Android OpenGL Texture C 预览Camera视频流的功能。 项目github地址:https://github.com/wangyongyao1989/WyFFm…

第T10周:数据增强

>- **🍨 本文为[🔗365天深度学习训练营](https://mp.weixin.qq.com/s/0dvHCaOoFnW8SCp3JpzKxg) 中的学习记录博客** >- **🍖 原作者:[K同学啊](https://mtyjkh.blog.csdn.net/)** 在本教程中,你将学会如何进行数…

iOS——APP启动流程

APP启动 APP启动主要分为两个阶段:pre-main和main之后,而APP的启动优化也主要是在这两个阶段进行的。 main之后的优化:1. 减少不必要的任务,2.必要的任务延迟执行,例如放在控制器界面等等。 APP启动的大致过程&#…

云原生技术:‌引领数字化转型的新浪潮

云原生技术:‌引领数字化转型的新浪潮 在数字化转型的时代背景下,‌企业面临着前所未有的挑战与机遇。‌随着云计算技术的飞速发展,‌云原生技术作为一种新型的应用程序开发和部署方式,‌正逐步成为构建高可用、‌可扩展应用程序…

景联文科技:专业视频标注服务助力计算机视觉应用升级

视频标注是指对视频内容进行分析,并在视频中的特定对象、行为或事件上添加标签的过程。 视频标注包括: 1. 对象检测与跟踪 •对象检测:在每一帧中识别并定位特定的对象,如人、车、动物等。 •对象跟踪:跟踪这些对象…

使用html+css+layui实现动态表格组件

1、概述 需求,表格第一列指标可配置通过后端api传进来,表格显示数据以及鼠标触摸后气泡弹出层提示信息都是从后端传过来,实现动态表格的组件!!实现效果如下: 接口标准数据格式如下: {"da…

Unity TMP (TextMeshPro) 更新中文字符集

TMP更新中文字符集 1 字符集缺失说明2 字体的字符表2.1 字符表更新模式:动态2.2 字符表更新模式:静态 3 更新字符集步骤3.1 打开纹理更新面板3.1 导入文本文件3.3 关于警告处理 4 修改TMP默认字体设置 1 字符集缺失说明 使用TMP显示中文需要用到中文字体…

SprinBoot+Vue问卷调查微信小程序的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue3.6 uniapp代码 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍:CSDN认证博客专家,CSDN平…

uniapp / uniapp x UI 组件库推荐大全

在 uniapp 开发中,我们大多数都会使用到第三方UI 组件库,提起 uniapp 的UI组件库,我们最常使用的应该就是uview了吧,但是随着日益增长的需求,uview 在某些情况下已经不在满足于我们的一些开发需求,尽管它目…

单例模式的总结

常规模式:有属性/构造方法/普通方法,也可以在类中执行主方法,也可以在test类中执行主方法 单例模式是什么? 单例模式:类只有1个对象;保证一个类仅有一个实例,并提供一个访问它的全局访问点。单例模式是在内…

Linux平台屏幕|摄像头采集并实现RTMP推送两种技术方案探究

技术背景 随着国产化操作系统的推进,市场对国产化操作系统下的生态构建,需求越来越迫切,特别是音视频这块,今天我们讨论的是如何在linux平台实现屏幕|摄像头采集,并推送至RTMP服务。 我们知道,Linux平台&…

pdf压缩到指定大小需要怎么压缩?2024快速进行文件压缩的软件合集

pdf压缩到指定大小需要怎么压缩?2024快速进行文件压缩的软件合集 当你需要将PDF文件压缩到指定的大小时,选择适当的软件和方法可以帮助你在保持文件质量的同时,尽可能地减小文件体积。以下是五款可以帮助你快速压缩PDF文件并控制其大小的软件…

pdf在线转换成word免费版,一键免费转换

在日常的学习和办公中,PDF文件和Word文档是我们离不开的两种最常见的文件,而PDF与Word文档之间的转换成为了我们日常工作中不可或缺的一部分。无论是为了编辑、修改还是共享文件,掌握多种PDF转Word的方法都显得尤为重要。很多小伙伴关心能不能…

linux下的Socket网络编程教程

套接字概念 Socket本身有“插座”的意思,在Linux环境下,用于表示进程间网络通信的特殊文件类型。本质为内核借助缓冲区形成的伪文件。与管道类似的,Linux系统将其封装成文件的目的是为了统一接口,使得读写套接字和读写文件的操作…

万界星空科技MES:企业实现数字化转型的护航者

万界星空科技在制造业管理软件领域,特别是MES系统上的技术实力和创新能力,为制造型企业实现数字化转型提供了全方位的支持和保障。 一、万界星空MES系统的核心功能 实时数据采集与分析: 万界星空科技MES系统通过物联网技术实时采集生产现场的…

阿里P7大牛整理自动化测试高频面试题

最近好多粉丝咨询我,有没有软件测试方面的面试题,尤其是Python自动化测试相关的最新面试题,所以今天给大家整理了一份,希望能帮助到你们。 接口测试基础 1、公司接口测试流程是什么? 从开发那边获取接口设计文档、分…

IDOR + 账户接管

访问控制: 访问控制是对谁或什么有权执行操作或访问资源进行限制。在 Web 应用程序环境中,访问控制依赖于身份验证和会话管理: 身份验证可确认用户确实是其所说的身份。 会话管理识别同一用户发出了哪些后续 HTTP 请求。 访问控制决定用户…

【数据结构取经之路】布隆过滤器BloomFilter原理、误判率推导、代码实现

目录 背景介绍 简介 布隆过滤器的实现思路 布隆过滤器的作用 布隆过滤器误判率推导过程 布隆过滤器的实现 布隆过滤器的删除问题 布隆过滤器的优缺点 布隆过滤器的应用 背景介绍 在一些场景下面,有大量数据需要判断是否存在,而这些数据不是整…

免费分享:2014-2018年全球5.0级及以上地震正式报目录数据集

数据详情 本数据集为2014年—2018年中国台网正式目录(统一编目目录)全球5.0及以上地震6459次地震数据,属性字段包含发震时刻、经度、纬度、深度、地震类型、震级、参考位置、事件类型等。 数据属性 数据名称:全球5.0级及以上地震…