JavaScript 对象的扩展defineProperty()和defineProperties()

1、Object.defineProperty()和Object.defineProperties()这两个方法的解释:

Object.defineProperty()
功能:
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。如果不指定configurable, writable, enumerable ,则这些属性默认值为false,如果不指定value, get, set,则这些属性默认值为undefined

语法: Object.defineProperty(obj, prop, descriptor)
obj: 需要被操作的目标对象
prop: 目标对象需要定义或修改的属性的名称
descriptor: 将被定义或修改的属性的描述符

Object.defineProperty(obj, 'name', {
    configurable: false,
    writable: true,
    enumerable: true,
    value: '青衣浏阳'、、
})

数据(数据描述符)属性
数据属性有4个描述内部属性的特性

Configurable
表示能否通过delete删除此属性,能否修改属性的特性,或能否修改把属性修改为访问器属性,如果直接使用字面量定义对象,默认值true

Enumerable
表示该属性是否可枚举,即是否通过for-in循环或Object.keys()返回属性,如果直接使用字面量定义对象,默认值为true

Writable
能否修改属性的值,如果直接使用字面量定义对象,默认值为true

Value
该属性对应的值,默认为undefined。

Object.defineProperties()
功能:
方法直接在一个对象上定义一个或多个新的属性或修改现有属性,并返回该对象。
语法: Object.defineProperties(obj, props)
obj: 将要被添加属性或修改属性的对象
props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

可以做一个简易的数据双向绑定,我们添加一个新属性 并且让这个新属性关联name属性和lastName属性 还有age属性等

var user={
        name:'青衣',
        lastName:'浏阳',
        age:'20'
     }
Object.defineProperties(user,{
          desc:{
              //获取对象属性的值调用 user.desc
              get:function () {
                      return this.name+'-'+this.lastName+' '+this.age
              },
              //设置对象属性的值的时候调用 user.desc='****'
              set:function(data){
                  //这个输入的内容是可以获取到的 可以输出一看一下
                    console.log(data);
                  //这里做一个数据处理根据他输入的值 修改对象上其他的属性

                    var arr=data.split('-');
                    if(arr.length<3){
                      //制定一个规则方便我们取数据
                      alert("请输入‘姓氏-名-年龄’格式")
                }
                    this.name=arr[0];
                    this.lastName=arr[1];
                    this.age=arr[2];
            }
        }
    });

在控制台中输入 user 查看对象user

user
{name: "青衣", lastName: "浏阳", age: "20"}

user.desc
"青衣-浏阳 20"

user.desc='树叶-上的小蚂蚁-25'
"树叶-上的小蚂蚁-25"

user
{name: "树叶", lastName: "上的小蚂蚁", age: "25"}

还可以简写成:


var user={
        name:'青衣',
        lastName:'浏阳',
        age:'20',
          //获取对象属性的值调用
          get desc(){
                return this.name+'-'+this.lastName+' '+this.age
        },
          //设置对象属性的值的时候调用
          set desc(data){
                var arr=data.split('-');
                if(arr.length<3){
                      alert("请输入‘姓氏-名-年龄’格式")
                }
                this.name=arr[0];
                this.lastName=arr[1];
                this.age=arr[2];
        }
    };

除此之外还有两个

Object.getOwnPropertyDescriptor()
功能:
该方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

语法: Object.getOwnPropertyDescriptor(obj, prop)

Object. getOwnPropertyDescriptors()
功能:
所指定对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

语法: Object.getOwnPropertyDescriptors(obj)

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值