Vue中的Object.defineProperty全面理解
目录
- Object.defineProperty理解
- 一、直接添加
- 二、使用getter、setter
- 需要Object.defineProperty()注意点
Object.defineProperty理解
定义:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
一、直接添加
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
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.模拟访问和设置的行为:想要访问器属性模拟默认行为的话,必须的在里面新添一个属性不然会造成循环引用
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不止
person.a → get.call(person) → this.a → person.a → get.call(person) → this.a......
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)