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

【阅读笔记】你不知道的Javascript--类与类型委托3

目录

        • 一些常见原理
        • 混入
      • 行为委托
        • 委托理论
        • 类与对象
        • 更妙的设计与语法
      • 类型
        • 冷门关键词
        • typeof 防范机制
      • 原生函数
        • 访问内部属性

一些常见原理

在继承或者实例化时,JavaScript 的对象机制并不会自动执行复制行为;

多态:JS 中的多态,子类是只能通过 super 得到父类的一个复制,而非父类的原本实力对象,所以子类只要不重写父类对应的方法,那么两个类之间就完全没有影响;

JS没有多继承机制!


混入

即从一个对象中复制所有属性到一个新对象里面去;
这是一个最简单的混入代码:

function mixin(source, target) {// 遍历原对象的所有属性for (var ket in source) {// 若新对象内和原对象属性没有重合,那么复制if (!(key in target)) {target[key] = source[key];}}// 返回新对象return target;
}

行为委托

委托理论

即定义一个父对象,并定义很多个子对象来存储对应的数据和行为,把特定的任务对象都关联到父对象上,让子对象们在需要的时候可以进行委托;

下面是一个简短的委托代码
Task 定义了一个父对象;
SubTask 使用 Object.create 所创建,这样就委托了父对象 Task;
子对象 SubTask 即可添加新的方法或者任意属性了!

注意:
委托者:SubTask,委托目标:Task
为 SubTask 新增的方法 prepareTask 是存储在 SubTask 内部的!
委托者必须尽量少的重写委托目标中的方法或者属性,否则会导致引用歧义

Task = {setID: function (ID) {this.id = ID;},outputID: function () {console.log(this.id);},
};
// 让SubTask委托Task
SubTask = Object.create(Task);
SubTask.prepareTask = function (ID, label) {this, setID(ID);this.label = label;
};

其他注意事项

  1. 无法在两个或两个以上互相(双向)委托的对象之间创建循环委托

类与对象

ES6 提供的 class 实际上依然是通过 prototype 机制实现的,因为 js 实际上并没有真正意义上的类

例子:创建一个 widget 类,并且其下有一个子类 button
对相关联风格委托方式写法:(下方代码中的单个$符号是我们引用 jQuery 后使用的!)

使用委托设计模式,可避免丑陋的显示伪多态调用!

