数据劫持详解(JavaScript)

什么是数据劫持？

定义

数据劫持，其实就是数据代理。
数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。

Demo

使用Object.defineProperty实现数据劫持

代码如下

var obj={};
var age;
/**Object.defineProperty() 方法会直接在一个对象上定义一个新属性
，或者修改一个对象的现有属性，并返回此对象。形参1即为对象，形参2为属性名（注:这种行为也被称之为数据劫持）
**/
/*** 数据劫持概念
数据劫持，其实就是数据代理。
数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。 */
Object.defineProperty(obj,'age',{get:function(){console.log('get age ...');return age;},set:function(val){console.log('set age ...');age=val;}
})
obj.age=100 //set age ... 调用set函数
console.log(obj.age) //get age ... ,100 调用get函数

使用Proxy实现数据劫持

代码如下

const dinner={meal:'tacos'
}
const handler={//Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。//arguments为函数参数get(target,prop){console.log('get...',prop);//Reflect.get函数，作用为获取对象身上某个属性的值，类似于target[name]return Reflect.get(...arguments);},set(target,key,value){console.log('set...',key,value);//Reflect.set函数，作用为将值分配给属性的函数，返回一个Boolean,如果更新成功，则返回truereturn Reflect.set(...arguments);}}
//Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义(如属性查找,赋值，枚举，函数调用等)
//Proxy对象接收两个形参，第一个形参为劫持的目标对象，第二个形参为处理函数
const proxy=new Proxy(dinner,handler);
console.log(proxy.meal);

数据劫持详解(JavaScript)相关推荐

vue 数据劫持详解
2019独角兽企业重金招聘Python工程师标准>>> 首先 Object.defineProperty(obj,prop,descriptor) 用法介绍: 参数 obj:目标对象 ...
es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
详解JavaScript对象深拷贝
详解JavaScript对象深拷贝在几乎所有编程语言中,对象都以引用形式保存给变量.复制给其他变量.JavaScript语言也是如此.因此简单的进行赋值操作进行复制仅仅是对对象数据的引用地址进行一个 ...
详解Javascript本地存储的方式、区别及应用场景
详解Javascript本地存储的方式.区别及应用场景一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage ind ...
详解 JavaScript 的 IIFE 语法
详解 JavaScript 的 IIFE 语法 IIFE 语法 IIFE 语法的一些变体小括号去哪儿了? 命名的 IIFE 防止连接文件时出现问题使用箭头函数代替函数表达式一些不推荐的立即调用函 ...
三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
注:本系列教程需要对应 JavaScript .html.css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts . ECha ...
每日一练：Python爬虫爬取全国新冠肺炎疫情数据实例详解，使用beautifulsoup4库实现
Python 爬虫篇 - 爬取全国新冠肺炎疫情数据实例详解效果图展示第一章:疫情信息的下载与数据提取 ① 爬取页面数据到本地 ② json 字符串正则表达式分析 ③ 提取数据中的 json 字符串 ...
稳扎稳打Silverlight(17) - 2.0数据之详解DataGrid, 绑定数据到ListBox
[索引页] [源码下载] 稳扎稳打Silverlight(17) - 2.0数据之详解DataGrid, 详解ListBox 作者:webabcd 介绍 Silverlight 2.0 详解DataG ...

数据劫持详解(JavaScript)

什么是数据劫持？

定义

Demo

使用Object.defineProperty实现数据劫持

使用Proxy实现数据劫持

数据劫持详解(JavaScript)相关推荐

最新文章

热门文章