javascript - 根据同一类中的其他属性计算的 Javascript 类的属性

Question

这可能是我遗漏的一些非常愚蠢的东西，但是我如何让一个类的属性根据同一类中其他属性的值自动重新计算？

例如

function Test() {
    this.prop1 = 1;
    this.prop2 = 2;
    this.prop3 = this.prop1 + this.prop2;

}

tester = new Test();

alert (tester.prop1); // expect 1
alert (tester.prop2); // expect 2
alert (tester.prop3); // expect 3

tester.prop1 += 1;

alert (tester.prop1); // expect 2
alert (tester.prop2); // expect 2
alert (tester.prop3); // expect 4

或者我是否需要将 prop3 设置为 = calcProp3() 然后包含如下函数:

this.calcProp3 = function() {
        var calc = this.prop1 + this.prop2;
        return calc;
    }

谢谢大家。

Answer 1

or do I need to have prop3 set to be = calcProp3() and then include a function

你有两个选择:

1. 创建一个带有getter的属性，使用时看起来是简单的属性访问，但实际上是在调用一个函数，或者

2. 执行您的 calcProp3 函数，这让使用 Test 的编码人员清楚他们正在调用一个函数

如果您需要支持像 IE8 这样真正过时的浏览器，选项 2 是您唯一的选择，因为 IE8 不支持 getter。

使用 setter/getter

在 2017 年，您可能会在 class 中定义它(必要时为不支持 ES2015 [aka "ES6"] class 的浏览器进行转译):

class Test {
  constructor() {
    this.prop1 = 1;
    this.prop2 = 2;
  }
  get prop3() {
    return this.prop1 + this.prop2;
  }
}
const t = new Test();
console.log(t.prop3); // 3
t.prop1 = 2;
console.log(t.prop3); // 4

如果您想限制自己使用 ES5 的功能(规范于 2009 年 12 月发布，IE8 不支持)，您可以在 Test.prototype 上定义一个 getter，或者使用 Object .defineProperty ( spec , MDN ):

function Test() {
  this.prop1 = 1;
  this.prop2 = 2;
}
Object.defineProperty(Test.prototype, "prop3", {
  get: function() {
    return this.prop1 + this.prop2;
  }
});
var t = new Test();
console.log(t.prop3); // 3
t.prop1 = 2;
console.log(t.prop3); // 4

...或者通过替换 Test.prototype 并使用 getter 的对象初始化语法(记住设置 constructor):

function Test() {
  this.prop1 = 1;
  this.prop2 = 2;
}
Test.prototype = {
  constructor: Test,
  get prop3() {
    return this.prop1 + this.prop2;
  }
};
var t = new Test();
console.log(t.prop3); // 3
t.prop1 = 2;
console.log(t.prop3); // 4

使用函数

在 2017 年，您可能会将其定义为使用 class 语法的方法(如有必要，为旧版浏览器进行转译):

class Test {
  constructor() {
    this.prop1 = 1;
    this.prop2 = 2;
  }
  calcProp3() {
    return this.prop1 + this.prop2;
  }
}
const t = new Test();
console.log(t.calcProp3()); // 3
t.prop1 = 2;
console.log(t.calcProp3()); // 4

如果你想坚持使用 ES5(实际上在本例中是 ES3)特性来支持过时的浏览器，只需向原型(prototype)添加一个函数:

function Test() {
  this.prop1 = 1;
  this.prop2 = 2;
}
Test.prototype.calcProp3 = function calcProp3() {
  return this.prop1 + this.prop2;
};
var t = new Test();
console.log(t.calcProp3()); // 3
t.prop1 = 2;
console.log(t.calcProp3()); // 4