setter、getter用法解释

最近在学习ES偶然间发现了setter（赋值器）和getter（取值器），初次见面略有懵逼，查遍网络发现大多是讲其用法而其定义解释却不曾提及。。。翻阅MDN文档，发现解释抽象不便理解，只好边查边蒙边码小demo来尝试~

 

首先看MDN上对于set和get的定义：

get：将对象属性绑定到 查询该属性时将被调用的函数。

语法： 

{get prop() { ... } }     

prop：要绑定到给定函数的属性名

 

set：将对象属性绑定到 要调用的函数。

语法：

{set prop(val) { . . . }}

prop：要绑定到给定函数的属性名

  val ：用于保存尝试分配给 prop 的值的变量的一个别名

*   prop称为伪属性，之所以称为伪属性是因为它不像我们定义

 

的其他属性一样定义时给了一个确定的值，所以不能为一个已有

真实值的变量使用 get或者set 也不能为同一个属性设置多个get

或者set

讲道理。。。咱们天朝话的意义太过丰富有时对于一些直白的定义没有英语那般清晰

肯定，对于上面带阴影的两句话我懵了许久，或许是我语文不好，咱天朝话还是牛逼

的~不再说废话。

 

在MDN中对于getter有这样一段描述:

       有时需要允许访问返回动态计算值的属性，或者你可能需要反映内部变量的状

态，而不需要使用显式方法调用。在JavaScript中，可以使用 getter 来实现

于是从这里入手我写了这样几句代码：

var obj1 = {
	a:1,
	b: this.a+1
};
console.log(obj1.b); //NaN

大概的意思就是我创建了一个对象obj1想让b属性为 a属性的值+1 ，结果~毋庸置疑这样是行不通的，输出结果为NaN。

那么想要实现这个想法就用到了 getter 所以：

//get语法将 对象属性 绑定到查询该属性时将被调用的函数。
//使用getter
var objGet = {
	a:1,
	get b(){
	    return this.a+1;
	}
};
 console.log(objGet.b); //2

而上述MDN定义中所说的 查询该属性时被调用的函数 就是

 

(){
		return this.a+1;
	}

我暂时将其理解为一个匿名函数，而伪属性b与其绑定到一起，所以在输出objGet.b

的同时执行了该函数达到了预期的结果。

 

然后来解释setter

同样先引出MDN描述中的一句话：在 javascript 中，如果试着改变一个属性的值，那

么对应的 setter 将被执行。

 

然后就又有了一个清新脱俗的想法：

上面的想法 属性b未直接定义想要获取属性b的值相对于属性a的值的计算即 a+1，我

们用到了getter，若我们已经直接定义了属性b想要让其相对于某个值（下述代码中

ad）计算呢?

然后又写了一个小demo来演示 setter ：

//set语法将 对象属性 绑定到要调用的函数。
//使用setter
var objSet = {
    b:1,
    set ad(a){
        this.b = a+this.b;
    }
};
objSet.ad = 10;
console.log(objSet.b); //11

objSet.ad = 3;
console.log(objSet.b); //14

同样的 ad 为一伪属性，其后为上述所说的 要调用的函数

 

如果我们想要移除 setter或者getter 时可以用delete：

delete objSet.ad

 

如果想将getter添加到现有对象、给已经存在的对象添加setter，可以用

Object.defineProperty()

//将getter添加到现有对象
var objGet = {
	a:1
};
Object.defineProperty(objGet, "b", {get:function(){return this.a+1;}});

//给已经存在的对象添加setter
var objGet = {
	b:1
};
Object.defineProperty(objGet, "ad", {get:function(a){return this.b = a+this.b;}});

 

 

 

var test = {
  f:1
  };
  //get、set调用属性时前面加下划线’_‘，表示属性为私有的，若不加会报错，（十万只草泥马奔腾。。。能讲懂请留言）
  Object.defineProperty(test,'f',{
    //读取属性时调用
    get:function(){
      return this._f;
    },

    //写入属性时调用
    set:function(a){
      this._f = a;
    }
  })
 test.f = 10;                             // 写入属性
console.log('test:',test)                 // test: { f: [Getter/Setter], _f: 10 }
console.log("test.f:",test.f)             // test.f: 10

//————————————————————————————————————————————————————————————————————————————
var test2 = {
    // f:1
  set f2 (a){
    this._f2= a;
  }
}
test2.f2 = 10;                                    // 写入属性
console.log('test2:',test2)                       // test2: { f2: [Setter], _f2: 10 }
console.log("test2.f2:",test2.f2,'因为没有写get')   // test2.f2: undefined 因为没有写get

//————————————————————————————————————————————————————————————————————————————
var test3 = {
    f3:1
}
test3.f3= 10;
console.log('test3:',test3)                   // test3: { f3: 10 }