本文共 3276 字，大约阅读时间需要 10 分钟。

setter：修改器；

set、get的创建

• 三种写法，分别对应不同的情景：

// 第一种写法  创建对象时var obj = {
       _a: 1,  //临时存储，如果不需要预先存储值，不写也行    set a(value) {
    //函数名可任意定，但一般为了方便，命名更人性化了        this._a = value;    },    get a() {
           return this._a;    },    b: 1,    c: function () {
       }}// 第二种  已有的对象var div = document.querySelector("div");// div是个对象Object.defineProperty(div, "bg", {
    // bg属性名    set: function (value) {
           this._bg = value;    },    get: function () {
           if (!this._bg) this._bg = "red";        return this._bg    }});// 第三种  面向对象类中的class Box {
       _num = 1;    constructor() {
       }    set num(value) {
           this._num = value;    }    get num() {
           return this._num;    }}

• 通过上面的描述方法，总结一下：

1. 写法名称：
   set是一个设置含义的函数。定义对象和定义类中，set后面都是跟一个函数名，但是在使用defineProperty给已有对象添加set方法时，不需要知道函数名，因为添加的属性名就是这个函数名；
   get是一个获取含义的函数。定义对象和定义类中，get后面都是跟一个函数名，但是在使用defineProperty给已有对象添加get方法时，不需要知道函数名，因为添加的属性名就是这个函数名。
2. 写法内容：
   set后面的函数中有且仅有一个参数，并且会将传进来的参数存储给当前对象的一个属性（临时属性）；
   get后面的函数中不能有任何参数，并且必须使用return返回在set中存储的那个对象属性。
3. set、get的现实意义：
   刚开始学习对象时，对象有2个部分，第一个是属性，第二个是方法；属性对应的是一个值，方法对应的是一个函数，也就是一个执行步骤。
   比如， obj.a=10; 属性用于存储这个值，获取这个值，不能执行多条语句；obj.a(); 方法 不能存储值，只能执行多条语句。
   但set和get能够实现对象的属性特征和对象的方法特征，可以存储值，也可以执行多条语句。

set、get可以不暴露对象属性信息

var obj = {
       // 不暴露    _a: 1, //做临时存储    _c: 1,    set abc(value) {
    //使用函数调用，可以设置多个参数        value = Number(value);        if (isNaN(value)) value = 1;        if (value < 0) value = 0;        if (value > 3) value = 30;        this._a = value; //this._a    },    get abc() {
           return this._a;    },    c: function (value) {
           value = Number(value);        if (isNaN(value)) value = 1;        if (value < 0) value = 0;        if (value > 4) value = 40;        this._c = value;    }}document.addEventListener("click", clickHandler);function clickHandler(e) {
       // obj.c++; //obj.c是函数c()    // console.log(obj.c); //结果是NaN    obj.c(obj._c + 1);    console.log(obj._c);// obj._c暴露出来了    // 在这个函数中我们不知道有obj._a这个属性，因为这个属性没有被暴露    obj.abc++;    console.log(obj.abc);}

set、get在已有对象属性定义里的使用

小栗子：颜色值的变化。

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 访问器属性

• setter/getter
  如果只写set方法，不写get方法，这个属性是一个只写属性，不可读；
  如果只写get方法，不写set方法，这个属性是一个只读属性，不可写入（如果是ES6严格模式下，则会报错）。

// 非严格模式：var obj = {
           _a: 1,        set a(value) {
               this._a = value;        },        b: 1,        c: function () {
           }    }    obj.a++;    console.log(obj,obj.a);    var obj = {
           _a: 1,        get a() {
               return this._a;        },        b: 1,        c: function () {
           }    }    obj.a = 3;    console.log(obj,obj.a);

有个综合例子涉及到了set、get，可自己看一下：。

转载地址：https://blog.csdn.net/weixin_43297321/article/details/104402591 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！