Object.defineproperty

  • 该方法会直接在一个对象上定义 一个 新属性，或者修改一个对象的现有属性,对属性可以有更多控制配置

  • 该方法有 三个 参数 Object.defineProperty(obj, prop, descriptor)

    • obj: 要定义属性的对象。
    • prop: 要定义或修改的属性的名称或 Symbol 。

    • descriptor: 要定义或修改的属性描述符。

      1. let value = "这是值", obj = {}
      2. Object.defineProperty(obj, 'key', {
      3. configurable: false,
      4. enumerable: true,
      5. get() {
      6.     return value
      7. },
      8. set(newVal) {
      9.     value = newValue
      10. }
      11. })

      代码演示：

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>第一个Vue</title>
      6. </head>
      7. <body>
      8. <script type="text/javascript">
      9. let number = 2000;
      10. let person = {
      11.    name:'张三',
      12.    sex:'男'
      13. }
      14. Object.defineProperty(person,'age',{
      15.    value:18,
      16.    enumerable:true, //控制属性是否可以枚举，默认值是false
      17.    writable:true, //控制属性是否可以被修改，默认值是false
      18.    configurable:true //控制属性是否可以被删除,默认值是false
      19. })
      20. Object.defineProperty(person,'salary',{
      22.    //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
      23.    get:function (){
      24.        console.log('有人读取了salary属性')
      25.        return number;
      26.    },
      27.    //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
      28.    set(value){
      29.        number = value;
      30.    }
      32. })
      33. console.log(Object.keys(person))
      34. console.log(person)
      35. </script>
      36. </body>
      37. </html>

      通过Object.defineProperty此方法添加的属性是不可枚举的也就是不不能被遍历，console.log(Object.keys(person))这样显示的效果是['name', 'sex'],添加属性enumerable:true，控制属性是否能被枚举

      演示效果：

      image.png
      image.png

      Object.defineProperties

      Object.defineProperties``方法，用于给对象定义属性

  • 方法直接在一个对象上定义 一个或多个 新的属性或修改现有属性

  • 该方法有 两个 Object.defineProperties(obj, props)

    • obj: 在其上定义或修改属性的对象。

    • props: 要定义其可枚举属性或修改的属性描述符的对象

      let value = "这是值", obj = {}
Object.defineProperties(obj, {
username: {
   value: '小明',
   configurable: false,
   writable: true
},
password: {
   value: '***',
   configurable: true,
   enumerable: true
}
})

      数据代理

      数据代理: 通过一个对象代理对另一个对象中属性的操作（读/写)

      代码演示：

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue</title>
</head>
<body>
<script type="text/javascript">
let obj = {x:100}
let obj2 = {y:200}

Object.defineProperty(obj2,'x',{
   get(){
       return obj.x
   },
   set(value){
     obj.x = value 
   }
})
</script>
</body>
</html>

      演示效果：

      image.png