JavaScript的Object.defineProperty( )方法

Object.defineProperty方法可以在一个对象上定义一个新的属性,或者修改该对象原有的属性,并返回该对象。基础的语法格式如下:

var data = {}//定义一个对象
Object.defineProperty(data,'name',{
    configurable:false,//设置对象的属性是否可以被修改/删除(默认为false)
    enumerable:false,//设置对象的该属性是否可以枚举(默认为false)
    value:111,//设置对象该属性的值(数值,对象,函数等)默认为undefined
    writable:false,//设置对象该属性的值是否可以修改(默认为false)
    //get函数,函数的返回值被用作属性的值
    //set函数,属性值被修改时,调用此函数。
        
        
      })

可以利用该属性,实现vue的双向绑定:
html部分:

<input type="text" id="text" placeholder="请输入你的名字" />
<p id="textshow"></p>

js部分:

var obj = {}
Object.defineProperty(obj,'name',{
      set(val){
      $('#text').val(val);//设置或返回表单字段的值
      $('#textshow').text(val);//设置或返回元素的文本内容
       },
      get(){}
})
$('#text').keyup(function(event){
    obj.name = event.target.value;
})
console.log(obj)

实现效果如图
在这里插入图片描述
当在控制台设置属性的值,dom页面也会做出改变

实现效果如图所示
在这里插入图片描述
当对象需要设置多个属性时,可以使用Object.defineProperties

语法格式为:

var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
  // etc. etc.
});

好嘞,结束,今天又是涨知识的一天!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值