javascript 访问器属性 get set

前言

刚开始学习对象时，我们知道对象有两个部分，第一个是属性，第二个是方法。
属性对应的是一个值，只能存储值、获取值，不能执行多条语句；方法对应的是一个函数，不能存储值，只能执行多条语句。
而 set 和 get 能够实现对象的属性特征和对象的方法特征，可以存储值，也可以执行多条语句。

let obj={};
obj.a=10; //属性  存储这个值，获取这个值，不能执行多条语句
obj.a(); //方法  不能存储值，只能执行多条语句

• set和get能够实现对象的属性特种和对象的方法特征，可以存储值，也可以执行多条语句；
• set、get 是访问器属性；setter、getter 表示访问过程
• 可以用它来隐藏那些不想让外界直接访问的属性。一个对象内，每个变量只能有一个 getter 或 setter。
• 删除 getter 或 setter 的唯一方法是：delete object[name]。delete可以删除一些常见的属性。

get set 的三种形式：

//正在描述的对象
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);

通过上面的描述方法可以看出：

1. 写法名称

• set 是一个设置含义的函数。定义对象和定义类中，set后面都是跟一个函数名。但是使用 Object.defineProperty 在已有对象中添加 set 方法时，不需要知道函数名，因为添加的属性名就是这个函数名。
• get 是一个获取含义的函数，定义对象和定义类中，get后面都是跟一个函数名。但是使用 Object.defineProperty 在已有对象中添加 get 方法时，不需要知道函数名，因为添加的属性名就是这个函数名。

2. 写法内容中

• set 后面的函数中有一个参数，并且仅有一个参数，并且会将传进来的参数存储给当前对象的一个属性（临时属性）。
• get 后面的函数中不能有任何参数，并且必须使用 return 返回在 set 中存储的那个对象属性。

set、get 和普通函数写法的区别

通过下面的案例可以看出，使用set 设置属性的值时，依然会遵循属性的设定条件，而使用普通写法，当直接给属性设置值时，会跳过属性的设定条件。

var obj={
       // _a没有暴露
       _a:1,
       set a(value){
       		//设置a的值在0-10之间
	       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被暴露了
       c:function(value){
       		//设置_c的值在0-10之间
           value=Number(value);
           if(isNaN(value)) value=1;
           if(value<0) value=0;
           if(value>10) value=10;
           this._c=value;
       }
   }

obj.a=10;//只能设置唯一的值
obj.c(100);//使用函数调用，可以设置多个参数

//下面同样的操作，a的值依然在0-10之间，但是_c的值显然已经>10了
obj.a++;
//obj.a++等同于obj.a=obj.a+1，会先调用get a(),再调用set a()
console.log(obj.a);//10
obj._c++;
console.log(obj._c);//11

案例1：给div设置背景颜色

var div = document.querySelector("div");

Object.defineProperty(div, "bg", {
    set: function (value) {
        this.style.backgroundColor=value;
        this._bg = value;
    },
    get: function () {
    	//设置默认值为red
        if (!this._bg) this._bg = "red";
        return this._bg
    }
});

div.bg="blue";
console.log(div.bg);//blue

案例2：点击改变div的背景颜色

var div = document.querySelector("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.style.backgroundColor=this.bgList[value];
            this._bg=value;
        },
        get:function(){
            if(!this._bg) this._bg=0;
            return this._bg;
        }
    }
});
div.bg=0;
div.addEventListener("click",clickHandler);
function clickHandler(e){
    div.bg++;
}

• 如果只写 set 方法，不写get方法，这个属性是一个只写属性，不可读；
• 如果只写 get 方法，不写set方法，这个属性是一个只读属性，不可写入；
• 在严格模式下，只写set ，会打印 undefined；只写get，会报错；