当前位置: 首页 > news >正文

了解JS中的混个对象“类”

类是面向对象的设计模式,它包括实例化、继承和多态

1、理论

面向对象变成强调的是数据和操作的行为本质上是相互关联的,因此好的设计就是把数据以及和他相关的行为打包(封装)起来,我们也叫他数据结构。

类的一个核心概念就是多态,这个概念是说父类的通用行为可以被子类用更特殊的行为重写,实际上,相对多态性允许我们从重写行为中引用基础行为。

在相当长的一段时间里,JS只有一些近似类的语法元素(比如说new和insranceof),只不过后来在ES6中新增了一些元素,比如class关键字,但是,这并不意味着JS这种实际上有类,由于类是一种设计模式,所以可以使用一些方法近似实现类的功能,JS则提供了近似类的语法

在软件设计中类是一种可选的模式,你需要自己决定是否在 JS 中使用它

2、类的机制

类与对象的关系可以看做房屋图纸与实际房屋(类实例)之间的关系

类实例通常是由一个特殊的类方法构造的,这个方法名通常和类名相同,被称作构造函数。这个方法的任务就是初始化实例需要的所有信息

class CoolGuy {specialTrick = nothingCoolGuy( trick ) {specialTrick = trick}showOff() {output( "Here's my trick: ", specialTrick )}
}

类构造函数属于类,而且通常和类同名。此外,构造函数大多数需要用new来调,这样语言引擎才可以构造一个新的类实例

3、类继承

在面向类的语言中,我们可以先定义一个类,然后定义一个继承前者的类

在传统的面向类的语言中 super 还有一个功能,就是从子类的构造函数中通过super 可以直接调用父类的构造函数。通常来说这没什么问题,因为对于真正的类来说,构造函数是属于类的。然而,在 JavaScript 中恰好相反——实际上“类”是属于构造函数的(类似Foo.prototype… 这样的类型引用)。由于JavaScript 中父类和子类的关系只存在于两者构造函数对应的 .prototype 对象中,因此它们的构造函数之间并不存在直接联系,从而无法简单地实现两者的相对引用。

多态并不表示子类和父类有关联,子类得到的只是父类的一份副本。类的继承其实就是复制。

看下面的伪代码:

class Vehicle {engines = 1ignition() {output( "Turning on my engine." );}drive() {ignition();output( "Steering and moving forward!" )}
}
class Car inherits Vehicle {wheels = 4drive() {inherited:drive()output( "Rolling on all ", wheels, " wheels!" )}
}
class SpeedBoat inherits Vehicle {engines = 2ignition() {output( "Turning on my ", engines, " engines." )}pilot() {inherited:drive()output( "Speeding through the water with ease!" )}
}

4、混入

在继承或者实例化时,JS的对象机制并不会自动执行复制行为。简单来说,JS中只有对象,并不存在可以被实例化的类。但是由于在其他语言中类表现出来的都是复制行为,因此JS使用了混入的方法来模拟类这个行为,分为显示和隐式

4.1、显式混入

通常显式混入在许多框架中被称为extend(…),但是为了方便理解,我们称之为mixin(…)

