JavaScript中对象属性描述符的使用详解

  属性描述符是 ECMAScript 5 新增的语法,它其实就是一个内部对象,用来描述对象的属性的特性。

  属性描述符的结构

  在 JavaScript 中,对象的属性描述符用于描述和定义对象属性的特性。以下是常见的属性描述符及其作用:

  configurable:表示属性是否可以被删除或修改特性。如果设置为 false,则不能删除或修改该属性的特性。默认为 true。

  enumerable:表示属性是否可以通过 for...in 循环或 Object.keys() 方法进行枚举。如果设置为 false,则该属性不会出现在枚举中。默认为 true。

  value:表示属性的值。可以是任何有效的 JavaScript 值。

  writable:表示属性是否可以被赋值运算符修改。如果设置为 false,则该属性的值不能被修改。默认为 true。

  get:一个函数,用于获取属性的值。当访问该属性时,会调用该函数并返回其返回值。

  set:一个函数,用于设置属性的值。当给该属性赋值时,会调用该函数并传入新值作为参数。

  注意这几个属性不是都可以一起设置。get 和 set 以及 value 和 writable 这两组是互斥的,设置了 get 和 set 就不能设置 value 和 writable,反之设置了 value 和 writable 也就不可以设置 get 和 set。

  使用示例

  示例 1

  下面示例演示了使用 value 读写属性值的基本用法。

  示例 2

  下面示例演示了使用 writable 属性禁止修改属性 x。

  在正常模式下,如果 writable 为 false,重写属性值不会报错,但是操作失败,而在严格模式下则会抛出异常。

  示例 3

  configurable 可以禁止修改属性描述符,当其值为 false 时,value、writable、enumerable 和 configurable 禁止修改,同时禁止删除属性。

  在下面示例中,当设置属性 x 禁止修改配置后,下面操作都是不允许的,其中 obj.x=5; 若操作失败,则后面 4 个操作方法都将抛出异常。

  当 configurable 为 false 时,如果把 writable=true 改为 false 是允许的。只要 writable 或 configurable 有一个为 true,则 value 也允许修改。

  get 和 set 函数

  除了使用点语法或中括号语法访问属性的 value 外,还可以使用访问器,包括 set 和 get 两个函数。

  其中,set( ) 函数可以设置 value 属性值,而 get( ) 函数可以读取 value 属性值。

  借助访问器,可以为属性的 value 设计高级功能,如禁用部分特性、设计访问条件、利用内部变量或属性进行数据处理等。

  示例 1

  下面示例设计对象 obj 的 x 属性值必须为数字。为属性 x 定义了 get 和 set 特性,obj.x 取值时,就会调用 get;赋值时,就会调用 set。

  示例 2

  JavaScript 也支持一种简写方法。针对示例 1,通过以下方式可以快速定义属性。

  取值函数 get( ) 不能接收参数,存值函数 set( ) 只能接收一个参数,用于设置属性的值。

  操作属性描述符

  属性描述符是一个内部对象,无法直接读写,可以通过下面几个函数进行操作。

  Object.getOwnPropertyDescriptor( ):可以读出指定对象私有属性的属性描述符。

  Object.defineProperty( ):通过定义属性描述符来定义或修改一个属性,然后返回修改后的描述符。

  Object.defineProperties( ):可以同时定义多个属性描述符。

  Object.getOwnPropertyNames( ):获取对象的所有私有属性。

  Object.keys( ):获取对象的所有本地可枚举的属性。

  propertyIsEnumerable( ):对象实例方法,直接调用,判断指定的属性是否可枚举。

  示例 1

  在下面示例中,定义 obj 的 x 属性允许配置特性,然后使用 Object.getOwnPropertyDescriptor( ) 函数获取对象 obj 的 x 属性的属性描述符。修改属性描述符的 set 函数,重设检测条件,允许非数值型数字赋值。

  示例 2

  下面示例先定义一个扩展函数,使用它可以把一个对象包含的属性以及丰富的信息复制给另一个对象。

  【实现代码】

  【应用代码】

  控制对象状态

  JavaScript 提供了 3 种方法,用来精确控制一个对象的读写状态,防止对象被改变。

  Object.preventExtensions:阻止为对象添加新的属性。

  Object.seal:阻止为对象添加新的属性,同时也无法删除旧属性。等价于属性描述符的 configurable 属性设为 false。注意,该方法不影响修改某个属性的值。

  Object.freeze:阻止为一个对象添加新属性、删除旧属性、修改属性值。

  同时提供了 3 个对应的辅助检查函数,简单说明如下:

  Object.isExtensible:检查一个对象是否允许添加新的属性。

  Object.isSealed:检查一个对象是否使用了 Object.seal 方法。

  Object.isFrozen:检查一个对象是否使用了 Object.freeze 方法。

  示例

  下面代码分别使用 Object.preventExtensions、Object.seal 和 Object.freeze 函数控制对象的状态,然后再使用 Object.isExtensible、Object.isSealed 和 Object.isFrozen 函数检测对象的状态。

  总结

  这些描述符可以通过 Object.defineProperty() 方法来定义或修改对象的属性特性。通过使用这些描述符,我们可以灵活地控制和定义对象的属性行为,例如限制某些属性只读、隐藏某些不需要枚举的属性等。

  总的来说,对象的属性描述符提供了对对象属性行为进行详细控制和定义的能力,包括可配置性、可枚举性、可写性、获取和设置方法等。这使得我们能够更好地管理和操作对象中的各个属性。

  到此这篇关于JavaScript中对象属性描述符的使用详解的文章就介绍到这了,更多相关JavaScript属性描述符内容请搜索www.bfkq.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值