JavaScript对象的补充

Ellan980809

已于 2024-06-17 08:04:06 修改

阅读量213

点赞数

文章标签： javascript 开发语言

于 2022-09-03 11:28:21 首次发布

本文链接：https://blog.csdn.net/Ellan980809/article/details/126675247

版权

1.属性描述符

属性描述符：可以精准的对一个属性进行操作。例如添加，删除，重新赋值
当使用属性描述符时，我们需要Object.defineproperty()方法进行操作，括号里可以填写三个参数
Object.defineproperty(obj,prop,descriptor);
- obj，要定义属性的对象
- prop要定义或者修改的属性名称
- descriptor要定义或者修改的属性描述符
属性描述符又分为两类
- 数据属性描述符
- 存取属性描述符

2.属性描述符-----数据属性描述符

2.1数据属性描述符的特性

configurable：表示属性是否可以通过delete删除属性默认为true

 var obj = {
            name: "Ellan",
            age: 21,
            city: "shanghai"
        }

        Object.defineProperty(obj, "name", {
            configurable: false // 默认为true 可删除     为false 不可删除
        })
        delete obj.name;        //此时delete未生效
        obj.name = "lisa";         //生效
        for (key in obj) {
            console.log(key, obj[key])   //生效可以循环
        }
        console.log(obj.name);

enumerable:表示该属性是循环

var obj = {
            name: "Ellan",
            age: 21,
            city: "shanghai"
        }
   
      Object.defineProperty(obj, "age", {
            configurable: false,
            enumerable: false   //为false 该属性不能被循环      
        })

        for (key in obj) {
            console.log(key, obj[key]);     // age不能打印出来
        }

enmerable:该属性又分为两种情况

情况一：当我们直接在一个对象上定义属性时这个属性默认为true 可以循环

 var obj = {
            name: "Ellan",
            age: 21,
            city: "shanghai"
        }
  
    for (key in obj) {
            console.log(key, obj[key]); 
        }

情况二：当我们通过属性描述符去定一个属性时该属性值默认为false 不可以循环

var obj = {
            name: "Ellan",
            age: 21,
            city: "shanghai"
        }
        Object.defineProperty(obj, "number", {
            configurable: false,
            value: 20000
            // enumerable: false   //为false 该属性不能被循环      
        })

        for (key in obj) {
            console.log(key, obj[key]);     // number不能打印出来  
        }

writable:表示是否可以修改该属性值也有两种情况与enmerable情况一样

   var obj = {
            name: "Ellan",
            age: 21,
            city: "shanghai"
        }

Object.defineProperty(obj, "name", {
            writable: false     // 为false 时    name 属性值不能修改  
        })
        obj.name = "lisa";
        console.log(obj.name);      //打印结果为 Ellan

value ：属性的value值，读取属性时会返回该值，修改属性时，也会对其进行修改一般情况下默认为undefined；

var obj = {
            name: "Ellan",
            age: 21,
            city: "shanghai"
        }  

Object.defineProperty(obj, "name", {
            value: "lisa"
        })

        console.log(obj.name)       //  打印为lisa

3.属性描述符----存取属性描述符

configurable
enmerable

get：获取属性时会执行函数默认为undefined

 var obj = {
            name: {
                value: "Ellan",
                configurable: false
            },
            age: {
                value: 22,
                configurable: false,
                get: function (value) {
                    console.log("我已经打印了", value)
                },
                set: function (value) {
                    console.log("我已经被修改了", value)
                }
            }

        }

        obj.age.value = 2022
        console.log(obj.age.value)

set：设置属性时会执行函数默认为undefined

 var obj = {
            name: {
                value: "Ellan",
                configurable: false
            },
            age: {
                value: 22,
                configurable: false,
                get: function (value) {
                    console.log("我已经打印了", value)
                },
                set: function (value) {
                    console.log("我已经被修改了", value)
                }
            }

        }

        obj.age.value = 2022
        console.log(obj.age.value)

3.1 数据属性描述符与存取属性描述符的区别

数据属性描述符
- configurable
- writable
- value
- enmerable
存取属性描述符
- configurable
- enmerable
- get
- set

4.获取对象属性描述符

getOwnPropertyDescriptor()

var obj = {
            name: "Ellan",
            age: 21,
            city: "shanghai"
        }


        var obj = {
            name: {
                value: "Ellan",
                configurable: false
            },
            age: {
                value: 22,
                configurable: false,
                get: function (value) {
                    console.log("我已经打印了", value)
                },
                set: function (value) {
                    console.log("我已经被修改了", value)
                }
            }

        }

        obj.age.value = 2022
        console.log(obj.age.value)
        var obj1 = Object.getOwnPropertyDescriptor(obj, "name")
        console.log(obj1)

getOwnPropertyDescriptors()

var obj = {
            name: "Ellan",
            age: 21,
            city: "shanghai"
        }


        var obj = {
            name: {
                value: "Ellan",
                configurable: false
            },
            age: {
                value: 22,
                configurable: false,
                get: function (value) {
                    console.log("我已经打印了", value)
                },
                set: function (value) {
                    console.log("我已经被修改了", value)
                }
            }

        }

        obj.age.value = 2022
        console.log(obj.age.value)
        var obj1 = Object.getOwnPropertyDescriptors(obj, "name", "age")
        console.log(obj1)

禁止对象扩展新属性：preventExtensions 严格模式下会报错

 var obj = {
            name: "Ellan",
            age: 21,、
        }
   Object。preventExtensions(obj);
obj.city = "SH";
console.log(obj.city)// 为undifined

密封对象，不允许配置和删除属性： seal
- 原理
  - 调用preventExtensions
  - configurable ：false
冻结对象：（不允许修改现有属性） freeze
- 原理
  - 调用seal
  - writable： false

5.defineProperty()和defineproperties（）

defineProperties()可以写对象多个属性

  var obj = {}
        Object.defineProperties(obj, {
            name: {
                value: "Ellan",
                configurable:false

            },
            age: {
                value: 22,
            }
        })
        console.log(obj.name)