复习js的Object.defineProperty()

今天在看尚硅谷的Vue2时，讲到了Object.defineProperty()方法，有点忘了，所以找资料复习了一下。

总说

Object.defineProperty()是一种用于定义对象属性的JavaScript方法，它允许开发人员精确控制一个属性的行为，并可以对属性进行监视和响应。该方法接受三个参数：

obj：要定义属性的对象。
prop：要定义或修改的属性的名称。
descriptor：将被定义或修改的属性描述符。
"属性描述符（descriptor）是一个包含以下可选属性的对象:

• configurable: 当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除；默认为false。(简单理解就是用defineProperty()添加的属性默认是不可删除的，要想删，得设成true)
• enumerable: 控制属性是否被枚举，默认为false。
• value: 属性值，默认为undefined。
• writable:默认为false, 表示只读。定义为true时，使用defineProperty()所以定义的属性的值才能被修改
• get: 在读取属性时调用的函数，默认为undefined。
• set: 在写入属性时调用的函数，默认为undefined。
• Object.defineProperty()方法在许多高级JavaScript库和框架中被广泛使用，例如Vue.js中就用该方法实现了响应式数据、计算属性和监听器等功能。

 定义对象时直接定义的属性是可以随意修改和删除的，但用defineProperty()定义的属性默认是不可枚举、不可修改、不可删除的，需要设置相应的属性才可以。

例子：实例1:

  <script>
      //这是定义对象时直接定义属性
        let person = {
            name:'张三',
            sex:'男'
            //age:18 这样添加的是可以参与遍历的
        }
        Object.defineProperty(person,'age',{ value:18})//追加属性
        console.log(person)
		//keys()方法输出一个对象的所有属性(即key)
        console.log(Object.keys(person))//defineProperty添加的age属性默认不参与遍历的，即是不可枚举的。
    </script>

打开谷歌的控制台，查看输出：

 发现age没输出，因为defineProperty添加的age属性默认不参与遍历的，即是不可枚举的

下面对属性描述符的各个属性进行例子介绍。

enumerable属性

开启enumerable属性,即设置为true，使age属性能参与遍历

    <script>
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18,
//设置为true了
            enumerable:true
        })
        console.log(person)
//defineProperty添加的age属性默认不参与遍历的，即是不可枚举的。
//要想能遍历，需要设置一个属性enumerable:true
        console.log(Object.keys(person))
        
    </script>

查看谷歌控制台输出：发现age也输出了

 

writable属性

defineProperty添加的age属性默认是不可修改的，需要将writable设为true才可以修改

  <script>
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18,
            enumerable:true,
            writable:true
        })
    </script>

 

configurable属性

尝试在谷歌控制台删除age属性，发现失败，如下图：

 

用defineProperty()添加的age属性默认是不可删除的，需要将configurable设为true才可以删除

  <script>
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18,
            enumerable:true,//控制属性是否可用枚举(遍历),默认false
            writable:true,//控制属性是否可被修改,默认false
            configurable:true//控制属性是否可被删除,默认false
        })
       
    </script>

设置configurable为true后，age属性可以被删除

 

get属性

 <script>
        let number = 18
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            //get本质是属性，function是他的值，这一对key-value常称为getter
           //当有人读取person的age属性时，get函数(即getter)就会被调用，
//且返回值就是age的值
             //  get:function () {
           //      return number;
           //  }
            //简写为
            get(){
                return number
            }
        })
    </script>

set属性

    <script>
        let number = 18
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            //get是属性，右边的function是他的值，这一对key-value常称为getter
           //当有人读取person的age属性时，get函数(即getter)就会被调用，且返回值就是age的值
           //  get:function () {
           //      return number;
           //  }
            //简写为
            get(){
                return number
            },
       
            // set:function (value){
            //     console.log('有人修改了age属性，且值为',value)
            //     number = value//因为getter以number的值充当年龄，所以，必须修改number变量，才能实现修改age的效果
            // }
            //简写。当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value){ //这个value变量随意起名，不是特定的，起x，a，bbb也行
                number = value
            }
            }
        })
    </script>

感谢尚硅谷Vue教学视频