javascript - Angular 2 模板方法与 getter

Question

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

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

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

关于这个:

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

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

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

Answer 1

我对此进行了更深入的研究，并使用了 typescript Playground。如您的问题所述，我声明了两个类，一个是 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;
}());

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

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 方法中看到的(如您的第一个示例)，该方法是在原型(prototype)上声明的，在您使用 getter 模式的第二个示例中，typescript 使用 defineProperty api。

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

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