242 Object.defineProperty

Posted jianjie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了242 Object.defineProperty相关的知识,希望对你有一定的参考价值。

Object.defineProperty:设置或修改对象中的属性。

Object.defineProperty(obj, prop, descriptor)。

obj:必需,目标对象
prop:必需,需定义或修改的属性的名字
descriptor:必需,目标属性所拥有的特性
Object.defineProperty() 第三个参数 descriptor 说明:
(1)value: 设置或新增的属性的值 【默认是undefined。】

(2)writable: 值是否可以重写,true | false,默认值是false 【如果第一次设置的时候,为false,后面改为true,再设置value,会报错】

(3)enumerable: 目标属性是否可以被枚举,true | false,默认的值是 false

(4)configurable: 目标属性是否可以被删除,或是否可以再次修改特性 true | false,默认的值是 false 【第一次设置后,允许再修改第三个参数里面的特性,即不能再修改属性的enumerable、configurable】
Object.defineProperty(对象,修改或新增的属性名,{
        value: 修改或新增的属性的值,
        writable: true/false,  // 如果值为false,不允许修改这个属性值
        enumerable: false,    // enumerable 如果值为false,则不允许遍历
        configurable: false   // 属性是否可以被删除,或是否可以再次修改特性,configurable 如果为false,则不允许删除这个属性
})  
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // Object.defineProperty() 定义新属性或修改原有的属性
        var obj = {
            id: 1,
            pname: '华为',
            price: 1999
        };
        // 1. 以前的对象添加和修改属性的方式
        // obj.num = 1000;
        // obj.price = 99;
        // console.log(obj);


        // 2. Object.defineProperty() 定义新属性或修改原有的属性
        Object.defineProperty(obj, 'num', {
            value: 1000,
            enumerable: true
        });
        console.log(obj); // {id: 1, pname: "华为", price: 1999, num: 1000}

        Object.defineProperty(obj, 'price', {
            value: 9.9
        });
        console.log(obj); // {id: 1, pname: "华为", price: 9.9, num: 1000}

        Object.defineProperty(obj, 'id', {
            // 如果值为false 不允许修改这个属性值 默认值也是false
            writable: false,
        });
        obj.id = 2;
        console.log(obj); // (1)修改失败,因为writable: false;(2){id: 1, pname: "华为", price: 9.9, num: 1000}

        Object.defineProperty(obj, 'address', {
            value: '深圳',
            // 如果只为false 不允许修改这个属性值 默认值也是false
            writable: false,
            // enumerable 如果值为false 则不允许遍历, 默认的值是 false
            enumerable: false,
            // configurable 如果为false 则不允许删除这个属性 不允许再修改第三个参数里面的特性 默认为false
            configurable: false
        });
        console.log(obj); // {id: 1, pname: "华为", price: 9.9, num: 1000, address: "深圳"}
        console.log(Object.keys(obj)); // ["id", "pname", "price", "num"]

        delete obj.address; // 不能删除,因为configurable: false
        console.log(obj); // {id: 1, pname: "华为", price: 9.9, num: 1000, address: "深圳"}

        delete obj.pname; // 删除成功
        console.log(obj); // {id: 1, price: 9.9, num: 1000, address: "深圳"}

        Object.defineProperty(obj, 'address', {
            value: '中国山东蓝翔技校xx单元',
            // 如果只为false 不允许修改这个属性值 默认值也是false
            writable: true,
            // enumerable 如果值为false 则不允许遍历, 默认的值是 false
            enumerable: true,
            // configurable 如果为false 则不允许删除这个属性 默认为false
            configurable: true
        });
        console.log(obj.address); //
    </script>
</body>

</html>

以上是关于242 Object.defineProperty的主要内容,如果未能解决你的问题,请参考以下文章

Object.defineProperty 方法

理解Object.defineProperty方法

所有浏览器的 Object.defineProperty?

Object.defineProperty

深入理解Object.defineProperty

Object.defineProperty()