setter 修改器属性 getter 访问器属性
setter 修改器属性
getter 访问器属性
// 在新建的对象中添加seter和getter 写法
var obj = {
_num: 1,
设置属性 像函数，有且仅有一个参数，不能有返回值
set num(value) {
this._num = value
},
访问属性
get num() {
return this._num
}
}
/*
1.属性 值 存储和获取值
2.方法 函数 可以执行多条语句，不能用来赋值和获取值
setter 修改器属性, getter 访问器属性 优点 既具备属性的存储设置值，获取值的特征，
可以执行多条语句
在对象中如果只有一个set，没有get，这种叫做只写，不能读取
在对象中如果只有一个get，没有set，这种叫做只读，不能设置
*/
例子
div 是小方块，这个案例是让小方块移动移动
var div=document.querySelector("div");
Object.defineProperties(div,{
_x:{
writable:true,//值可以被修改
value:0
},
_y:{
writable:true,
value:0
},
x:{
// set 与get缺一，案例就动不起来
//没了set div.x打印是0
set(value){
this.style.left=value+"px"
this._x=value
},
//没了get , div.x打印是undefind
get(){
return this._x
}
},
y:{
set(value){
this.style.top=value+"px"
this._y=value
},
get(){
return this._y
}
}
})
setInterval(function(){
div.x++
div.y++
},16)
例子2
var div=document.querySelector("div");
// 只能在已有的对象上添加setter和getter 已有对象就是指的获取div标签
Object.defineProperty(div,"w",{
configurable:true,
enumerable:true,
// 当给w属性赋值时，就会执行set方法，并且把值传给value
// set方法有且仅有一个参数，就是赋值的结果
set(value){
console.log("设置")
if(!/px/.test(String(value))) value+="px"
// 返回一个数组 里面是去掉px的数字 并把值赋给this.w
this._w=Number(value.slice(0,-2));
//改变元素宽度
this.style.width=value;
},
// 当获取w属性时，就会调用这个get方法，并且返回结果，所以get必须要有个return的结果
get(){
console.log("获取")
return this._w;
}
})
对象初始值
div.w="300px";
setInterval(function(){
div.w++;
},16);
