Question

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

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

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

通过这个：

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

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

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

Answer 1

我深入研究了这个并玩弄打字游戏。我用getter声明了两个类，第二个用你的问题中描述的get方法。

让我们看看它的样子：

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

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

关于我们以下列方式宣布吸气剂的第二个例子：

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方法中看到的那样（如第一个示例中所示），该方法在原型上声明，在第二个示例中，使用getter pattern typescript使用defineProperty api。

在这两种情况下，我们都在调用一个方法，而angular也会在变化检测过程中调用一个方法来识别变化并重新渲染。

我认为这对于同样的方法来说只是一种语法糖，我不认为其中一种方法有任何性能上的好处。

Answer 2

如果您是吸气剂或方法从技术角度来看无关紧要。

有些人使用这样的约定，即getter的行为应该与字段类似，而不是进行昂贵的计算，而如果计算不仅仅是一些非常基本的东西，例如从第一个中间构建一个全名，那么应该使用一个方法。 - 和姓氏。

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

在视图绑定中非常重要的是，当没有修改依赖项时，方法或getter不会在后续调用中返回不同的值（如return {};，这将被视为新的对象实例并导致类似错误“自上次检查后，表情发生了变化。”）

Answer 3

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

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

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

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

吸气剂和制定者是ES5规范的一部分。您可以阅读getter和setter。

Answer 4

通过 get / set 语法，该方法的行为就像一个字段，请参见以下示例：

通过常规 getter 方法使用

usingGetterMethod()
{
  let id = this.getId();
}

getId()
{
  return this.reactiveForm.get('id');
}

通过get方法使用

usingGetMethod()
{
  let id = this.id;
}

get id()
{
  return this.reactiveForm.get('id');
}

Angular 2模板方法与getter

4 个答案: