为何Angular组件构造函数先于ngOnChanges钩子执行？

这本质是JavaScript类机制和Angular生命周期设计逻辑共同决定的，拆解来看：

• 构造函数是JS/TS类的原生特性，任何类实例化时第一步就是调用构造函数——这是JS引擎的底层行为，和Angular无关。Angular组件本质上就是TS类，所以创建组件实例时，必须先跑完构造函数，完成类的基础初始化（比如注入依赖、初始化类成员），才能得到一个可用的组件实例。

• ngOnChanges是Angular专属的生命周期钩子，它的触发依赖两个前提：

  1. 组件实例已经存在（不然Angular找不到要检测的输入属性）；
  2. Angular完成了输入属性（@Input）的绑定，并且检测到属性值有变化（包括初始赋值）。

  而输入属性的绑定操作，是在组件实例创建完成（也就是构造函数执行完）之后才会进行的。举个实际代码例子：

  @Component({ selector: 'app-child' })
  export class ChildComponent {
    @Input() message: string;
  
    constructor() {
      console.log('构造函数执行');
      console.log('当前message值:', this.message); // 输出 undefined
    }
  
    ngOnChanges(changes: SimpleChanges) {
      console.log('ngOnChanges执行');
      console.log('当前message值:', this.message); // 输出父组件传递的初始值
    }
  }
  

  从日志就能看到，构造函数先执行，此时输入属性还没被赋值；等Angular完成输入绑定后，才会触发ngOnChanges。

简单总结：构造函数是组件实例诞生的必经环节，所有Angular生命周期钩子都依赖已存在的组件实例，所以构造函数必然早于ngOnChanges（以及所有其他生命周期钩子）执行。

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