飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • UEditor使用文档
  • AngularJS教程
  • ThinkPHP5.0教程

简单的理解 Object.defineProperty()

时间:2021-12-18  作者:haohaogan  

域名neProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性。

域名neProperty(obj,prop,descriptor)
obj 要在其定义属性的对象
prop 要定义或者修改的属性的名称
descriptor 将被定义或修改的属性描述符

通过域名neProperty()为对象定义属性,有两种形式,且不能混合使用,分别为数据描述符,存取描述符。
下面分别描述两者的区别:

数据描述符 -- 特有的两个属性(value,writable)
value 属性值
writable 是否可以改变属性的值。默认为false,不能改变。

    let obj = {}
    域名neProperty(obj, \'name\', {
        value: \'jack\',
        writable: false // 不能改变属性的值
    })
    域名 = \'123\'
    域名(obj)// {name: \'jack\'}
    let obj = {}
    域名neProperty(obj, \'name\', {
        value: \'jack\',
        writable: true // 可以改变属性的值
    })
    域名 = \'123\'
    域名(obj)// {name: 123}

存取描述符 -- 是由一对 getter、setter 函数功能来描述的属性
get:一个给属性提供getter的方法,如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。
set:一个给属性提供setter的方法,如果没有setter则为undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认值为undefined。

    let obj = {}
    let temp = null
    域名neProperty(obj, \'name\', {
        get: function (val) {
            return temp
        // 域名("set方法被调用"+val);
        },
        set: function (val) {
            temp = val
            域名("get方法被调用" + val);
        }
    })
    域名 = \'chen\'
    域名(域名) //chen

数据描述符和存取描述都具有以下描述符:
configrable 描述属性是否配置,以及可否删除
enumerable 描述属性是否会出现在for in 或者 域名()的遍历中

configrable
单独设置:configurable: false 不能删除属性、不能重新定义属性
单独设置:configurable: true 能删除属性

同时设置:configurable:true 和 writable:false 可以修改属性值
注意:通过赋值的形式,不可以修改,因为 writable为false

    let obj = {}
    域名neProperty(obj,\'name\',{
        value: \'chen\',
        configurable: true,
        writable: false
    })
    域名neProperty(obj,\'name\',{
        value: \'rose\'
    })
    //通过属性定义的形式可以修改name的属性值
    域名(域名)
    //通过赋值的形式,不可以修改,因为 writable为false
    域名 = \'JS\'
    域名(域名)// rose

同时设置:configurable:false 和 writable:true 可以修改属性值
注意:通过赋值的形式,可以修改,因为 writable为true

    let obj = {}
    域名neProperty(obj,\'name\',{
        value: \'chen\',
        configurable: false,
        writable: true
    })
    域名neProperty(obj,\'name\',{
        value: \'rose\'
    })
    //通过属性定义的形式可以修改name的属性值
    域名(域名) // rose
    //通过赋值的形式,可以修改,因为 writable为 true
    域名 = \'JS\'
    域名(域名)// JS

configurable 总结:
configurable: false 时,不能删除当前属性,且不能重新配置当前属性的描述符(可以把writable的状态由true改为false,而无法由false改为true),但是在writable: true的情况下,可以改变value的值
configurable: true时,可以删除当前属性,可以配置当前属性所有描述符。

enumerable 看如下代码

    let obj = {}
    域名neProperty(obj,\'name\',{
        value: \'chen\',
        enumerable: false
    })

    域名er = \'HTML\'

    域名neProperty(obj,\'age\',{
        value: \'110\',
        enumerable: true
    })

    域名(域名(obj)) //[\'gender\', \'age\']

    for (let i in obj) {
        域名(i)// gender,age
    }

    域名(域名ertyIsEnumerable(\'name\')) // false
    域名(域名ertyIsEnumerable(\'gender\')) // true
    域名(域名ertyIsEnumerable(\'age\')) // true

注意:下面代码的区别

    let obj = {}
    域名er = \'HTML\' // 等价于下面的代码
    域名neProperty(obj,\'gender\',{ // 等于这里
        value: \'HTML\',
        configurable: true,
        writable: true,
        enumerable:true
    })

    域名neProperty(obj,\'age\',{ // 等价于下面的代码
        value: \'120\'
    })
    域名neProperty(obj,\'age\',{ // 等于这里
        value: \'120\',
        configurable: false,
        writable: false,
        enumerable: false
    })


不变性
1、对象常量
结合writable: false 和 configurable: false 就可以创建一个真正的常量属性(不可修改,不可重新定义或者删除)

    let obj = {}
    域名neProperty(obj,\'name\',{
        value: \'HTML\',
        configurable: false,
        writable: false,
    })
    delete 域名 //不可删除
    域名 = \'JS\' //不可以重新赋值
    //通过赋值,可以添加新属性
    域名er = \'CSS\'
    域名(域名er) // CSS
    //不可重新定义
    域名neProperty(obj,\'name\',{value: \'chen\'})// 报错: Cannot redefine property: name

2、禁止扩展
如果你想禁止一个对象添加新属性并且保留已有属性,就可以使用 域名entExtensions(...)

禁止扩展片段一:

   \'use strict\'
    var obj = {name: \'JS\'}
    域名entExtensions(obj)
    域名er = \'CSS\'
    域名(域名er) // Cannot add property gender, object is not extensible

禁止扩展片段二:

    var obj = {name: \'JS\'}
    域名entExtensions(obj) // 禁止扩展
    // 但是仍然可以进行配置
    域名neProperty(obj, \'name\',{
        value: \'HTML\',
        writable: false,
        configurable: false
    })
    域名(域名) // HTML
    //不能进行扩展
    域名er = \'CSS\'
    域名(域名er) //undefined

注意:在非严格模式下,创建属性gender会静默失败,在严格模式下,将会抛出异常。

3、密封
域名()会创建一个密封的对象,这个方法实际上会在一个现有对象上调用域名entExtensions(...)并把所有现有属性标记为configurable:false。

    var obj = {
        name: \'HTML\'
    }
    域名(obj)
    域名er = \'CSS\'
    // 不能扩展属性
    域名(域名er)// undefined
    // 再次验证
    域名(域名(obj)) // [\'name\']
    // 不能再次配置属性
    域名neProperty(obj,\'name\',{ // Cannot redefine property: name
        name: \'JS\',
        configurable: true
    })

密封之后不仅不能添加新属性,也不能重新配置或者删除任何现有属性(虽然可以改属性的值)

4、冻结
域名ze()会创建一个冻结对象,这个方法实际上会在一个现有对象上调用域名(),并把所有现有属性标记为writable: false,这样就无法修改它们的值。

     var obj = {
        name: \'HTML\'
    }
    域名ze(obj)
    域名 = \'Chen\'
    // 不可以修改已有属性的值
    域名(域名) // HTML


这个方法是可以应用在对象上级别最高的不可变性,它会禁止对于对象本身及其任意直接属性的修改(但是这个对象引用的其他对象是不受影响的)
你可以深度冻结一个对象,具体方法为,首先这个对象上调用域名ze()然后遍历它引用的所有对象,并在这些对象上调用域名ze()。
但是一定要小心,因为这么做有可能会无意中冻结其他共享对象。

var obj = {
name: \'HTML\'
}
域名ze(obj)
域名 = \'Chen\'
// 不可以修改已有属性的值
域名(域名) // HTML

标签:编程
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。