dojo 定义的类上的 JavaScript getter 和 setter 无法按预期工作

Question

我在dojo中定义了一个“类”，其属性foo定义了JavaScript getter 和 setter。

在下面的代码中，setter 从未被调用，而 getter 被调用了两次。

我想知道:

• 为什么这种情况只发生在定义 dojo“类”时？
• 如何解决？

我知道 dojo 自定义 getter 和 setter，但我有兴趣了解为什么在这个“类”中不起作用。

现场演示: https://jsfiddle.net/yz8ft4eh/

require(["dojo/_base/declare"], function(declare) {
  var Person = declare(null, {
    _foo: null,
    get foo() {
      console.log('getter foo ' + this._foo);
      return this._foo;
    },
    set foo(value) {
      console.log('setter foo ' + value);
      this._foo = value;
    },
    constructor: function(name) {
      this.name = name;
      this.foo = 1000;
    }
  });
  var folk = new Person("phiggins");
  folk.foo = 2000;
});

Answer 1

问题是 Dojo 不知道您那里有一个 getter/setter 属性。重要的是要记住，很多 Dojo 是很久以前编写的，甚至在 2009 年 ES5 规范发布之前。虽然项目处于事件状态，但一天中的时间有限，他们可能没有时间回去为各地的新事物提供支持。 (也就是说，令我惊讶的是，在 getter/setter 属性被添加到 JavaScript 七年后，这个问题在 2016 年仍然存在。)

我无法在线找到 v1.10.4 的未压缩源代码(你的 fiddle 中的那个)，但我可以找到 1.10.6 ，它使用一个简单的 for-in 循环来复制您的属性。我们可以看到 declare 调用 safeMixin，它执行以下操作:

for (name in source) {
    t = source[name];
    if ((t !== op[name] || !(name in op)) && name != cname) {
        if (opts.call(t) == "[object Function]") {
            // non-trivial function method => attach its name
            t.nom = name;
        }
        target[name] = t;
    }
}

要支持使用 getter/setter 属性，必须使用 Object.getOwnPropertyDescriptor或类似的地方。因此，它不是正确复制您的属性，而是只是读取它的值。

您可以通过在构造函数中初始化属性来解决这个问题:

require(["dojo/_base/declare"], function(declare) {
  function getFoo() {
    console.log('getter foo ' + this._foo);
    return this._foo;
  }
  function setFoo(value) {
    console.log('setter foo ' + value);
    this._foo = value;
  }
  var Person = declare(null, {
    _foo: null,
    constructor: function(name) {
      Object.defineProperty(this, "foo", {
        get: getFoo,
        set: setFoo
      });
      this.name = name;
      this.foo = 1000;
    }
  });
  var folk = new Person("phiggins");
  folk.foo = 2000;
});

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>