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 });
好的,第一篇随笔结束,完结,撒花!
赞 (0)