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 });

 

好的，第一篇随笔结束，完结，撒花！