• 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】
    
    (5)我的补充:还有get()、set()选项,但是这两个选项中的任何一个选项都不能和 value选项 同时出现,否则报错。
    
    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>
    
  • 相关阅读:
    Java中判断两个列表是否相等
    chrome:插件、跨域、调试....
    mac 开发环境采坑
    webpack升级踩坑
    js-使用装饰器去抖
    React setState 笔试题,下面的代码输出什么?
    react 解决:容器组件更新,导致内容组件重绘
    centos使用ngnix代理https
    javascript 理解继承
    js 数据监听--对象的变化
  • 原文地址:https://www.cnblogs.com/jianjie/p/12229142.html
Copyright © 2020-2023  润新知