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

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

巴特西

JavaScript的Object.defineProperty( )方法

最新文章

热门文章