前言
- 刚开始学习对象时，对象有2个部分，第一个是属性，第二个是方法
- 属性对应的是一个值，方法对应的是一个函数，也就是一个执行步骤
- set和get能够实现对象的属性特种和对象的方法特征，可以存储值，也可以执行多条语句
set get 访问器属性,也叫setter/getter
如果只写set方法，不写get方法，这个属性是一个只写属性，不可读
如果只写get方法，不写set方法，这个属性是一个只读属性，不可写入
var obj={};
obj.a=10; //属性 存储这个值，获取这个值，不能执行多条语句
obj.a();// 方法 不能存储值，只能执行多条语句
一-----set和get的描述方法:
1、写法名称
set是一个设置含义的函数。定义对象和定义类中，set后面都是跟一个函数名，
但是使用defineProperty在已有对象中添加set方法时，不需要知道函数名，因为添加的属性名就是这个函数名
get是一个获取含义的函数，定义对象和定义类中，get后面都是跟一个函数名
但是使用defineProperty在已有对象中添加get方法时，不需要知道函数名，因为添加的属性名就是这个函数名
2、写法内容中
set后面的函数中有一个参数，并且仅有一个参数，并且会将传进来的参数存储给当前对象的一个属性（临时属性）
get后面的函数中不能有任何参数，并且必须使用return返回在set中存储的那个对象属性
3、set get有以下三种形式：
//正在描述的对象
var obj={
set a(value){
this._a=value;
},
get a(){
return this._a;
}
}
obj.a=3;
console.log(obj);
//给已有的对象设置值
let div=document.querySelector("div");
Object.defineProperty(div,"bg",{
configurable:true,
enumerable:true,
set:function(value){
this._bg=value;
},
get:function(){
return this._bg;
}
})
div.bg="red";
console.dir(div);
//面向对象ES6中的类
class Box{
consturctor(){
}
set num(value){
this._num=value;
}
get num(){
return this._num;
}
}
Box.num=5;
console.dir(Box);
二--------set和get的使用
1使用set时,只能设置唯一的值,当把100赋值给a属性时,就会执行set a()函数,然后把value存储到this._a中
var obj={
_a:1,
set a(value){
value=Number(value);
if(isNaN(value)) value=1;
if(value<0) value=0;
if(value>10) value=10;
console.log(value); //10
this._a=value;
},
get a(){
return this._a;
},
b:1,
c:function(value,value1){
this._c=value
}
}
obj.a=100//使用set时是要用等号赋值的,只能设置唯一的值
//当把100赋值给a属性时,就会执行set a()函数,然后把value存储到this._a中
this.c(100)//使用函数调用，可以设置多个参数
使用get时
var obj={
_a:1,
set a(value){
value=Number(value);
if(isNaN(value)) value=1;
if(value<0) value=0;
if(value>10) value=10;
this._a=value;
},
get a(){
console.log('aaa')
return this._a;
},
b:1,
c:function(value,value1){
this._c=value
}
}
console.log(obj.a) //打印'aaa'和1 触发get a() 返回this._a,这里有默认值1,所以打印1
var sum=obj.a+1; //打印'aaa' 因为触发了get a()
obj.a++;//相当于obj.a=obj.a+1 先执行右边的obj.a调用get 打印'aaa',然后执行等号赋值obj.a=2
console.log(obj.a)//执行obj.a调用get,打印'aaa'和2
//所以打印 'aaa' 'aaa' 2
三--------set get和普通函数的区别
var obj={
// 不暴露
_a:1,
set a(value){
value=Number(value);
if(isNaN(value)) value=1;
if(value<0) value=0;
if(value>10) value=10;
this._a=value;
},
get a(){
return this._a;
},
_c:1,
c:function(value){
value=Number(value);
if(isNaN(value)) value=1;
if(value<0) value=0;
if(value>10) value=10;
this._c=value;
}
}
//使用set 和get
document.addEventListener("click",clickHandler);
function clickHandler(e){
// 在这个函数中我们不知道有obj._a这个属性，因为这个属性没有被暴露
obj.a++;//相当于obj.a=obj.a+1
console.log(obj.a);//2,3,4,5,6,7,8,9,10,10,10,10......加到10之后就不会再变化
//先执行一次get 再执行set,然后再执行get
}
//使用普通函数
document.addEventListener("click",clickHandler);
function clickHandler(e){
// obj._c暴露出来了
// obj.c(obj._c+1);
obj._c=100;//当使用值超过限制,会直接打印,所以不受控制
console.log(obj._c);////获取一直操作的存储属性
}
四—set get注意点
如果只写set方法，不写get方法，这个属性是一个只写属性，不可读
var obj={
_a:1,
set a(value){
this._a=value;
},
b:1,
c:function(){
}
}
obj.a++;//相当于obj.a=obj.a+1 没有get方法,获取的obj.a是undefined
console.log(obj.a);//undefined 因为没有get方法,无法读取
如果只写get方法，不写set方法，这个属性是一个只读属性，不可写入
在严格模式下，只写set ，会打印 undefined；只写get，会报错；
var obj={
_a:1,
get a(){
return this._a;
},
b:1,
c:function(){
}
}
obj.a=3;//如果开启严格模式就会报错
console.log(obj.a);//1 3没有被写入
案例1:给div设置背景颜色
var div = document.querySelector("div");
Object.defineProperty(div, "bg", {
set: function (value) {
this.style.backgroundColor=value;
this._bg = value;
},
get: function () {
if (!this._bg) this._bg = "red";
return this._bg
}
});
div.bg="red";
console.log(div.bg);//red
案例2：点击改变div的背景颜色
Object.defineProperties(div,{
bgList:{
// 描述对象
configurable:true,
// 该属性的值
value:["#FF0000","#00FF00","#0000FF","#FFFF00","#00FFFF","#FF00FF"]
},
bg:{
set:function(value){
if(value<0) value=this.bgList.length-1;
if(value>this.bgList.length-1) value=0;//this.bgList是该属性的值,表示数组
this.style.backgroundColor=this.bgList[value];
this._bg=value;
},
get:function(){
if(!this._bg) this._bg=0;//刚开始设置this._bg
return this._bg;
}
}
});
div.bg=0;
div.addEventListener("click",clickHandler);
function clickHandler(e){
div.bg++;
}