了解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…...
微信小程序页面传递参数方法
说明 页面跳转方法有很多中,但经常会通过一个页面传递参数给另一个页面,非常的常见。但数据量大的时候,通常用字符串传递,但会显得过于臃肿,下面介绍页面传递参数的各种方式。 一、页面跳转链接携带参数 例如…...
出行类app如何提升广告变现收益?
出行类APP已经成为越来越多人们出行的首选,出行类app在变现方式上存在以下痛点:APP功能单一、使用场景单一;用户使用时间集中,粘性低...这些痛点使得开发者获取收益的提升面临极大的挑战。 https://www.shenshiads.com 如何让出…...
万能在线答题考试小程序源码系统 既能刷题 又能考试 带完整的搭建教程
现如今,线上学习和考试已经成为一种趋势。近年来,移动端的普及以及微信小程序的兴起,使得在线答题考试系统变得更加便捷和高效。今天罗峰就来给大家介绍一款万能在线答题考试小程序源码系统,既能刷题,又能考试…...
《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 ” ( 时序报告 ) 窗口…...
电脑怎么备份文件?简单几步,轻松备份!
电脑中存储着大量的个人和工作文件,包括照片、文档、音乐和视频等。但突发状况,如硬件故障、病毒感染或误删文件,可能会导致数据丢失。因此,备份文件至关重要。在本文中,我们将介绍三种电脑怎么备份文件的方法…...
获得不同干扰程度的模糊图像
同时对一共父级文件夹遍历。获得对应不同干扰程度的模糊图像 # 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基础上,百度智能云正式上线…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
A2A JS SDK 完整教程:快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
