从同一类中的其他属性计算出的Javascript类的属性 [英] Property of a Javascript Class calculated from other properties in same Class

问题描述

这可能是我很想念的东西，但是我如何让一个类的属性根据同一类中其他属性的值自动重新计算呢？

This is probably something pretty silly that I'm missing but how do I get the property of a class to automatically re-calculate based on the values of other properties in the same class?

eg

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（），然后包含像这样的函数：

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

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

谢谢。

推荐答案

还是我需要将prop3设置为= calcProp3（），然后包含一个函数

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

您有两个选择：

1. 使用 getter创建属性，当您使用它时，它看起来像是简单的属性访问，但实际上是在调用函数，或者

1. Create a property with a getter, which looks like a simple property access when you use it, but is in fact calling a function, or

执行您的 calcProp3 函数，这使得使用 Test 的编码器可以看出他们正在调用函数

Do your calcProp3 function, which makes it apparent to the coder using Test that they're calling a function

如果需要支持IE8等过时的浏览器，则选项2是唯一的选择，因为IE8不支持getter。

Option 2 is your only option if you need to support truly obsolete browsers like IE8, since IE8 doesn't support getters.

在2017年，您可能会在类（如果不支持ES2015的[aka ES6] 类的浏览器进行必要的转换）：

Here in 2017 you'd probably define it in a class (transpiling if necessary for browsers that don't support ES2015's [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不支持该规范），您可以使用 Object.defineProperty 在 Test.prototype 上定义一个吸气剂。 code>（规范 ， MDN ）：

If you wanted to limit yourself to features of ES5 (spec released December 2009, not supported in IE8), you'd define a getter on Test.prototype, either by using 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 并使用对象初始化程序语法进行吸气（记住设置构造函数）：

...or by replacing Test.prototype and using the object initializer syntax for getters (remember to set 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 语法（如果需要旧版浏览器则进行编译）将其定义为一种方法：

Here in 2017, you'd probably define it as a method using class syntax (transpiling if necessary for older browsers):

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）功能可以支持过时的浏览器，只需在原型中添加一个功能即可：

If you wanted to stick with ES5 (actually in this case ES3) features to support obsolete browsers, just add a function to the 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

这篇关于从同一类中的其他属性计算出的Javascript类的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！