对象代理Proxy和Object.definedProperty的区别

一、Object.defineProperty

1.Object.defineProperty([object],[property],[descriptor])

参数一：你需要操作的对象
参数二：你要的定义的属性名
配置项，等同与常用语参数的配置的configure 这里的descriptor是一个配置的对象，对象的value属性的值就是用于设置你要添加的那个属性的值。

2.Object.defineProperties ([object],[properties]) 可用于一次向对象上添加多个属性

参数一：需要操作的对象

参数二：properties是一个对象，添加的属性以对象的形式进行相关的配置操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function defineProperty() {
        var _obj = {}
        Object.defineProperties(_obj,{
          name:{
            value:'重庆吴彦祖',
            writable:false, // wirtable 默认值为false，所以用Object.properties/property定义的属性是不能修改的，将writable的值改为true，可对定义的属性值进行修改
            enumerable:true  
          },
          age:{
            value:22,
            writable:true,
            enumerable:true
          }
        })
        return _obj
      }
      var person1 = defineProperty()
      person1.name='刘德华'
      person1.age=18
      console.log(person1)
    </script>
  </body>
</html>

tips:

Object.property/properties属性值不能修改
属性不可枚举
属性不可删除

解决Object.properties 的属性不能修改的方法，在配置属性的时候将writable值改为true

解决Object.properties 的属性不能枚举的方法，在配置属性的时候将enumerable值改为true

解决Object.properties 的属性不能删除的方法，在配置属性的时候将configurable值改为true

***注意：上述所述的不能对属性进行修改、枚举、删除的操作，只针对于是通过Object.defineProperty方法定义的属性，如果本来对象里面就存在的属性是不具备上面说的这些情况。

二、Proxy 对象代理

基本使用 var proxy = new Proxy([object],[handler])

参数【object】需要进行的代理【handler】 --》为一个配置对象

var monkey = {
        name: '我是一只猴子',
        age: '未知',
        fly() {
          console.log('一个跟斗就可以飞十万八千里')
        },
      }
      var proxy = new Proxy(monkey, {
        get(monkey, prop) {
          return monkey[prop]
        },
        set(monkey, prop, newValue) {
          monkey[prop] = newValue
        },
      })
      monkey.name='齐天大圣' // 注意：这里的坑，只要用了Proxy进行代理了的对象，后面不管是通过源对象的方式还是Proxy对象的方式设置里面的属性，都是走的Proxy里面的set 和 get方法了
      console.log(monkey)
      console.log(proxy)