javascript 对象方法 defineProperty()

图一：
在这里插入图片描述
图二：

图三：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA_Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script>
        // Object.defineProperty() 定义新属性或修改原有的属性
        // object.defineProperty(obj, prop,descriptor)
        // obj:必需。目标对象
        // prop:必需。需定义或修改的属性的名字
        // descriptor:必需。目标属性所拥有的特性
        var obj = {
            id:1,
            pname:'小米',
            price:1999
        };
        // 1. 以前的对象添加和修改属性的方式
        // obj.num = 1000;
        // obj.price = 99;
        // console.log(obj);

        // 2. Object.defineProperty() 定义新属性或修改原有属性
        // Object.defineProperty()第三个参数descriptor说明︰以对象形式{}书写
        // value:设置属性的值默认为undefined
        // writable:值是否可以重写。true | false默认为false
        // enumerable:目标属性是否可以被枚举。true| false默认为false
        // configurable:目标属性是否可以被删除或是否可以再次修改特性true | false默认为false

// value:设置属性的值默认为undefined
        Object.defineProperty(obj,'num',{
            value:1000//将 num 改为 1000
        });
        console.log(obj);//输出如  图一


// writable:值是否可以重写。true | false默认为false
        Object.defineProperty(obj,'id',{
            // 不允许修改这个值
            // 现在 id 为 1，下面我们进行一下修改。
            writable:false,
        });
        obj.id = 2;
        console.log(obj);// 如图二所示 id 没有改变。
        //obj.id = 2;这样写改变不了id了已经
        //但是我们还可以
        // Object.defineProperty(obj,'id',{
        //     value:2
        // });
        //上面这样修改id可以
        Object.defineProperty(obj,'address',{
            value:'中国山东蓝翔技校xx单元',
            writable:false,
            // enumerable 如果值为false 则不允许遍历，默认的值是 false
            enumerable:false
            // configurable 如果值为false 则不允许删除这个属性 默认为false
            //当在这里面设置   configurable:false  时，进行 delete.obj.address  操作，将不会删除 address 这个属性。
            // 并且不允许修改 defineProperty 第3个参数的值，如果在下面修改了会报错。
        });
        // 现在进行一下遍历
        console.log(Object.keys(obj));//如图3所示，并没有address，和 num（因为enumerable默认是false）
    </script>
</head>
<body>

</body>
</html>
javascript 对象方法 defineProperty()

猜你喜欢
