Angular中Subscribe使用已定义函数的写法疑问

嘿，这个问题问得挺到位的！咱们直接说结论：不能直接替换，但稍作调整就能实现，核心问题出在this的上下文绑定上，咱们慢慢拆解：

为什么直接替换会踩坑？ #

你的sortMembers是组件类的实例方法，当你直接把this.sortMembers传给subscribe当回调时，RxJS在调用这个函数的时候，this的指向会“跑偏”——不再指向你的组件实例。而你的sortMembers里要给this.members赋值，这时候就会抛出类似Cannot set property 'members' of undefined的错误。

不过有一点是没问题的：参数是完全匹配的——subscribe的next回调会传入IProfile[]类型的参数，正好和sortMembers的参数类型一致，所以参数这块不用操心。

可行的解决办法 #

办法1：用bind()绑定上下文 #

你可以通过bind方法把组件实例的this绑定到sortMembers上，这样不管RxJS怎么调用这个函数，里面的this都稳稳指向你的组件：

this.comService.currentMembers.subscribe(this.sortMembers.bind(this));

办法2：把sortMembers改成类字段箭头函数 #

如果你习惯用类字段语法，可以直接把sortMembers定义成箭头函数，它会自动“捕获”当前组件的this：

sortMembers = (members: IProfile[]): void => {
  this.members = members.slice().sort((profile1, profile2) => {
    if (profile1.name > profile2.name) return 1;
    if (profile1.name < profile2.name) return -1;
    return 0;
  });
};

这时候你就可以直接传this.sortMembers给subscribe了，完全没问题：

this.comService.currentMembers.subscribe(this.sortMembers);

办法3：继续用原来的内联箭头函数 #

其实你最开始的写法本身就很稳妥，内联箭头函数会自动绑定当前组件的this，代码逻辑也清晰，要是不想改sortMembers的定义，继续用原来的方式完全OK，没必要硬改。

额外提一句 #

如果你的sortMembers不需要操作组件的任何实例属性（也就是不用this），那直接传this.sortMembers是没问题的，但显然你的场景里要给this.members赋值，所以必须处理this的绑定问题。

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