Object.defineProperty()方法的使用

离奇6厘米

已于 2022-08-01 21:46:51 修改

阅读量295

点赞数

文章标签： vue.js 前端 javascript

于 2022-07-31 21:09:14 首次发布

本文链接：https://blog.csdn.net/Vest_er/article/details/126089946

版权

用途：

定义对象中的新属性或修改对象的原有属性

语法：

Object.defineProperty(obj,prop,descriptor)

注：三个参数都必须有

（1）obj表示目标对象

（2）prop表示需要定义或修改属性的名字

（3）descriptor表示目标属性所拥有的特性

第三个参数descriptor说明：

value：设置属性的值
writable:值是否可以被重写。true|fale //false表示不允许修改属性值
enumerable：是否遍历某个属性。true|fale //默认值为false
configurable:目标属性是否可以被删除或是否可以再次修改特性。 true|false

代码示例：

var star = {
    name: "zhangsan"
};
Object.defineProperty(star, "name", {
    value: "lisi"
})
console.log(star); // {name:"lisi"}

通过value值修改属性值

var star ={name:"zhangsan"};

Object.defineProperty(star,"name",{
    writable:false;
})

console.log(star); // {name:"zhangsan"}

star.name = "lisi";

console.log(star); // {name:"zhangsan"}

通过writable属性设置name属性是否可以被重写，默认值false为不能重写

var star ={name:"zhangsan"};

Object.defineProperty(star,"age",{
    value:18,
    enumerable:false,
})

for (var i in star) {
    console.log(star[i])
} //zhangsan

通过enumerable属性设置age属性是否可以被遍历，默认值false为不能被遍历

var star ={name:"zhangsan"};

Object.defineProperty(star,"age",{
    value:18,
    configurable:false,
})

delete star.age；

console.log(star); // {name:"zhangsan",age:18}

通过configurable属性设置age属性是否可以被删除，默认值false为不能被删除

进阶教程

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

需求：通过obj2实现对obj1的修改

let obj1 = {x: 100};
let obj2 = {y: 1000};

Object.defineProperty(obj2, "x", {
    //get用于读取或创建x属性，并且值为obj1的x属性值
    get() {
        return obj1.x
    },
    //set函数用于修改属性，调用set函数意味着obj2的x属性值被修改
    set(value) {
        obj1.x = value
    }
})

console.log(obj2); //{y:1000，x:100}