21

これはおそらく私が見逃しているかなりばかげたものですが、クラスのプロパティを同じクラスの他のプロパティの値に基づいて自動的に再計算するにはどうすればよいですか?

例えば

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;
    }

皆さんありがとう。

4

3 に答える 3

26

または、prop3 を = calcProp3() に設定してから関数を含める必要がありますか?

次の 2 つの選択肢があります。

  1. getterを使用してプロパティを作成します。これは、使用すると単純なプロパティ アクセスのように見えますが、実際には関数を呼び出しています。または

  2. 関数を実行しますcalcProp3。これにより、コーダーTestが関数を呼び出していることが明らかになります

IE8 はゲッターをサポートしていないため、IE8 のような完全に時代遅れのブラウザーをサポートする必要がある場合は、オプション 2 が唯一のオプションです。

ゲッターの使用

ここ 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 ではサポートされていません) に限定したい場合は、( spec , MDN )Test.prototypeを使用してゲッター on を定義します。Object.defineProperty

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 のオブジェクト初期化子構文を置き換えて使用する ( 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(古いブラウザーでは必要に応じてトランスパイルします)。

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

于 2012-04-23T14:38:29.927 に答える
3

Javascript は、 を介してセッターとゲッターを実装する標準的な方法をサポートするようになりましたObject.defineProperties()。

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
于 2014-08-01T23:47:19.883 に答える