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的双向绑定：

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

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

 

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