【JavaScript】数据劫持(代理)详解

&＃x1f4bb; 【Javascript】数据劫持(代理)详解 &＃x1f3e0;专栏&＃xff1a;Javascript
&＃x1f440;个人主页&＃xff1a;繁星学编程&＃x1f341;
&＃x1f9d1;个人简介&＃xff1a;一个不断提高自我的平凡人&＃x1f680;
&＃x1f50a;分享方向&＃xff1a;目前主攻前端&＃xff0c;其他知识也会阶段性分享&＃x1f340;
&＃x1f44a;格言&＃xff1a;☀️没有走不通的路&＃xff0c;只有不敢走的人&＃xff01;☀️
&＃x1f449;让我们一起进步&＃xff0c;一起成为更好的自己&＃xff01;&＃xff01;&＃xff01;&＃x1f381;

所谓数据代理&＃xff08;也叫数据劫持&＃xff09;&＃xff0c;指的是在访问或者修改对象的某个属性时&＃xff0c;通过一段代码拦截这个行为&＃xff0c;进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象。而在前端框架中vue2.0使用的是Object.defineProperty()、vue3.0使用的是Proxy。当然今天主要讲述的JS和ES中的数据劫持&＃xff0c;vue中的小编后续会安排上。

一. Object.defineProperty()

语法&＃xff1a;Object.defineProperty(数据, 属性名, {配置项})

配置项&＃xff1a;

• value&＃xff1a;设置属性名对应的属性值

• writable&＃xff1a;设置的属性是否可以修改

  
  

  值&＃xff1a;true/false(默认)

• enumerable&＃xff1a;设置的属性是否可以遍历

  
  

  值&＃xff1a;true/false (默认)

• configurable&＃xff1a;设置的属性是否可以删除

  
  

  值&＃xff1a;true/false(默认)

• getter、setter&＃xff1a;不允许和value, writable连用&＃xff0c;连用会报错

  • get 获取的时候可以触发的方法
  • set 设置的时候可以触发的方法

注&＃xff1a;value、writable、enumerable、configurable可以单独使用也可以连用

针对上述配置项的使用情况&＃xff1a;

(1) value

const obj &＃61; { name: "zs" }
Object.defineProperty(obj, "age", {
// 设置属性名对应的属性值
value: 20;
});
console.log(obj); // {name: &＃39;zs&＃39;, age: 20}
obj.age &＃61; 30;
console.log(obj); // {name: &＃39;zs&＃39;, age: 20}


(2) writable

const obj &＃61; { name: "zs" }
Object.defineProperty(obj, "age", {
// 设置的属性可以修改
writable: true
})
console.log(obj); // { name: &＃39;zs&＃39;, age: undefined }
obj.age &＃61; 30;
console.log(obj); // {name: &＃39;zs&＃39;, age: 20}


(3) enumerable

const obj &＃61; { name: "zs" }
Object.defineProperty(obj, "age", {
value: 20,
// 设置的属性可以遍历
enumerable: true
});
for (let k in obj) {
console.log(k, obj[k]); // name zs age 20
}


(4) configurable

const obj &＃61; { name: "zs" }
Object.defineProperty(obj, "age", {
// 设置的属性可以删除
configurable: true
});
delete obj.name;
console.log(obj); // {age: undefined}


(5) get set定义属性

const obj &＃61; { name: "zs" }
Object.defineProperty(obj, "age", {
get() {
return 20; // 当我们设置一个返回值的时候&＃xff0c;就表示该属性被设置了值
},
set(val) {
// 可以监听到设置的值
console.log(val); // 19
}
});
obj.age &＃61; 19; // 设置的时候&＃xff0c;会触发 set方法
console.log(obj.age); // 20 (获取的时候&＃xff0c; 会触发 get方法)
console.log(obj);


二. 数据劫持

当访问或者修改对象的某个属性的时候&＃xff0c;通过 getter setter 拦截这个行为&＃xff0c;进行额外的操作
将原始的数据复制一份&＃xff0c;通过复制的数据操作原始数据

<div id&＃61;"box"></div>
<input type&＃61;"text" id&＃61;"ipt1">
<input type&＃61;"text" id&＃61;"ipt2">
<!-- 分割线 -->
// 原始数据
const obj &＃61; {
name: &＃39;zs&＃39;,
age: 20
}
// 目标数据
const target &＃61; {}
// 通过数据劫持的方法&＃xff0c;把原始数据复制到目标中
Object.defineProperty(target, &＃39;name&＃39;, {
get() {
return obj.name
},
set(val) {
obj.name &＃61; val
box.innerHTML &＃61; &＃96;你好&＃xff0c; 我叫${target.name} , 我今年${target.age}&＃96;
}
})
Object.defineProperty(target, &＃39;age&＃39;, {
get() {
return obj.age
},
set(val) {
obj.age &＃61; val
box.innerHTML &＃61; &＃96;你好&＃xff0c; 我叫${target.name} , 我今年${target.age}&＃96;
}
})
box.innerHTML &＃61; &＃96;你好&＃xff0c; 我叫${target.name} , 我今年${target.age}&＃96;
ipt1.onchange &＃61; function () {
target.name &＃61; this.value
}
ipt2.onchange &＃61; function () {
target.age &＃61; this.value
}


