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

Solution 1:

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

You have two choices:

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

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

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

Using a getter

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):

classTest {
  constructor() {
    this.prop1 = 1;
    this.prop2 = 2;
  }
  getprop3() {
    returnthis.prop1 + this.prop2;
  }
}
const t = newTest();
console.log(t.prop3); // 3
t.prop1 = 2;
console.log(t.prop3); // 4

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):

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

...or by replacing Test.prototype and using the object initializer syntax for getters (remember to set constructor):

functionTest() {
  this.prop1 = 1;
  this.prop2 = 2;
}
Test.prototype = {
  constructor: Test,
  getprop3() {
    returnthis.prop1 + this.prop2;
  }
};
var t = newTest();
console.log(t.prop3); // 3
t.prop1 = 2;
console.log(t.prop3); // 4

Using a function

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

classTest {
  constructor() {
    this.prop1 = 1;
    this.prop2 = 2;
  }
  calcProp3() {
    returnthis.prop1 + this.prop2;
  }
}
const t = newTest();
console.log(t.calcProp3()); // 3
t.prop1 = 2;
console.log(t.calcProp3()); // 4

If you wanted to stick with ES5 (actually in this case ES3) features to support obsolete browsers, just add a function to the prototype:

functionTest() {
  this.prop1 = 1;
  this.prop2 = 2;
}
Test.prototype.calcProp3 = functioncalcProp3() {
  returnthis.prop1 + this.prop2;
};
var t = newTest();
console.log(t.calcProp3()); // 3
t.prop1 = 2;
console.log(t.calcProp3()); // 4

Solution 2:

Javascript now supports a standard way to implement setters and getters via Object.defineProperties().

functionTest() {
    this.prop1 = 1;
    this.prop2 = 2;
}
Object.defineProperties(Test.prototype, {
    prop3: {
        get: functiontest_prop3_get(){ returnthis.prop1 + this.prop2 },
    },
});

tester = newTest();

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

Solution 3:

After ES6 you can calculate in constructor:

classTest {
  constructor() {
    this.prop1 = 1;
    this.prop2 = 2;
    this.suma = this.prop1 + this.prop2;
  }
  getprop3() {
    returnthis.suma;
  }
}
const t = newTest();
console.log(t.suma);
console.log(t.prop3); // 3