javascript访问器属性 get,set的操作

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

属性对应的是一个值，只能存储值、获取值，不能执行多条语句；
方法对应的是一个函数，不能存储值，只能执行多条语句。
而 set 和 get 能够实现对象的属性特征和对象的方法特征，可以存储值，也可以执行多条语句。

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);

实例演示

给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

点击改变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，会报错；

get set 的三种形式：

实例演示

给div设置背景颜色

点击改变div的背景颜色

更多相关文章

随机推荐