getter与setter

getter是一个获取某个属性值的方法, setter是一个设定某个属性值的方法

描述

• 通过getter与setter可以实现数据取值与赋值的拦截操作, 当想监控某个值当变化的时候, 通过getter与setter即可实现监听, 而不需要找到并修改每一个操作这个值的代码
• 有时需要允许访问返回动态计算值的属性, 或者需要反映内部变量的状态, 而不需要使用显式方法调用, 可以使用getter与setter来实现
• 尽管可以结合使用getter和setter来创建一个伪属性, 但是不能将getter与setter绑定到一个属性并且该属性实际上具有一个值

字面量声明

可以直接通过字面值创建对象时声明get与set方法

let ogj = {
  __x: 1,
  get x() {
    console.log("取值操作");
    return this.__x;
  },
  set x(v) {
    console.log("赋值操作, 例如更新视图");
    this.__x = v;
  }
}
console.log(obj.x);				// 1
obj.x = 11;
console.log(obj.x);				// 11
/* 
  定义__x是以双下划线开头的, 是不希望直接访问的属性
  当然可以直接使用obj._x对属性进行赋值与取值操作, 但这样就失去了get与set的意义
*/

Object.defineProperty

使用Object.defineProperty()精确地添加或修改对象的属性

let obj = {
  __x: 1
}
Object.defineProperty(obj, "x", {
  get: function() {
    console.log("取值操作");
    return this.__x;
  },
  set: function(v) {
    console.log("赋值操作, 例如更新视图");
    this.__x = v;
  }
});
console.log(obj.x);				// 1
obj.x = 11;			
console.log(obj.x);				// 11