在Angular组件模板中使用this调用变量或方法是否为良好实践？

我了解到在Angular中，this指代组件实例，在模板里使用this调用变量或方法，和不使用this的结果完全一致。以下是示例代码：

模板文件（sample.html）：

<p> {{ this.getName() }} </p>

组件文件（sample.component.ts）：

@Component({ templateUrl: 'sample.html' }) 
export class SampleComponent { 
  public name: string; 
  constructor() { 
    this.name = 'John'; 
  } 
  getName(): string { 
    return this.name; 
  } 
}

基于上述代码，{{ this.getName() }} 和 {{ getName() }} 都能正常显示 John。想请教两个问题：

• 从编码规范角度，是否应该添加this？
• 是否存在性能方面的顾虑？

一、编码规范层面的建议 #

Angular官方并没有强制要求模板中必须使用this，但从代码可读性、可维护性的角度，我更推荐加上它，原因如下：

• 明确归属：加上this后，能立刻明确这个属性/方法是属于组件实例的，而非模板局部变量、管道或者其他全局对象，在复杂模板中这点能大幅降低理解成本。
• 规避歧义：如果后续在模板中定义了同名局部变量（比如*ngFor="let name of names"），不加this的话，模板会优先读取局部变量，很容易引发难以排查的bug，提前用this就能避免这种冲突。
• 团队风格统一：如果团队统一约定使用this，代码风格会更一致，新人接手项目时也能更快适应，减少不必要的沟通成本。

当然，如果团队更偏好简洁写法，统一不加this也没问题——但从长远维护的角度，添加this的优势会更突出。

二、性能方面的顾虑 #

完全不用操心性能问题！Angular的模板编译器在编译阶段，会自动把模板中不带this的属性/方法调用转换成this.xxx的形式，两种写法最终生成的运行时代码完全一致，所以在性能上没有任何差异。

内容的提问来源于stack exchange，提问作者Mark