Vue中的Object.defineProperty全面理解

这篇文章主要介绍了Vue中的Object.defineProperty全面理解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Object.defineProperty理解

定义：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

1 2 3 4 5 6 7 8 9 10 11 12

let person = {     name:'张三',     sex:'男', } Object.defineProperty(person,'age',{     value:18,     enumerable:true,//控制属性是否可以枚举，默认值是false，当该属性的值为 true 时，该属性才会出现在对象的枚举属性中。     writable:true,//控制属性是否可以被修改，默认值是false，当该属性的值为 true 时，才能被赋值运算符改变。     configurable:true,//控制属性是否可以被删除，默认值是false，当该属性的值为 true 时，该属性能从对应的对象上被删除。                  }) console.log(person);

使用getter、setter 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

let age_number = 18; let person = {     name:'张三',     sex:'男', } Object.defineProperty(person,'age',{     //value:18,     //enumerable:true,//控制属性是否可以枚举，默认值是false，当该属性的值为 true 时，该属性才会出现在对象的枚举属性中。     //writable:true,//控制属性是否可以被修改，默认值是false，当该属性的值为 true 时，才能被赋值运算符改变。     //configurable:true,//控制属性是否可以被删除，默认值是false，当该属性的值为 true 时，该属性能从对应的对象上被删除。       get(){         console.log("读取age属性");         return age_number;     },     set(value)     {         console.log("修改age的值");         age_number = value;     }               }) console.log(person);

需要Object.defineProperty()注意点

1.用Object.defineProperty方法创建一个新属性时，如果不指定configurabel，enumberable，writable特性的默认值都是false，修改已定义的属性特性无限制。

2.Configurable性定义为不可配置就不能把它变回可配置，此时调用Object.defineProperty修改除writable之外的特性都会报错。

3.模拟访问和设置的行为：想要访问器属性模拟默认行为的话，必须的在里面新添一个属性不然会造成循环引用

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var obj={ a:1 };    Object.defineProperty(obj,"a",{ get:function(){ return this.a; },    set:function(val){ this.a=val } }); obj.a;// Maximum call stack size exceeded

会造成循环引用，狂call不止

1	person.a → get.call(person) → this.a → person.a  → get.call(person) → this.a......

以上为个人经验，希望能给大家一个参考