为何RxJS订阅回调中的this仍可访问Angular组件实例？

@Component({
  .....
})
export class AngularComponent {
     componentVariable: boolean;
 
     someMethod(){
        this.service.subscribe(x => this.componentVariable = x)
     }
}

为何在subscribe的回调函数中，this能够访问AngularComponent并设置componentVariable？按常理this是否应该指向订阅上下文而非组件上下文？注：我知道这可能是不良实践，但想了解其运行原理。

核心原因是你用了箭头函数（=>），而非普通函数表达式。

在JavaScript/TypeScript中，普通函数的this是调用时动态绑定的——谁触发调用，this就指向谁。如果换成普通函数写法：

this.service.subscribe(function(x) {
  this.componentVariable = x; // 这里的this会指向订阅的上下文，而非组件实例
})

但箭头函数的this是词法作用域绑定的，它不会生成自己的this上下文，而是直接继承外层作用域的this。这里箭头函数定义在组件的someMethod方法内，当someMethod作为组件实例的方法被调用时，外层作用域的this就是AngularComponent的实例，所以箭头函数里的this自然也指向该实例，就能直接访问并设置componentVariable了。

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