从同一类中的其他属性计算的Javascript类的属性

Question

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

e.g。

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

  

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

您有两种选择：

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

2. 执行calcProp3功能，使编码人员使用Test显示他们正在调用函数

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

使用getter

2017年您可能会在class中定义它（如果浏览器不支持ES2015的[又称“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 {{3}在Object.defineProperty上定义一个getter。 }，spec）：

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

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

Answer 2

Javascript现在支持通过Object.defineProperties()实现setter和getter的标准方法。

function Test() {
    this.prop1 = 1;
    this.prop2 = 2;
}
Object.defineProperties(Test.prototype, {
    prop3: {
        get: function test_prop3_get(){ return this.prop1 + this.prop2 },
    },
});

tester = new Test();

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

tester.prop1 += 1;

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

Answer 3

在ES6之后，你可以在构造函数中计算：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;