ES6：如何为对象及其属性设置 getter/setter

Question

使用 JS getter 和 setter，我的目标是创建以下 API 案例：

// the user should be able to write this to update thing

thing = {
   x: 1,
   y: 2
}

// OR they should be able to write this

thing.x = 1
thing.y = 2

现在我正在使用这样的代码：

 get thing() {
   return {
     x: this._thing.x,
     y: this._thing.y
   };
 }

 set thing(value) {
   this._thing.x = value.x,
   this._thing.y = value.y
 }

这支持第一种情况，但不支持第二种情况。

这可以通过任何相当简单的方式完成吗？

编辑：我将输入一个示例，但一个用例可能是 thing.x 和 thing.y 应该始终使用 Math.round() 舍入为整数。

Answer 1

如果您必须使用 getter 和 setter，一个相对简单的解决方案是将 x 和 y 定义为 getter 和 setter。

get thing() {
  var self = this;
  return {
    get x() {
      return self._thing.x;
    }
    set x(value) {
      self._thing.x = value;
    }
    // same for y
  };
}

但您必须注意，每次访问thing 以进行读取，都会创建一个新对象。尽管您可以通过缓存该对象并重用它来避免这种情况。

事实上，我可能根本不会有_thing。我只需存储_x 和_y 并按需生成一个对象：

class Foo {
  get thing() {
    if (this._thing) {
      return this._thing;
    }

    var self = this;
    return this._thing = {
      get x() {
        return self._x;
      }

      set x(value) {
        self._x = value;
      }
    };
  }

  set thing(value) {
    this._x = value.x;
    this._y = value.y;
  }
}

Answer 2

...一个用例可能是thing.x 和thing.y 应该始终使用Math.round() 舍入为整数。

考虑使用Proxy

class Parent {
  constructor() {
    this.thing = {x: 15.6, y: 2.1};
  }

  set thing(value) {
    this._thing = new Proxy(value, {
      get: function(target, property, receiver) {
        // Catch all get access to properties on the object
        if (['x', 'y'].includes(property)) {
          // for x and y, return the real value, rounded
          return Math.round(target[property]);
        }
      }
    });
  }
  
  get thing() {
    return this._thing;
  }
}

var parent = new Parent();

console.log(parent.thing.x); // 16

parent.thing.x = 13.2;

console.log(parent.thing.x); // 13

parent.thing = {x: 10.1, y: 5.4};

console.log(parent.thing.y); // 5

// This works for the Jacque Goupil's conundrum
var anotherRef = parent.thing;
anotherRef.x = 5.8;
console.log(parent.thing.x); // 6

// In fact, if you wanted to dance with the devil...
var plainObj = {x: 10.1, y: 5.4};
parent.thing = plainObj;
plainObj.x = 7.2;
console.log(parent.thing.x); // 7
parent.thing.x = 22.2;
console.log(plainObj.x); // 22.2

代理允许您捕获对属性的获取或设置操作。

警告： IE 目前不支持代理。如果我有Google's Proxy polyfill 的 CDN，我会将其添加到 sn-p，但我没有。另外，如果你使用Babel，还有babel-plugin-proxy

Answer 3

我认为你不应该使用这种模式，而且我认为你很难让它发挥作用。考虑以下情况：

// calls the position setter on foo
foo.position = {x: 10, y: 20};

// calls the position getter on foo, obtaining a simple {x:10,y:20} object
var pos = foo.position;

// calls the position getter on foo and then the x getter on position
var xx = foo.position.x;

到目前为止，一切都说得通。然后我们就遇到了这种情况：

// calls the position getter on foo and then the x setter on position
foo.position.x = 7;

由于我们返回了一个带有位置 getter 的简单地图，因此 position.x 只是分配给返回的副本，而不修改 foo 的实际位置。解决此问题的一种方法是让位置 getter 返回一个更智能的对象，该对象具有对 foo 实例和正确 getter/setter 的引用。这将允许这样做：

foo.position = bar.position;
bar.x += 10;

bar.position getter 将返回一个对象，该对象仅充当bar 的 x/y 属性的视图。然后，foo.position 设置器会将bar 的 x/y 属性复制到其私有存储中。说得通。 bar.x += 10 仅向 bar 的位置投放广告。

但是，下面的情况会很混乱：

var temp = foo.position;
foo.position = bar.position;
bar.position = temp;

这造成了 temp 是 foo.position 的备份副本的错觉，但事实并非如此。这是一个视图。一旦 foo 的位置发生变化，我们就会永久丢失数据。没有简单的方法可以复制位置。

您可以尝试让您的 position 对象实际存储数据的副本以及对原始数据的引用，这样您就可以同时进行设置和获取...这是一个无穷无尽的问题。

但在这一点上，你的糖语法使一切变得更难维护，效率也大大降低。

因此，我实际上不是做所有这些，而是​​让 x 和 y getter/setter 位于 foo/bar 对象本身上。我还会让 foo/bar 对象中的任何代码将位置视为不可变的。