三. 封装函数实现数据劫持

<div id&＃61;"box">div>
<input type&＃61;"text" id&＃61;"ipt1">
<input type&＃61;"text" id&＃61;"ipt2">
<script>
// 原始对象
const obj &＃61; {
name: &＃39;zs&＃39;,
age: 20
}
// 进行封装函数实现数据劫持
function encapsulation(obj, cb) {
// 目标对象
// 通过数据劫持的方法&＃xff0c;把原始数据复制到目标中
let target &＃61; {};
// 遍历原始对象&＃xff0c;拿到对象中的每一个值
for (let k in obj) {
Object.defineProperty(target, k, {
get() {
return obj[k];
},
set(val) {
obj[k] &＃61; val;
cb(target);
}
});
}
cb(target);
return target;
}
// 调用封装函数
let app &＃61; encapsulation(obj, (target) &＃61;> {
box.innerHTML &＃61; &＃96;你好&＃xff0c; 我叫${target.name} , 我今年${target.age}&＃96;;
});
// 获取input框中输入的值
ipt1.onchange &＃61; function () {
app.name &＃61; this.value;
}
ipt2.onchange &＃61; function () {
app.age &＃61; this.value;
}
script>


效果图&＃xff1a;

四. 数据代理(Proxy)

在数据劫持这个问题上&＃xff0c;Proxy 可以被认为是 Object.defineProperty() 的升级版。外界对某个对象的访问&＃xff0c;都必须经过这层拦截。因此它是针对 整个对象&＃xff0c;而不是 对象的某个属性&＃xff0c;所以也就不需要对 keys 进行遍历。

Proxy 对象用于创建一个对象的代理&＃xff0c;从而实现基本操作的拦截和自定义&＃xff08;如属性查找、赋值、枚举、函数调用等&＃xff09;。

语法&＃xff1a;

const p &＃61; new Proxy(target, handler)


参数&＃xff1a;

• target

  
  

  要使用 Proxy 包装的目标对象&＃xff08;可以是任何类型的对象&＃xff0c;包括原生数组&＃xff0c;函数&＃xff0c;甚至另一个代理&＃xff09;。

• handler

  
  

  一个通常以函数作为属性的对象&＃xff0c;各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

简单的数据代理案例&＃xff1a;

const obj &＃61; {
name: &＃39;tom&＃39;,
age: 18
}
// 开始代理
const res &＃61; new Proxy(obj, {
// 访问数据的时候 会触发
get(target, property) {
return target[property];
},
// 设置数据的时候会触发
set(target, property, val) {
// target 就是要代理的目标对象
// property 就是要修改的属性
// val 修改的属性值
target[property] &＃61; val;
// 必须写&＃xff0c;简单代理必须返回true
return true;
}
})
res.name &＃61; &＃39;jerry&＃39;;
// 给对象新添加一个数据
res.sex &＃61; &＃39;女&＃39;;
console.log(&＃39;原始数据&＃39;, obj); // 原始数据 {name: &＃39;jerry&＃39;, age: 18, sex: &＃39;女&＃39;}
console.log(&＃39;代理结果&＃39;, res); // 代理结果 Proxy {name: &＃39;jerry&＃39;, age: 18, sex: &＃39;女&＃39;}


五. Proxy和Object.defineProperty的区别

1. Proxy是对整个对象的代理&＃xff0c;而Object.defineProperty只能代理某个属性。
2. 对象上新增属性&＃xff0c;Proxy可以监听到&＃xff0c;Object.defineProperty不能。
3. 数组新增修改&＃xff0c;Proxy可以监听到&＃xff0c;Object.defineProperty不能。
4. 若对象内部属性要全部递归代理&＃xff0c;Proxy可以只在调用的时候递归&＃xff0c;而Object.definePropery需要一次完成所有递归&＃xff0c;性能比Proxy差。
5. Proxy不兼容IE&＃xff0c;Object.defineProperty不兼容IE8及以下
6. Proxy使用上比Object.defineProperty方便多。

结束语&＃xff1a;

希望对您有一点点帮助&＃xff0c;如有错误欢迎小伙伴指正。
&＃x1f44d;点赞&＃xff1a;您的赞赏是我前进的动力&＃xff01;
⭐收藏&＃xff1a;您的支持我是创作的源泉&＃xff01;
✍评论&＃xff1a;您的建议是我改进的良药&＃xff01;
一起加油&＃xff01;&＃xff01;&＃xff01;&＃x1f4aa;&＃x1f4aa;&＃x1f4aa;