typescript Angular 2 模板方法与 getter

Angular 2 templates methods vs getters

提问by ng2user

I'm wondering if there is any benefit to do this:

我想知道这样做是否有任何好处：

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

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

Over this:

在这个：

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

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

Use methods vs getters to display calculated data.

使用方法与 getter 来显示计算数据。

回答by galvan

I looked deeper into this and played with typescript Playground. I declared two classes one with getter and the second with get method as described in your questions.

我对此进行了更深入的研究，并使用了 typescript Playground。我声明了两个类，一个是 getter，另一个是 get 方法，如您的问题所述。

Lets see how it looks like:

让我们看看它的样子：

In the first example we declared a method for getting the property value in the following way:

在第一个示例中，我们通过以下方式声明了一个获取属性值的方法：

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

Which after translation to javascript it looks like:

翻译成 javascript 后，它看起来像：

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

And regarding the second example where we declared a getter in the following way:

关于第二个例子，我们通过以下方式声明了一个 getter：

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

Which after translation looks like:

翻译后的样子：

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

(You can play with the declaration and the translation to javascript here)

（您可以在此处使用声明和 javascript 的翻译）

As you can see with get method (as in your first example) the method is declared on the prototype and in your second example using the getter pattern typescript uses the defineProperty api.

正如您在 get 方法中看到的（如在您的第一个示例中），该方法是在原型上声明的，在您使用 getter 模式的第二个示例中，打字稿使用了defineProperty api。

In both cases we are invoking a method and angular will also call a method during its change detection to identify changes and re-render.

在这两种情况下，我们都在调用一个方法，并且 angular 也会在其更改检测期间调用一个方法来识别更改并重新渲染。

As I see it this is only a syntactic sugar for the same approach and I don't see any performance benefit for one of the methods.

在我看来，这只是相同方法的语法糖，我认为其中一种方法没有任何性能优势。

回答by Günter Z?chbauer

If you are a getter or a method doesn't matter from a technical point of view.

如果你是一个 getter 或者一个方法，从技术的角度来看并不重要。

Some use the convention that a getter should behave similar to a field, and not do expensive computation, while a method should be used if the computation is more than some very basic things like for example building a full name from first- middle- and last name.

有些使用约定，getter 的行为应该类似于字段，而不是进行昂贵的计算，而如果计算不仅仅是一些非常基本的东西，例如从 first-middle-last 构建全名，则应该使用方法名称。

I think this is good practice to follow that distinction for Angular, because for view binding expensive calculation should be avoided because the method or getter can be called very often. In such a case it's better to store the result in a field and bind to the field instead.

我认为这是遵循 Angular 区别的好做法，因为对于视图绑定，应该避免昂贵的计算，因为可以经常调用方法或 getter。在这种情况下，最好将结果存储在一个字段中并绑定到该字段。

Very important in view binding is, that the method or getter doesn't return different values on subsequent calls when no dependencies were modified (like return {};, which would be treated as new object instance and cause an error like ExpressionChangedAfterItHasBeenCheckedError).

在视图绑定中非常重要的是，当没有修改依赖项时，该方法或 getter 不会在后续调用中返回不同的值（例如return {};，这将被视为新的对象实例并导致类似的错误ExpressionChangedAfterItHasBeenCheckedError）。

回答by Roman C

The difference is in the first case you use a function in expression, but in the second case it's not a function. So you can't use

不同之处在于在第一种情况下您在表达式中使用函数，但在第二种情况下它不是函数。所以你不能使用

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

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

---

---

The benefits of using second method is to use encapsulation of the property inside the class and you need to access it outside the class.

使用第二种方法的好处是在类内部使用了属性的封装，并且需要在类外部访问它。

Getters and setters are part of ES5 spec. You can read about getterand setter.

getter 和 setter 是 ES5 规范的一部分。您可以阅读有关getter和setter 的信息。