在Angular 4组件的背景下，使用Get函数有什么好处？

Question

我很好奇在Angular 4中这两个函数之间的区别：

get currentIndex(): number {
  return `Current Index is ${this.index}`;
}

public currentIndex(): number {
  return `Current Index is ${this.index}`;
}

它们是否完全做相同的事情？如果不是，什么时候它们会执行不同的操作？

- Bird Dad

Answer 1

getter/setter与方法相比更与属性相关，因此最好将getter/setter与普通属性进行比较。

调用getter/setter与任何普通属性的方式相同，只实现getter意味着只读属性，而只实现setter意味着只写属性。

getter和setter为直接与属性交互添加了额外层，例如

class Person {
 private _age:number;
 public get age() {
   //... do something 
   retutn this._age; 
 }

 public set age(value) {
   if (value >0){
    this._age = value
   }
 }
}

从上面的例子中，我们可以防止分配无效的年龄值。

在Angular中，如果我们想要在模板中显示一个名为age的getter属性，那么像这样 {{age}} ，但是如果age是一个函数，则会像这样 {{age()}}

正如我之前提到的，最好将getter/setter视为属性而不是方法

根据您的示例：

get currentIndex(): number {
  return `Current Index is ${this.index}`;
}

这个getter可以从服务中获取值，也可以从另一个属性计算得出，并且看起来像普通属性。

setter和getter是JavaScript中的函数。请参考setter和getter。

- Muhammed Albarmavi

Answer 2

它们基本相同，只是函数/方法倾向于计算。因此，当您仅访问数据（如此例中的索引）时，函数可能会看起来奇怪或过度使用。

使用getter就像两全其美。它看起来像简单的数据访问 - currentIndex与currentIndex() - 同时允许您稍后添加逻辑，如果您需要执行诸如计算之类的操作。

但从技术上讲，它们是不同的，您可以使用TypeScript PlayGround查看它们如何编译为不同的代码。

- Frank Modica