美文网首页js css html
Object.defineProperty()详解

Object.defineProperty()详解

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-03-13 09:10 被阅读0次

    一、基本概念

    Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象
    Object.defineProperty()可以为对象的属性添加特性,每一个被添加过的属性,都会拥有属于自己的getter和setter。 正是有了getter和setter,可以实现数据驱动视图,数据实时绑定的效果

    二、语法:

    Object.defineProperty(obj, prop, descriptor)
    
    obj         要定义属性的对象(目标对象)
    prop        要定义或修改的属性的名称
    descriptor  目标对象属性的一些特征(是一个对象)
            descriptor  下有6个参数
        参数1:
            value:属性值
        参数2:
          writable:对象属性值是否可以被修改  true允许  false不允许
        参数3:
          configurable:对象属性是否可以被删除 true允许  false不允许
        参数4:
          enumerable:对象属性是否可被枚举
        参数5:
            get():给一个属性提供getter方法,当访问这个对象的属性值得时候触发该方法
        参数6:
            set():给一个属性提供setter方法,当设置属性值得时候触发该方法  
    

    三、案例

    object1对象里添加 property1 为 42的属性

    const object1 = {};
    
    Object.defineProperty(object1, 'property1', {
        value: 42
    });
    
    console.log(object1.property1);//42
    

    四、descriptor 详解

    4.1、value

    该属性对应的值,可以是任何有效的 JavaScript 值(数值,对象,函数等)。

    默认为undefined

    var obj = {};
    Object.defineProperty(obj,"name",{
        value:"张三"
    })
    
    Object.defineProperty(obj,"age",{
        value:"23"
    })
    
    console.log(obj)  //{name:'张三',age:'23'}
    

    4.2、writable

    当且仅当该属性的writable键值为true时,属性的值,也就是上面的value,才能被赋值运算符改变。
    默认为false

    var obj = {};
    Object.defineProperty(obj,"name",{
        value:"张三",
        writable:false//当设置为false的时候当前对象的属性值不允许被修改
    })
    

    4.3、configurable

    对象属性是否可以被删除 true允许 false不允许
    configurable为false时删除后返回的是 undefined
    configurable为true时删除后返回的是 true

    默认为false。

    4.4、enumerable

    当且仅当该属性的enumerable键值为true时,该属性才会出现在对象的枚举属性中
    默认为false。

    var obj = {name:"张三",age:"李四"}
    Object.defineProperty(obj,"name",{
        enumerable:true//当设置为true的时候对象的属性可被枚举
    })
    
    console.log(Object.keys(obj))//["name",age]
    
    
    var obj = {name:"张三",age:"李四"}
    Object.defineProperty(obj,"name",{
        enumerable:false//当设置为false的时候对象的属性不可被枚举
    })
    
    console.log(Object.keys(obj))//["age"]
    

    4.5、get() && set()

    当使用了get()方法或者set()方法的时候就不能使用value和writable中的任何一个属性否则会报错

    var obj = {name:"张三"}
    
    Object.defineProperty(obj,"name",{
        get(){
            console.log("被访问了")//当被访问的时候会触发get()方法
       
        },
        set(newVal){
            console.log("被设置了"+newVal)//当被设置的时候会触发set()方法
        }
    })
    obj.name//输出:被访问了
    obj.name="李四";//输出:被设置了李四
    

    4.5.1、get函数(getter)何时触发?

    当有人访问了name属性时,get函数(getter)就会被调用,且返回值就是name的值

    4.5.2、set函数(setter)何时触发?

    当有人修改了name属性时,set函数(setter)就会被调用,且会收到具体值(修改的值)

    相关文章

      网友评论

        本文标题:Object.defineProperty()详解

        本文链接:https://www.haomeiwen.com/subject/jlgfrdtx.html