function mixin(sourceObj, targetObj) {for (var key in sourceObj) {// 只会在不存在的情况下复制if (!(key in targetObj)) {targetObj[key] = sourceObj[key];}}return targetObj;
}
var Vehicle = {engines: 1,ignition: function () {console.log("Turning on my engine.");},drive: function () {this.ignition();console.log("Steering and moving forward!");}
};
var Car = mixin(Vehicle, {wheels: 4,drive: function () {Vehicle.drive.call(this); // 这就是显式多态console.log("Rolling on all " + this.wheels + " wheels!");}
});

从技术角度来说,函数实际上没有被复制,复制的是函数引用。

Vehicle.drive.call(this);就是显式多态,在之前的伪代码中对应的语句是inherited:drive(),称之为相对多态。

JS在ES6之前并没有相对多态的机制,所以由于Car和Vehicle中都有drive()函数,为了指明调用对象,我们必须使用绝对引用,通过名称显示指定Vehicle对象并调用它的drive()函数。

还有混合复制以及寄生继承,这里就不具体介绍了

2、隐式混入

隐式混入和显示伪多态很像

var Something = {cool: function() {this.greeting = "Hello World";this.count = this.count ? this.count + 1 : 1;}
};Something.cool();
Something.greeting; // "Hello World"
Something.count; // 1
var Another = {cool: function() {// 隐式把 Something 混入 AnotherSomething.cool.call( this );}
};
Another.cool();
Another.greeting; // "Hello World"
Another.count; // 1 (count 不是共享状态)

通过在构造函数调用或者方法调用中使用 Something.cool.call( this ),我们实际上“借用”了函数 Something.cool() 并在 Another 的上下文中调用了它(通过 this 绑定)。最终的结果是 Something.cool() 中的赋值操作都会应用在 Another 对象上而不是Something 对象上。
因此,我们把 Something 的行为“混入”到了 Another 中。

5、总结

类是一种设计模式。许多语言提供了对于面向类软件设计的原生语法。JavaScript 也有类似的语法,但是和其他语言中的类完全不同。

类意味着复制。

传统的类被实例化时,它的行为会被复制到实例中。类被继承时,行为也会被复制到子类中。

多态(在继承链的不同层次名称相同但是功能不同的函数)看起来似乎是从子类引用父类,但是本质上引用的其实是复制的结。

JavaScript 并不会(像类那样)自动创建对象的副本。

混入模式(无论显式还是隐式)可以用来模拟类的复制行为,但是通常会产生丑陋并且脆弱的语法,比如显式伪多态(OtherObj.methodName.call(this, …)),这会让代码更加难懂并且难以维护。

此外,显式混入实际上无法完全模拟类的复制行为,因为对象(和函数!别忘了函数也是对象)只能复制引用,无法复制被引用的对象或者函数本身。忽视这一点会导致许多问题。

总地来说,在 JavaScript 中模拟类是得不偿失的,虽然能解决当前的问题,但是可能会埋下更多的隐患。

相关文章:

了解JS中的混个对象“类”

类是面向对象的设计模式,它包括实例化、继承和多态 1、理论 面向对象变成强调的是数据和操作的行为本质上是相互关联的,因此好的设计就是把数据以及和他相关的行为打包(封装)起来,我们也叫他数据结构。 类的一个核心…...

在Sprinng Boot中使用Redis充当缓存

关于我们使用EhCache可以适应很多的应用场景了,但是因为EhCache是进程内的缓存框架,在集群模式下,我们在我们的应用服务器或者云服务器之间的缓存都是独立的。故而在不同的服务器之间的进程会存在缓存不一致的情况,就算我们的EhCa…...

【网络】TCP协议的相关实验

TCP协议的相关实验 一、理解listen的第二个参数1、实验现象2、TCP 半连接队列和全连接队列3、关于listen的第二个参数的一些问题4、SYN洪水Ⅰ、什么是SYN洪水攻击Ⅱ、如何解决SYN洪水攻击? 二、使用Wireshark分析TCP通信流程 一、理解listen的第二个参数 在编写TCP…...

微服务测试怎么做

开发团队越来越多地选择微服务架构而不是单体结构,以提高应用程序的敏捷性、可扩展性和可维护性。随着决定切换到模块化软件架构——其中每个服务都是一个独立的单元,具有自己的逻辑和数据库,通过 API 与其他单元通信——需要新的测试策略和新…...

第9章 K8s进阶篇-持久化存储入门

9.1 k8s存储Volumes介绍 Container(容器)中的磁盘文件是短暂的,当容器崩溃时,kubelet会重新启动容器,但最初的文件将丢失,Container会以最干净的状态启动。另外,当一个Pod运行多个Container时&…...

MathType2024最新word公式编辑器

使用word进行论文编写时,常需要使用公式编辑器,但有些word中并没有公式编辑器,这时应该怎么办呢?本文将围绕word里没有公式编辑器怎么办,word中的公式编辑器怎么用的内容进行介绍。 一、word里没有公式编辑器怎么办 …...

英语语法 - 主语从句

[ 主语从句 ] 没有时态要求 | 三单 1. 从属连词 that 引导的主语从句 | 不做句子成分 | 没有意义 That a monster attacked a ship last week shocked the world. That I bought a house in Beijing shocks many people. That Oscar is rich makes us upset. That he didnt wa…...

千梦网创:实现自动化“挂机躺盈”的三种方法

在互联网众多行业中,有很多人一直在寻找所谓的“挂机躺盈”的项目,在理财领域这种收入被称为“被动收入”。 天上不会掉馅饼这是一句讲烂掉的话了,躺在家里吃白食等着钱进账是一件不可能的事情。 然而如果你看到身边有“被动收入”的例子&a…...

微信小程序页面传递参数方法

说明 页面跳转方法有很多中,但经常会通过一个页面传递参数给另一个页面,非常的常见。但数据量大的时候,通常用字符串传递,但会显得过于臃肿,下面介绍页面传递参数的各种方式。 一、页面跳转链接携带参数 例如&#xf…...

出行类app如何提升广告变现收益?

出行类APP已经成为越来越多人们出行的首选,出行类app在变现方式上存在以下痛点:APP功能单一、使用场景单一;用户使用时间集中,粘性低...这些痛点使得开发者获取收益的提升面临极大的挑战。 https://www.shenshiads.com 如何让出…...

万能在线答题考试小程序源码系统 既能刷题 又能考试 带完整的搭建教程

现如今,线上学习和考试已经成为一种趋势。近年来,移动端的普及以及微信小程序的兴起,使得在线答题考试系统变得更加便捷和高效。今天罗峰就来给大家介绍一款万能在线答题考试小程序源码系统,既能刷题,又能考试&#xf…...

《Linux从练气到飞升》No.30 深入理解 POSIX 信号量与生产消费模型

🕺作者: 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 😘欢迎关注:👍点赞🙌收藏✍️留言 🏇码字不易,你的👍点赞🙌收藏❤️关注对我真的…...

高防IP可以抵御哪些恶意攻击

高防IP协议可以隐藏用户的站点,使得攻击者无法发现恶意攻击的目标网络资源,从而提高了源站的安全性。能够有效抵御常见的恶意攻击类型ICMPFlood、UDPFlood、 TCPFlood、SYNFlood、ACKFlood等,帮助游戏、金 融、电子商务、互联网、政企等行业抵…...

vivado产生报告阅读分析6-时序报告2

1、复查时序路径详情 单击“ OK ”运行报告命令后 , 将打开一个新窗口。这样您即可复查其中内容。在其中可查看执行选定的每种类型 (min/max/min_max ) 的分析之后所报告的 N 条最差路径。 下图显示的“Report Timing ” ( 时序报告 ) 窗口…...

电脑怎么备份文件?简单几步,轻松备份!

电脑中存储着大量的个人和工作文件,包括照片、文档、音乐和视频等。但突发状况,如硬件故障、病毒感染或误删文件,可能会导致数据丢失。因此,备份文件至关重要。在本文中,我们将介绍三种电脑怎么备份文件的方法&#xf…...

获得不同干扰程度的模糊图像

同时对一共父级文件夹遍历。获得对应不同干扰程度的模糊图像 # This isimport cv2 import numpy as npdef reduce_resolution(image, factor):height, width, _ image.shape # 获取原始图像的宽度和高度new_width int(width / factor) # 计算新的宽度和高度new_height i…...

spring为什么要使用三级缓存来解决循环依赖

出现循环依赖的原因 AService依赖BService Service("aService") public class AService {AutowiredBService bService; } BService依赖AService Service("bService") public class BService {AutowiredAService aService; } 此时就出现了循环依赖 想…...

【自留地】前端 - uniapp - Vue - React - Flutter

uniapp uniapp自用速查表 - 我的常用组件 uniapp自用速查表 - 我的常用组件_uniapp static/customicons.css-CSDN博客文章浏览阅读1.8k次。uniapp项目登录退出、全局变量与状态、本地存储、Tabbar标签栏、顶部导航栏、下拉刷新、触底刷新、Ajax交互、内置组件样式修改、自定义…...

深度学习损失函数

Loss 是深度学习算法中重要的一部分,它的主要功能是评价网络预测的准确性和指导权重更新。合适 Loss 可以让网络收敛更快,预测更准。这个项目介绍了损失函数的基本概念以及7种常用损失函数的形式,性质,参数,使用场景及…...

百度智能云正式上线Python SDK版本并全面开源

文章目录 前言一、SDK的优势二、千帆SDK:快速落地LLM应用三、如何快速上手千帆SDK3.1、SDK快速启动3.2. SDK进阶指引 3.3. 通过Langchain接入千帆SDK4、开源社区 前言 百度智能云千帆大模型平台再次升级!在原有API基础上,百度智能云正式上线…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...

Python如何给视频添加音频和字幕

在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题,无需引入,直接可…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...