Object.defineProperty方法

vue.js的双向数据绑定就是通过Object.defineProperty方法实现的，俗称属性拦截器

Object.defineProperty() 
方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象

1 // 语法:
2 /*
3  * @param: obj:需要定义属性的对象; 
4  *         prop:需要定义或修改的属性；
5  *         descriptor:将被定义或修改属性的描述符
6 */
7 Object.defineProperty(obj,prop,descriptor)

对象里目前存在的属性描述符主要有两种形式： 数据描述符和存取描述符.

数据描述符： 拥有可写或不可写值的属性* 

可选键值： 
configurable: 当且仅当configurable为true时，改属性描述符才能够被改变，也能被删除 
enumerable: 当其值为true时，该属性才能够出现在对象的枚举属性中，默认为false 
writable: 当且仅当该属性的值为true时，该属性才能被赋值运算符改变， 默认为false。 
value： 该属性对应的值，可以是任意有效的javascript的值（数值，对象，函数等），默认为undefined

 

存取描述符： 由一对getter-setter函数功能来描述的属性*

 

可选键值： 
configurable: 当且仅当configurable为true时，改属性描述符才能够被改变，也能被删除 
enumerable: 当其值为true时，该属性才能够出现在对象的枚举属性中，默认为false 
get: 给属性提供getter的方法，如果没有 getter 则为undefined。当我们读取某个属性的时候，其实是在对象内部调用了该 方法，此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined 
set：设置属性值的方法， 如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。也就是说，当我们设置某个属性的时候，实际上是在对象的内部调用了该方法

note：两者不能同时定义， 否则报错==

实例：

 1 var a = {};
 2 Object.defineProperty(a, 'b', {
 3     set: function(newValue) {
 4         console.log('赋值操作, 赋值' + newValue);
 5     },
 6     get: function() {
 7         console.log('取值操作');
 8         return 2;
 9     }
10 });
11 a.b = 1;    // 赋值操作，赋值1
12 a.b;       // 取值操作2

Object对象有一个freeze的方法，用于实现对象属性和方法的不可更改

1 // 使用方法：
2 const arr = [1,2,3,4];
3 Object.freeze(arr);  // 变量arr不可更改
4 arr.push(5);  // 报错：不能添加属性

Object.definePropperty也可以实现规定变量的不可更改

1 const obj = { key: 'chris', vlaue: 'person' };
2 Object.defineProperty(obj, 'key', {
3     configurable: false,   // 不可删除
4     writable: false, // 不可写
5 });

 

转载于:https://www.cnblogs.com/jsonYoung/p/9625847.html