网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

Object.defineProperty方法 与 数据代理

const person = { name: 'Lydia' }

Object.defineProperty(person, 'age', {
  value: 21,
})

console.log(person)
console.log(Object.keys(person))

输出结果

原因:

defineProperty方法提供给我们(getter)给对象添加一个新属性,或者通过(setter)修改已经存在的属性,当然上面的例子只涉及到最简单的修改。

创新互联专注于企业成都营销网站建设、网站重做改版、吉阳网站定制设计、自适应品牌网站建设、H5网站设计成都商城网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为吉阳等各大城市提供网站开发制作服务。

const person = { name: 'Lydia' }
let number=21;
Object.defineProperty(person, 'age', {
//   value:21,
  enumerable:true, //控制属性是否可以枚举,默认值是false
  // writable:true, //控制属性是否可以被修改,默认值是false
  // configurable:true //控制属性是否可以被删除,默认值是false

  //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
  get() {
    console.log('有人读取age属性了')
    return number
  },

  //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
  set(value) {
    number = value
  },
});

age属性会自动帮我们转为setter/getter,等我们真正需要或者修改,则会显示出对应的age属性

而在使用了该方法给对象添加一个属性后,属性便默认为 不可枚举 not enumerable

因此Object.keys方法仅返回对象中 可枚举 enumerable的属性,即代码中的name

添加属性改变Object.defineProperty方法的默认行为

之所以有以下的写法,也是为我们相比于添加到对象中的属性有更多控制权

Object.defineProperty(person, 'age', {
  value:21,
  // enumerable:true, //控制属性是否可以枚举,默认值是false
  // writable:true, //控制属性是否可以被修改,默认值是false
  // configurable:true //控制属性是否可以被删除,默认值是false
})

数据代理

定义:
通过一个对象代理对另一个对象中属性的读或写操作,而我们可以通过Object.defineProperty方法实现

//创建对象1
let obj = { x: 100 }
//创建对象2
let obj2 = { y: 200 }
//我希望可以令对象2代理对象1,并进行相应的操作
Object.defineProperty(obj2, 'x', {
  get() {
    return obj.x
  },
  set(value) {
    obj.x = value
  },
})

可以看到确实能实现(注意要在开发者模式的控制台下操作)


当前文章:Object.defineProperty方法 与 数据代理
文章位置:http://bjjierui.cn/article/dsojjjj.html

其他资讯