js 数据响应式(一)之Proxy(代理)_js获取proxy的值-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45148841/article/details/107132385

本文介绍了JavaScript中的数据响应式原理，通过Proxy代理实现数据变化的捕获和处理。Proxy作为数据访问的拦截器，可用于数据验证、操作过滤等场景。文章提供了实例，强调学习编程需亲手实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js 数据响应式 Proxy(代理

首先什么是数据响应式 :就是当你对数据进行操作的时候,给你一个反馈信息,你可以捕捉到这个数据进行了变更或者其它操作 ,呢么我们就需要一个 Proxy (代理)

什么是Proxy ?

Proxy:
也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由你来定义。
原文:mozilla 的官方定义:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

老规矩先上例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>proxy</title>
</head>
<style type="text/css">
.abc{
  height: 300px;
  background:red;
}
   </style>
<body>
    <div class="abc">
    </div>
<input type="button" name="" id="button" value="获取参数" style="margin-left: 50%"  onclick="click_button()">
</body>
<script >
   var b =document.querySelector('.abc'); //获取abc这个对象
    var data1= {      //创建一个 对象1
      name: 'lili',
      age : '18'
    }
    var data2= {        //创建一个 对象2
      name: 'huahua',
      age : '19'
    }
     b.innerHTML = data1.age    //给这个abc对象上展示 data1 的age属性
var p = new Proxy(data1,{        //创建 一个Proxy(代理)  第一个是参数是:对象,第二个参数是函数
  set(target,prop,newvalue)   //set  属性设置操作的捕捉器。   (对象,属性,新值)
  {

    console.log('set...',target,prop,newvalue,"数据在这个时候被更改了")
        b.innerHTML = newvalue
         return Reflect.set(target,prop,newvalue); //返回  data1

      
  }

});
var p1 = new Proxy(data2,{
 
  get(target,prop)  // get 属性读取操作的捕捉器
  {
      console.log('get...',target,prop,"数据在这个时候被获取了")
          return Reflect.get(...arguments);
  }
});
window.onload = function xiug(argument) {   //页面初始化的时候加载 这个函数
  setTimeout(function(){
      p.age = 21;
  },1000)
 setTimeout(function(){
      p.name = "xiaoming";
  },2000)
 setTimeout(function(){
    console.log(p.name)
      console.log(p.age)
  },3000)
}

function click_button(argument)
{
   console.log(p1.name)

}
      </script>
      </html>