在类字段属性上定义的 getter/setter 中使用“this”。如何在子属性上定义类字段 getter/setter？

Question

所讨论的问题与人类可读性和数据组织有关。我想将 getter 和 setter 指定为类字段属性的子级，但是我无法获取

this

来引用类原型数据。我认为这与在类构造函数中使用

self

解决的问题相同，但应用于类字段。对于类字段是否有类似的解决方案，可以将这些定义保留在构造函数之外？

这就是我想要实现的格式。不会调用构造函数，因为这些字段定义不需要外部数据。这会引发递归错误。

class data_controller {
  // class fields
  id = 12;
  a = 10;
  b = 20;
  // log data entries
  log = {
    entry: {
      get a() {
        return {
          id: this.id,
          value: this.a,
          label: 'a',
        };
      },
      get b() {
        return {
          id: this.id,
          value: this.b,
          label: 'b',
        };
      },
    },
  };
  // update data
  update = {
    set a(value) {
      this.a = value;
    },
    set b(value) {
      this.b = value;
    },
  };
}
// class usage
const data = new data_controller();
console.log(data.log.entry.a);
console.log(data.log.entry.b);
data.update.a = 50;
data.update.b = 60;
console.log(data.log.entry.a);
console.log(data.log.entry.b);

这是使用“self”和构造函数的格式。我想让构造函数不受这些定义的影响。

class data_controller {
  // class fields
  id = 12;
  a = 10;
  b = 20;
  log = {};
  update = {};
  constructor() {
    self = this;
    // log data entries
    this.log.entry = {
      get a() {
        return {
          id: self.id,
          value: self.a,
          label: 'a',
        };
      },
      get b() {
        return {
          id: self.id,
          value: self.b,
          label: 'b',
        };
      },
    };
    // update data
    this.update = {
      set a(value) {
        self.a = value;
      },
      set b(value) {
        self.b = value;
      },
    };
  }
}
// class usage
const data = new data_controller();
console.log(data.log.entry.a);
console.log(data.log.entry.b);
data.update.a = 50;
data.update.b = 60;
console.log(data.log.entry.a);
console.log(data.log.entry.b);

这是一种使构造函数不受定义但不实现 getter/setter 类用法的格式。

class data_controller {
  // class fields
  id = 12;
  a = 10;
  b = 20;
  // log data entries
  log = {
    entry: {
      a: () => {
        return {
          id: this.id,
          value: this.a,
          label: 'a',
        };
      },
      b: () => {
        return {
          id: this.id,
          value: this.b,
          label: 'b',
        };
      },
    },
  };
  // update data
  update = {
    a: (value) => {
      this.a = value;
    },
    b: (value) => {
      this.b = value;
    },
  };
}
// class usage
const data = new data_controller();
console.log(data.log.entry.a());
console.log(data.log.entry.b());
data.update.a(50);
data.update.b(60);
console.log(data.log.entry.a());
console.log(data.log.entry.b());

我相信我也可以通过使班级现场组织扁平化来解决这个问题，但我想保持多层次的结构。

Answer 1

您可以在嵌套对象中添加对包含对象的引用。它是下面代码中的

parent

。然后你可以使用

this.parent

升级。

class data_controller {
  // class fields
  id = 12;
  a = 10;
  b = 20;
  // log data entries
  log = {
    entry: {
      parent: this,
      get a() {
        return {
          id: this.parent.id,
          value: this.parent.a,
          label: 'a',
        };
      },
      get b() {
        return {
          id: this.parent.id,
          value: this.parent.b,
          label: 'b',
        };
      },
    },
  };
  // update data
  update = {
    parent: this,
    set a(value) {
      this.parent.a = value;
    },
    set b(value) {
      this.parent.b = value;
    },
  };
}
// class usage
const data = new data_controller();
console.log(data.log.entry.a);
console.log(data.log.entry.b);
data.update.a = 50;
data.update.b = 60;
console.log(data.log.entry.a);
console.log(data.log.entry.b);