web-dev-qa-db-ja.com

Angular 2つのテンプレートメソッドとゲッター

これを行う利点があるかどうか疑問に思っています：

  <div>{{getSomething()}}</div>

  export class MyComp {
    getSomething() { return ...}
  }

これについて：

 <div>{{getSomething}}</div>

 export class MyComp {
   get getSomething() { return ...}
 }

メソッドとゲッターを使用して、計算されたデータを表示します。

javascriptangulartypescriptgetter-setter
17
ng2user

私はこれをより深く見て、TypeScript Playgroundで遊んでいました。質問で説明されているように、1つはgetterで、もう1つはgetメソッドで2つのクラスを宣言しました。

どのように見えるか見てみましょう：

最初の例では、次の方法でプロパティ値を取得するメソッドを宣言しました。

class Greeter {
  greeting: string;
  constructor(message: string) {
      this.greeting = message;
  }
   getGreeting() {
      return this.greeting;
  }
}

Javascriptへの変換後は次のようになります。

var Greeter = (function () {
   function Greeter(message) {
       this.greeting = message;
   }
   Greeter.prototype.getGreeting = function () {
       return this.greeting;
   };
   return Greeter;
}());

そして、次の方法でゲッターを宣言した2番目の例に関しては：

class GetterGreeter {
   _greeting: string;
   constructor(message: string) {
       this._greeting = message;
   }
    get greeting() {
       return this._greeting;
   }
}

翻訳後は次のようになります：

var GetterGreeter = (function () {
   function GetterGreeter(message) {
       this._greeting = message;
   }
   Object.defineProperty(GetterGreeter.prototype, "greeting", {
       get: function () {
           return this._greeting;
       },
       enumerable: true,
       configurable: true
   });
   return GetterGreeter;
}());

（宣言とJavaScriptへの変換で遊ぶことができます here ）

Getメソッドで見ることができるように（最初の例のように）メソッドはプロトタイプで宣言され、2番目の例ではgetterパターンを使用してTypeScriptはdefineProperty apiを使用します。

どちらの場合もメソッドを呼び出しており、angularは、変更の検出中にメソッドを呼び出して、変更を識別して再レンダリングします。

私が見るように、これは同じアプローチの構文上の糖にすぎず、いずれかの方法のパフォーマンス上の利点は見当たりません。

23
galvan

ゲッターまたはメソッドである場合、技術的な観点からは問題ではありません。

ゲッターはフィールドと同じように動作し、高価な計算を行わないという規則を使用しますが、計算が最初のミドルネームとラストネームからフルネームを作成するなどの非常に基本的なこと以上の場合はメソッドを使用する必要があります名前。

これはAngularの区別に従うのが良い習慣だと思います。ビューバインディングでは、メソッドやゲッターを頻繁に呼び出すことができるため、高価な計算を避ける必要があるからです。そのような場合は、結果をフィールドに保存し、代わりにフィールドにバインドすることをお勧めします。

ビューバインディングで非常に重要なのは、依存関係が変更されなかった場合、メソッドまたはゲッターが後続の呼び出しで異なる値を返さないことです（return {};など、新しいオブジェクトインスタンスとして扱われ、 "Expression has最後にチェックされてから変更されました。 "）

16
Günter Zöchbauer

違いは、最初の場合は式で関数を使用することですが、2番目の場合は関数ではありません。使用できません

<div>{{getSomething()}}</div>

export class MyComp {
  get getSomething() { return ...}
}

2番目のメソッドを使用する利点は、クラス内でプロパティのカプセル化を使用することであり、クラス外でプロパティにアクセスする必要があります。

ゲッターとセッターはES5仕様の一部です。 getter および setter について読むことができます。

1
Roman C