Angular组件中Getter函数与Constructor的执行顺序优先级问题

我来帮你拆解这两个问题，结合你给出的代码示例一一说明：

1. Constructor与Getter的执行顺序 #

在Angular组件的生命周期里，构造函数（Constructor）是最先执行的——当组件被实例化的那一刻，构造函数就会立即调用，不管你的模板有没有用到组件里的属性或方法。

而Getter访问器（也就是你代码里的get name()）的执行时机，完全取决于它什么时候被访问：只有当模板中绑定了name（比如写了{{name}}），或者组件内部的代码主动调用了this.name时，Getter才会触发执行，而且每次访问都会调用一次。

拿你的代码来说，构造函数里的console.log('constructor called on App Component')会在组件刚创建时就打印出来；如果你的模板里用到了{{name}}，那Getter里的代码会在构造函数执行之后、组件渲染模板的阶段被调用。

2. Getter中console.log不输出的原因 #

这个其实是JavaScript的基础逻辑问题，和Angular无关：你的Getter里return 'sahir';写在了console.log('called get method');的前面。在JavaScript中，函数执行到return语句时会立即终止并返回结果，return后面的代码永远不会被执行到。

要让日志正常输出，你只需要把console.log移到return前面就行，修改后的Getter代码应该是这样：

get name(): string {
  console.log('called get method');
  return 'sahir';
}

这样每次访问name属性时，就会先打印日志，再返回结果啦。

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