Angular组件构造函数中使用this与不使用this的差异及属性结果问询

一、使用this与不使用this赋值的核心差异 #

• 带this的赋值：this.属性名 = 值操作的是当前组件类的实例成员，赋值后这个值会绑定到组件实例上，在组件的整个生命周期内，都能通过this.属性名访问到该值。
• 不带this的赋值：如果直接写属性名 = 值，这相当于在构造函数内部声明了一个局部变量，和类定义的成员属性完全无关。这个局部变量仅在构造函数执行期间有效，执行完毕后就会被销毁，组件其他逻辑无法访问它。

二、示例代码的最终结果分析 #

先看示例代码的关键细节：

class MyComponent {
  myProp!: myInterface;

  constructor (private myNomeServiceInstance: NomeService ) {
    this.myProp = myNomeServiceInstance;
    this.myProp = this.myNomeServiceInstance;  
  }
}

1. 构造函数中的private myNomeServiceInstance: NomeService是Angular的语法糖：Angular会自动把这个参数挂载为组件实例的私有成员，也就是this.myNomeServiceInstance和构造函数参数myNomeServiceInstance指向同一个NomeService实例。
2. 两次赋值操作本质都是把同一个NomeService实例赋值给this.myProp，所以最终this.myProp的结果就是**NomeService的实例对象**。

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