20.proxy.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <script>
  10. /**
  11. * 代理 proxy
  12. * const proxy = new Proxy(target,handler);
  13. * target 目标值
  14. * handler 包含一系列的拦截操作
  15. *
  16. * */
  17. let obj = {
  18. name:'Lucy',
  19. // age: 18
  20. }
  21. const vase = new Proxy(obj,{
  22. get(target,key,prototype) {
  23. console.log(target,'目标对象');
  24. console.log(key,'方法');
  25. console.log(prototype,'代理值');
  26. return target;
  27. },
  28. set(target,key,prototype) {
  29. console.log(target,'原对象')
  30. console.log(key,'修改的属性');
  31. console.log(prototype,'新对象');
  32. //执行代理中的内容
  33. return target[key] = 'AAA';
  34. }
  35. })
  36. vase.name = 'LiLi';
  37. console.log(vase.set);
  38. // console.log(vase.get.name);
  39. // console.log(vase.set);
  40. </script>
  41. </body>
  42. </html>