第二十一章 javascript数据代理(数据劫持)

文章目录

  • 一、数据劫持
      • 对象的访问器属性
  • 二、Object.defineProperty()
  • 三、Proxy()
  • 四、补充
      • 1. Object类新增方法
      • 2. Array类新增方法

一、数据劫持

  • 数据劫持:能够拦截到数据被使用或被修改的时机,在这个时机除了可以获取数据的值或对数据的值进行修改之外,还可以执行其他功能。
    • 当对数据进行修改时,除了要修改数据自身之外,还希望对所有使用了该数据的位置进行同步修改。

对象的访问器属性

  • 访问器属性由 “getter” 和 “setter” 方法表示。在对象字面量中,它们用 get 和 set 表示:
let obj = {_msg: "hello world",get msg() {// 当读取 obj.msg 时,getter 起作用return this._msg;},set msg(value) {// 当执行 obj.msg = value 操作时,setter 起作用this._msg = value}
};
  • 当读取 obj.msg 时,getter 起作用,当 obj.msg 被赋值时,setter 起作用。
  • 从外表看,访问器属性看起来就像一个普通属性。这就是访问器属性的设计思想。我们不以函数的方式调用,我们正常读取它,getter 会在幕后运行。
  • 如果,访问器属性只有一个 getter。在赋值操作 obj.msg = xxx,将会出现错误:Error(属性只有一个 getter)
  • 这样就会有一个“虚拟”的属性,它是可读且可写的。我们会利用这种方式进行数据劫持。

二、Object.defineProperty()

  • Object.defineProperty(对象, 属性名, { 配置项 })
  • 配置项:
    • value:该属性对应的值
    • writable:该属性是否可被重写,默认是 false
    • enumerable:该属性是否可被枚举,默认是 false
    • get:是一个函数, 叫做 getter 获取器,可以来决定该属性的值
      • get 函数的返回值, 就是当前这个属性的值
      • 注意: 不能和 valuewritable 一起使用,会报错
    • set:是一个函数,叫做 setter 设置器,当你需要修改该属性的值的时候,会触发该函数
Object.defineProperty(obj, 'age', {// value: 18,// writable: true,enumerable: true,// 该函数的返回值就是 age 属性的值get () {return 20},set (val) {console.log('你想修改 age 的值, 你想修改为 : ', val)}
})
  • 升级版:Object.defineProperties(对象, { 配置项组 })
    • 配置项组,键为属性名,值为当前属性的配置项
Object.defineProperties(obj, {属性1: { 配置项 },属性2: { 配置项 }
})
  • 注意:Object.definePropertyObject.defineProperties无法劫持后来添加的属性

三、Proxy()

  • ES6新增的本地对象,语法为:new Proxy(原始对象, { 配置项 }),用于实现数据代理。
    • 返回值就是代理之后的对象
const obj = { name: 'Jack', age: 18 }
// 开始代理
const result = new Proxy(obj, {// 配置 get 进行代理设置get (target, property) {// target:要代理的目标对象,当前案例为 obj// property:该对象内的每一个属性,自动遍历return target[property];},// 配置 set 进行修改set (target, property, val) {// target:要代理的目标对象,当前案例为 obj// property:该对象内要修改的属性// val:要修改的属性的值target[property] = valconsole.log('你试图修改 ' + property + ' 属性, 你想修改为 : ', val, ' 我需要根据你修改的内容重新渲染页面')// 注意:简单代理需要返回:truereturn true;}
})

四、补充

1. Object类新增方法

  • Object.create(obj, { 配置项组 })
    • 创建(返回)一个新对象,这个新对象的__proto__指向obj
    • 配置项组,键为新对象的属性名,值为当前属性的配置项
      • 配置项,参考Object.defineProperty()的配置项
  • Object.is(value1, value2)
    • 判断两个value是否是相同的值,返回值为布尔值
  • Object.assign(obj1, obj2)
    • obj2合并到obj1,并返回合并之后的obj1
  • Object.keys(obj)
    • 返回对象所有可被枚举的key,以数组的形式呈现
  • Object.values(obj)
    • 返回对象所有可被枚举key的value,以数组的形式呈现
  • Object.setPrototypeOf(obj, prototype)
    • 修改obj__proto__指向指定的prototypeprototype对象null,返回值为修改后的obj
  • Object.getPrototypeOf(obj)
    • 获取并返回obj的原型对象

2. Array类新增方法

  • Array.from( 参数 )
    • 根据指定参数创建新数组,要求该参数可被迭代。
    • 可根据伪数组创建真数组,实现伪转真
    • 数组的深拷贝
  • Array.of( 数据, ... )
    • 根据指定数据创建数组,类似Array( 数据, ... ),但Array.of( 数据, ... )接收一个数值型数据时,不会作为长度
  • Array.isArray( 数据 )
    • 判断指定数据是否为数组,返回值为布尔值

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据分析基础

数据运营的概念及意义 数据分析的三个维度 数据总览的作用及提升方法 数据总览的作用及提升方法 数据总览的作用及提升方法小结 影响作品数据的关键因素 影响作品数据的关键因素小结 用户数据的意义与作用 用户数据分析的方法与操作 用户数据分析的方法与操作小结 数据运营小结…

Java并发 - 原子类

CAS 原子操作 CAS(Compare and Swap)是一种并发算法,通常用于实现多线程环境下的同步操作,特别是在并发编程中实现无锁算法。CAS操作涉及三个参数:内存位置(V)、期望值(A&#xff0…

数据仓库 Apache Hive

一、数据分析 1、数据仓库 数据仓库(英语:Data Warehouse,简称数仓、DW),是一个用于存储、分析、报告的数据系统。 数据仓库的目的是构建面向分析的集成化数据环境,分析结果为企业提供决策支持&#xff08…

Unity 编辑器篇|(四)编辑器拓展GUI类 (全面总结 | 建议收藏)

目录 1. 前言2. 参数2.1 静态变量2.2 静态函数2.3 委托 3. 功能3.1 按钮:Button、RepeatButton3.2 文本:Label 、TextField 、TextArea 、PasswordField3.3 滑动条:HorizontalScrollbar 、VerticalScrollbar3.4 滑条:VerticalSlid…

Java基础(抽象类)

文章目录 一、抽象类特性代码示例 二、抽象类注意事项三、抽象类和接口的比较 刚刚学了Python的多态和抽象类,就想着跟Java的比对一下。 一、抽象类特性 抽象类不能被实例化:抽象类只能用作其他类的基类,不能直接创建实例。子类必须实现所有…

表单生成器基于(form-create-designer+ant design vue)

效果展示 1.源码地址: 前端:https://gitee.com/houshixin/form-design-ui 后端:https://gitee.com/houshixin/form-design-web 2.单独使用前端的时候就把请前后台的接口注释就可以 3.都启动的话: 1).先导入数据库 2.表…

3. Mybatis 中SQL 执行原理

2. Mybatis 中SQL 执行原理 这里有两种方式,一种为常用的 Spring 依赖注入 Mapper 的方式。另一种为直接使用 SqlSessionTemplate 执行 Sql 的方式。 Spring 依赖注入 Mapper 的方式 Mapper 接口注入 SpringIOC 容器 Spring 容器在扫描 BeanDefinition 阶段会扫…

C++代码重用:继承与组合的比较

目录 一、简介 继承 组合 二、继承 三、组合 四、案例说明 4.1一个电子商务系统 4.1.1继承方式 在上述代码中,Order类继承自User类。通过继承,Order类获得了User类的成员函数和成员变量,并且可以添加自己的特性。我们重写了displayI…

C# 关于当ObservableCollection增删查改元素时,触发事件用例

ObservableCollection 类提供了一种实时监测集合变化的机制,可以通过订阅 CollectionChanged 事件来响应集合的添加、移除和重置等变化。 using System; using System.Collections.ObjectModel; using System.Collections.Specialized;class Program {static void …

【java八股文】之Redis基础篇

1、Redis有哪几种基本的数据类型 字符串类型:用于存储文章的访问量Hash:用来存储key-value的数据结构,当单个元素比较小和元素数量比较少的时候 ,底层是用ziplist存储。通常可以用来存储一些对象之类的List: 底层采用的quicklist …

2024儿童台灯哪个品牌更护眼推荐?五款知名品牌台灯推荐

只要有了娃,家长的吃穿用度可能不会特别讲究,但总想给孩子好的东西,尤其是关系到他们身心健康的,可以说是一掷千金。特别是眼睛视力方面,特别担心会遗传给孩子,自从他上幼儿园,我就一直在物色一…

WPF 获取父容器控件的宽度

在WPF中,如果你想要获取一个控件的父容器(Parent)的宽度,你可以通过以下方式访问: double parentWidth this.Parent.ActualWidth;这里的 this 指的是当前控件实例。.Parent 属性返回直接父容器,.ActualWi…

WSL不同版本的Ubuntu更换清华镜像,加速Ubuntu软件下载速度

文章目录 不同版本的Ubuntu使用清华镜像,加速Ubuntu软件下载速度1. 备份源软件配置文件2. 复制镜像源3. 修改软件源配置文件4. 更新软件包列表,升级软件包等内容5. 从仓库中下载其它软件可能存在的问题 不同版本的Ubuntu使用清华镜像,加速Ubu…

鸿蒙Harmony--LocalStorage--页面级UI状态存储详解

走的太急疼的是脚,逼的太紧累的是心,很多时候,慢一点也没关系,多给自己一些耐心和等待,保持热爱,当下即是未来,生活自有安排! 目录 一,定义 二,LocalStorageProp定义 三…

【面试宝典】如何对MySQL进行优化?

一、数据库设计 所有字段都设置默认值。尽可能使用较小的整数类型。尽可能定义字段为NOT NULL,除非该字段需要NULL。尽可能使用固定大小的记录格式,如CHAR,除非变长字段用VARCHAR。二、数据库使用 尽量使用长连接。使用 EXPLAIN 查看复杂SQL执行方式,进行优化。使用 LIMIT …

2024 CKA 题库 | 7、调度 pod 到指定节点

不等更新题库 文章目录 7、调度 pod 到指定节点题目:考点:参考链接:解答:更换 context创建 pod yaml创建 pod 检查 7、调度 pod 到指定节点 题目: 设置配置环境: [candidatenode-1] $ kubectl config use-context k8sTask 按如下要求调度一个 pod&…

Java Web 开发 从入门到实战(课后习题)

第1章 Web 前端基础 1.在以下标记中&#xff0c;用于改置页面标题的是&#xff08;&#xff09;。 A. <title> B. <caption> C. <head> D. <html> 注&#xff1a;caption是表格名称&#xff08;标题&#xff09; 2. 若设计网页的背景图形为bg.png&…

使用Mixtral-offloading在消费级硬件上运行Mixtral-8x7B

Mixtral-8x7B是最好的开放大型语言模型(LLM)之一&#xff0c;但它是一个具有46.7B参数的庞大模型。即使量化为4位&#xff0c;该模型也无法在消费级GPU上完全加载(例如&#xff0c;24 GB VRAM是不够的)。 Mixtral-8x7B是混合专家(MoE)。它由8个专家子网组成&#xff0c;每个子…

Linux--LNMP架构及应用部署

4.2 LNMP架构及应用部署 4.2.1构建LNMP网站平台 为了与Nginx、PHP环境保持一致&#xff0c;仍选择采用源代码编译的方式安装MySQL组件。以5.5.22 版本为例&#xff0c;安装过程如下所述。 &#xff08;1&#xff09;编译安装MySQL。 [rootnode01 ~]# yum -y install ncurses-…

Java中锁的解决方案

前言 在上一篇文章中&#xff0c;介绍了什么是锁&#xff0c;以及锁的使用场景&#xff0c;本文继续给大家继续做深入的介绍&#xff0c;介绍JAVA为我们提供的不同种类的锁。 JAVA为我们提供了种类丰富的锁&#xff0c;每种锁都有不同的特性&#xff0c;锁的使用场景也各不相…