对象的getter与setter __veblen
在ES5以前,读/写对象的属性时,产生的结果就是返回了对象属性的值/设置了对象属性的值。 在ES5之后,对于用get/set方法定义的属性来说,对它进行读/写属性时,其结果却是可以由开发者来自定义的。即给了开发者自己去定义“读/写对象的属性”这个两种操作的具体行为的权利,使得灵活性大大提高。
例如:
var obj={
_name:"veb",
get name(){
console.log("你获取了name的值");
return this._name;
},
set name(a){
console.log("你设置了name的值为"+x);
return this._name=x;
},
}
console.log(obj.name)//你获取了name的值
obj.name="len"//你设置了name的值为len
聪明的你马上就能想到vue的双向绑定,这是为师对你的信任!
对于get和set不过是一个es5提供的语法糖而已,为什么这么说?
一个对象,如果在你修改或获取属性值之前想做一些事情该怎么办呢?
var o = (function(){
var age = 0;
return {
get_age:function(){
console.log("你想知道我的年龄?已经给你return出去了")
return age;
},
set_age:function(v){
console.log("你要设置我的年龄为"+v)
age=v;
}
}
})();
o.get_age();//你想知道我的年龄?已经给你return出去了
o.set_age(12);//你要设置我的年龄为12
console.log(o.get_age());//你想知道我的年龄?已经给你return出去了 12
现在明白了吧?vue的数据检测就是使用的es5 的get&set
不同于angular脏查询机制,那么如何批量检测呢?
Object.defineProperty(obj,key,valueObj)
其中obj代表要在哪个对象上设置属性,key为属性名,valueObj为值对象配置,相关可以参考es5数组及对象处理方法
基础用法
var obj={};
Object.defineProperty(obj,'age', {
value: 18,
writable: true,
enumerable: true,
configurable: true
});
console.log(obj.age)//18;
//或者同时定义多个属性:
Object.defineProperties(obj, {
'age': {
value: 24,
writable: true,
enumerable: true,
configurable: true
},
'sex': {
value: '男',
writable: false,
enumerable: false,
configurable: false
}
});
定义get&set
var obj={
_name:"veb"
};
Object.defineProperty(this,"name", {
get: function() {
console.log("你获取了name的值");
return this._name;
},
set: function(y) {
console.log("你设置了的值")
return this_=y;
},
});
注意:key和要监测的属性名不能为同一个,不然同时使用get&set会出现死循环!
批量监测:
function fun(obj){
var obj2={};
for(var i in obj){
this["_"+i]=obj[i];
}
console.log(this);
var self=this;
for(var x in this){
(function(x){
Object.defineProperty(self,x.replace("_",""), {
get: function() {
console.log("你获取了"+x+"的值")
return self[x]
},
enumerable: true,
configurable: true,
set: function(y) {
console.log("你设置了"+x+"的值")
return self[x]=y;
},
});
})(x)
}
}
var person=new fun({
name:"veb",
age:"20"
})
console.log(person.name)//你获取了name的值 veb
person.age=50//你设置了age的值
加油!