var Widget = {init: function (width, height) {this.width = width || 50;this.height = height || 50;// $elem代表一个元素,这里先初始化为nullthis.$elem = null;},// 向指定位置插入元素,并且为元素赋予默认的width和heightinsert: function ($where) {if (this.$elem) {this.$elem.css({width: this.width + "px",height: this.height + "px",}).appendTo($where);}},
};var Button = Object.create(Widget);Button.setup = function (width, height, label) {// 委托调用this.init(width, height);this.label = label || "default";// 使用jQuery中的$来向指定元素插入text属性!this.$elem = $("<button>").text(this.label);
};

更妙的设计与语法

类实例内省:通过创建方式来判断对象的结构和功能。
以下代码展示了通过 instanceof 来推测对象的功能,也就是内省过程

function Foo() {}
Foo.prototype.method = function () {};
var a1 = new Foo();
if (a1 instanceof Foo) {a1.method();
}

类型

冷门关键词

因为 typeof 返回对应数据的类型,是一个字符串,所以一下结果毅然返回 string
typeof typeof 43

undefined!=undeclared
然而,使用 typeof 取 undefined 和 undeclared 的值返回的都是 undefined

var a;
a; // undefined
b; // undeclared

typeof 防范机制

可以使用 typeof 检测一个全局变量是否是 undefined,如果是的话就重新声明一个!
typeof function !== "undefined"


在 ES6 中(早期版本是没有 SAFE 和这个修饰的!):
整数的最大值:Number.MAX_SAFE_INTEGER
整数的最小值:Number.MIN_SAFE_INTEGER

NaNs 是特殊值,它和自身不相等,是唯一一个非自反值
即存在 NaN != NaN 返回 true


原生函数

访问内部属性

访问对象的内部属性需要使用以下方法

Object.prototype.toString.call("123");
// 返回 [Object string]

相关文章:

【阅读笔记】你不知道的Javascript--类与类型委托3

目录类一些常见原理混入行为委托委托理论类与对象更妙的设计与语法类型冷门关键词typeof 防范机制值原生函数访问内部属性类 一些常见原理 在继承或者实例化时&#xff0c;JavaScript 的对象机制并不会自动执行复制行为&#xff1b; 多态&#xff1a;JS 中的多态&#xff0c…...

文件服务设计

一、需求背景 文件的上传、下载功能是软件系统常见的功能&#xff0c;包括上传文件、下载文件、查看文件等。例如&#xff1a;电商系统中需要上传商品的图片、广告视频&#xff0c;办公系统中上传附件&#xff0c;社交类系统中上传用户头像等等。文件上传下载大致流程为&#…...

【批处理脚本】-1.22-字符串界定符号 ““

"><--点击返回「批处理BAT从入门到精通」总目录--> 共3页精讲(列举了所有字符串界定符号 ""的用法,图文并茂,通俗易懂) 在从事“嵌入式软件开发”和“Autosar工具开发软件”过程中,经常会在其集成开发环境IDE(CodeWarrior,S32K DS,Davinci,…...

【Flutter·学习实践·UI篇】基础且重要的UI知识

前言 参考学习官网&#xff1a;《Flutter实战第二版》 学习前先记住&#xff1a;Flutter 中万物皆为Widget&#xff0c;心中默念3次以上铭记于心。 这一点和开发语言Dart的变量一切皆是对象的概念&#xff0c;相互对应。 Widget 在前面的介绍中&#xff0c;我们知道在Flutt…...

【OpenCV】车牌自动识别算法的设计与实现

写目录一. &#x1f981; 设计任务说明1.1 主要设计内容1.1.1 设计并实现车牌自动识别算法&#xff0c;基本功能要求1.1.2 参考资料1.1.3 参考界面布局1.2 开发该系统软件环境及使用的技术说明1.3 开发计划二. &#x1f981; 系统设计2.1 功能分析2.1.1 车辆图像获取2.1.2 车牌…...

SpringBoot发送邮件

目录1. 获取授权码2. jar包引入3. 配置application4. 代码实现1. 获取授权码 以126邮箱为例&#xff0c;点开设置&#xff0c;选择POP3/SMTP/IMAP 开启POP3/SMTP服务&#xff0c;新增授权密码 扫码二维码&#xff0c;发送要求的短信内容到指定的号码即可&#xff0c;然后会返回…...

BigInteger类和BigDecimal类的简单介绍

文章目录&#x1f4d6;前言&#xff1a;&#x1f380;BigInteger类和BigDecimal类的由来&#x1f380;BigDecimal类的优点&#x1f380;BigDecimal类容易引发的错误&#x1f3c5;处理方法&#x1f4d6;前言&#xff1a; 本篇博客主要介绍BigInteger类和BigDecimal类的用途及常…...

mysql五种索引类型---实操版本

背景 最近学习了Mysql的索引&#xff0c;索引对于Mysql的高效运行是非常重要的&#xff0c;正确的使用索引可以大大的提高MySql的检索速度。通过索引可以大大的提升查询的速度。不过也会带来一些问题。比如会降低更新表的速度&#xff08;因为不但要把保存数据还要保存一下索引…...

【微信小程序】-- 页面导航 -- 编程式导航(二十三)

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…...

路由追踪工具 traceroute 使用技巧

路由追踪工具 traceroute 使用技巧路由追踪工作原理路由追踪实例1. 如何运行 traceroute2. 禁用 IP 地址和主机名映射3. 配置回复等待时间4. 配置每一跳的查询次数5. 配置 TTL 值我想知道一个数据包从出发地到目的地所遵循的路由&#xff0c;即所有转发实体&#xff08;中间的路…...

NGINX学习笔记 - 一篇了解NGINX的基本概念(一)

NGINX是什么&#xff1f; NGINX是一款由俄罗斯人伊戈尔赛索耶夫使用C语言开发的、支持热部署的、轻量级的WEB服务器/反向代理服务器/电子邮件代理服务器&#xff0c;因为占用内存较少&#xff0c;启动极快&#xff0c;高并发能力强&#xff0c;所以在互联网项目中广泛应用。可…...

Spring-Cloud-Gateway的过滤器的执行顺序问题

过滤器的种类 Spring-Cloud-Gateway中提供了3种类型的过滤器&#xff0c;分别是&#xff1a;路由过滤器、Default过滤器和Global过滤器。 路由过滤器和Default过滤器 路由过滤器和Default过滤器本质上是同一种过滤器&#xff0c;只不过作用范围不一样&#xff0c;路由过滤器…...

Android性能优化的底层逻辑

前言性能优化仿佛成了每个程序员开发的必经之路&#xff0c;要想出人头地&#xff0c;与众不同&#xff0c;你还真需要下点功夫去研究Android的性能优化&#xff0c;比如说&#xff0c;从优化应用启动、UI加载、再到内存、CPU、GPU、IO、还有耗电等等&#xff0c;当你展开一个方…...

Gradle+SpringBoot多模块开发

关于使用Gradle结合SpringBoot进行多模块开发。 本来是打算使用buildSrc之类的&#xff0c;但是感觉好像好麻烦&#xff0c;使用这种方法就可以实现&#xff0c;没必要采用其他的。 我不怎么会表述&#xff0c;可能写的跟粑粑一样&#xff0c;哈哈哈哈 这是我的项目地址。 存在…...

Qt 之 emit、signals、slot的使用

本文福利&#xff0c;莬费领取Qt开发学习资料包、技术视频&#xff0c;内容包括&#xff08;C语言基础&#xff0c;Qt编程入门&#xff0c;QT信号与槽机制&#xff0c;QT界面开发-图像绘制&#xff0c;QT网络&#xff0c;QT数据库编程&#xff0c;QT项目实战&#xff0c;QSS&am…...

每日学术速递3.6

Subjects: cs.CV 1.Multi-Source Soft Pseudo-Label Learning with Domain Similarity-based Weighting for Semantic Segmentation 标题&#xff1a;用于语义分割的基于域相似性加权的多源软伪标签学习 作者&#xff1a;Shigemichi Matsuzaki, Hiroaki Masuzawa, Jun Miura …...

C# 将对象转换成字节数组(二进制数据)

在将自定义对象或者数组等这样的数据存储到数据库时往往需要转换成二进制字节&#xff0c;尤其是在一些O/RM数据库框架中&#xff0c;下面是转换的函数&#xff0c;一个是将对象转换成二进制字节数组&#xff0c;另一个是将从数据库中读取的二进制流转换成程序中的对象。 这里…...

巾帼绽芬芳 一起向未来(下篇)

编者按&#xff1a;为了隆重纪念纪念“三八”国际妇女节113周年&#xff0c;快来与你全方位、多层次分享交流“三八”国际妇女节的前世今生。分上篇&#xff08;节日简介、节日发展和节日意义&#xff09;、中篇&#xff08;节日活动宗旨和世界各国庆祝方式&#xff09;和下篇&…...

代码还原小试牛刀(一):魔改的MD5

一、目标 2023年了&#xff0c;MD5已经是最基础的签名算法了&#xff0c;但如果你还只是对输入做了简单的MD5&#xff0c;肯定会被同行们嘲笑。加点盐&#xff08;salt&#xff09;是一种基本的提升&#xff0c;但在这个就业形势严峻的时代&#xff0c;仅仅加盐肯定不够了。 …...

6. 找大佬

1 题目描述 找大佬成绩20开启时间2021年09月24日 星期五 18:00折扣0.8折扣时间2021年11月15日 星期一 00:00允许迟交否关闭时间2021年11月23日 星期二 10:00 众所周知&#xff0c;每个专业里都会有一些大佬隐藏在人群里。软件工程专业也是如此。今天的你就像从人群中找到真正的…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...

mac:大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...