<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>一个简单的数据代理例子</title>
</head>
<body>
<!-- 数据代理：通过一个对象对另一个对象中属性的读/写操作 -->
<script>
let a = { b: 1 };
let c = { d: 2 };
// 场景：通过（操作）c读到b，也能修改（写）b
Object.defineProperty(c, "b", {
// 通过c访问b时
get() {
return a.b;
},
// 调用时意味要改变c的b
set(val) {
a.b = val;
},
});
</script>
</body>
</html>
首先，验证一下a上有没有b，打印结果如下图，是存在b的
再验证一下c上有没有b,打印如下图，也是有的
来打印一下c,能看到c上原来的属性d：2，同时也存在b，invoke property getter，值为1，及为b服务的get和set方法
这时候来修改一下c.b的数据 =100,并且打印a.b的数据，如下，发现a.b的值被修改了。