图解JavaScript对象属性四个特性

205 阅读3分钟

JavaScript中的对象属性除了有属性名和属性值,还包括其它有意义的特性,比如可写性、可枚举性和可配置性,还有settergetter特性,这些特性对开发健壮的库非常有帮助。

图解JavaScript对象属性四个特性

图解JavaScript对象属性四个特性

我在上图中简单模拟了一处疑似重污染工厂的用水与排污系统模型,通过类比可视化帮助我理解JavaScript对象属性的4个特性:

  1. 索取,代表工厂从大自然中索取洁净水源,水表记录了流过水流传感器的用水量。
  2. 写脏,代表工厂使用过的污水排入自然环境中,类似脏数据。
  3. 水表,只要水表正在运行中,相关部门就能了解该工厂的用水情况。
  4. 总控,断电后水表和排污开关皆停止运行。
  5. 排污控制,其开关与否直接影响写脏能否进行。

回到JavaScript中,假设有对象factories,表示全部重污染工厂的集合:

var factories = {}

一家名为sb-1的污染工厂进入相关部门监控范围,于是在factories中加入新属性:

Object.defineProperty(factories, 'sb-1', {
  writable: true,
  enumerable: true,
  configurable: true
})
  1. writable:true在JavaScript中表示可写性,图中表示sb-1工厂的排污开关是打开状态;
  2. enumerable:true在JavaScript中表示可枚举性,图中表示sb-1工厂的水表正常运行中,等着相关部门来查水表;
  3. configurable:true在JavaScript中表示可配置性,图中表示sb-1工厂的总控台是通电运行状态。

除了上面作为例子的1号污染工厂sb-1,还有2号、3号、4号等等都在相关部门监管范围内。相关部门开始查水表,只需遍历factories,如果检测到属性值为"污水"触发警报:

for(let factory in factories){
  console.log(`即将查工厂“${factory}`”的水表) // 即将查工厂“sb-1”的水表
  check(factories[factory]) // 嘟嘟嘟!污水!限期整改!
}

查水表的前提条件是:工厂的水表必须是正在运行中。

sb-1工厂向环境中排放未过滤污水,为了绕过审查,将工厂水表关掉了:

Object.defineProperty(factories, 'sb-1', {
  value: "污水"
  enumerable: false,
})

这样一来,相关部门再次遍历factories中的所有工厂,不在审查工厂sb-1,厂长得意地笑了,小聪明也。

相关部门也不是吃素的,立即采取措施,审查组到污染工厂将排污阀门关闭,整改1个月:

Object.defineProperty(factories, 'sb-1', {
  writable: false
})

这下,sb-1工厂一个月不能再写脏了,厂长有小聪明吖,偷偷把排污阀门又打开了:

Object.defineProperty(factories, 'sb-1', {
  writable: true
})

这一次相关部门被惹怒,没手软,果断出手整治,污染工厂直接歇菜:

Object.defineProperty(factories, 'sb-1', {
  enumerable: false,
  writable: false,
  configurable: false
})

水表关闭;排污阀门关闭。总控台一旦被断电,重污染工厂关门大吉。

相关部门要批量关闭多个污染工厂,会这样做:

Object.defineProperties(factories, {
  'sb-1':{configurable: flase},
  'sb-2':{configurable: flase},
  'sb-3':{configurable: flase}
})

另外,gettersetter也属于属性特性,它们是函数:

Object.defineProperty(factories, 'sb-1', {
  get: function(){
    return '污水'
  },
  set: function(){},
  writable: false,
  configurable: false
})

如果工厂将getter函数的算法设计为:
当水源被检测时返回(排出)"净水",当未被检测时返回(排出)"污水",emmmm???

检测对象属性特性可以使用Object.getOwnPropertyDescriptor(),第一个参数传入对象,第二个参数传入要查询的属性名:

Object.getOwnPropertyDescriptor(factories, "sb-1")

现实世界里,工厂正将污水肆无忌惮地排入河里;
虚拟世界里,喷子和键盘侠们正在网络里捍卫“正义”。