JavaScript的Object.defineProperty( )方法

Object.defineProperty方法可以在一个对象上定义一个新的属性,或者修改该对象原有的属性,并返回该对象。

基础的语法格式如下:

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

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

1 <input type="text" id="text" placeholder="请输入你的名字" />
2 <p id="textshow"></p>
 1 var obj = {}
 2 Object.defineProperty(obj,'name',{
 3       set(val){
 4       $('#text').val(val);//设置或返回表单字段的值
 5       $('#textshow').text(val);//设置或返回元素的文本内容
 6        },
 7       get(){}
 8 })
 9 $('#text').keyup(function(event){
10     obj.name = event.target.value;
11 })
12 console.log(obj)

实现效果如图所示:

![]()

当在控制台设置属性的值,dom页面也会做出改变

实现效果如图所示:

![]()

当对象需要设置多个属性时,可以使用Object.defineProperties

语法格式为:

 1 var obj = {};
 2 Object.defineProperties(obj, {
 3   'property1': {
 4     value: true,
 5     writable: true
 6   },
 7   'property2': {
 8     value: 'Hello',
 9     writable: false
10   }
11   // etc. etc.
12 });

好的,第一篇随笔结束,完结,撒花!

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。