JS:平时添加的都是数据属性

2020-01-12

by @zhangbao(zhangbao) #0112

对象的属性有两种:数据属性和访问器属性。我们通常添加属性的方式,添加的都是数据属性。

// 添加对象属性的通常方式有两种:

// 第一种:声明时添加
let user = {
  name: "John"
}
// 第二张方式:声明后添加
user.age = 12

image.png

何以见得?我们使用 Object.getOwnPropertyDescriptors(obj)方法就能看出来。

image.png

Object.getOwnPropertyDescriptors方法的对象称为“属性描述符”对象。对象中的 value就标记此属性是数据属性value的值就是此数据属性实际存储的值。

默认标记值都为 true

属性描述符对象中的另外三个属性 writableenumerableconfigurable 则称为属性标记(flag)——记录属性更加细粒度的设置配置。从上图可知,通常添加属性的方式,默认这些标记值都是 true,这就是为啥我们这样设置属性后,后面就可以“为所欲为”操作的原因了。

Object.defineProperty

因此可见 user.age = 12 等同于执行了下面的代码:

Object.defineProperty(user, 'age', {
  value: 12,
  writable: true,
  enumerable: true,
  configurable: true
})

我们只有想在更加细粒度的控制某个属性时,才会使用 Object.defineProperty(obj, propertyName, descriptor)方法定义属性。

修改或添加属性

在使用 Object.defineProperty时:如果被定义的属性已存在,则操作结果就是修改对象属性;如果被定义的属性不存在,操作结果就是为对象新增了一个属性。还是以上面的 user为例。

例一:修改属性

修改 age属性的 value值为 123enumerable标记为 false

image.png

可以看见,未指定的标记还是保持跟以前一样的值。

例二:添加属性

添加 desc属性(仅标记 writabletrue

image.png

可以看见,其他未指明的标记默认是 false(即本例中的 enumerable 和 configurable标记)。

(正文完)


广告时间(长期有效)

我有一位好朋友开了一间猫舍,在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个猫奴并且有需要的话,不妨扫一扫她的【闲鱼】二维码。不买也不要紧,看看也行。


上一篇:Angular 记录 - Rxjs 完整处理一个 Http 请求
下一篇:nuxt sentry source-map
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部