constructor异步取值外层为undefined，如何正确获取userID？

这不是this指向的作用域问题，就是纯 异步请求时序差 导致的。
浏览器发起HTTP请求时是异步执行的，constructor里写的订阅代码不会等网络返回、不会卡住线程等待回调跑完，constructor会先把所有同步代码执行完，等几百毫秒网络响应回来了，才会执行订阅回调里给userId赋值的逻辑。如果testPrintUserID在回调执行前就被调用，读到的this.userId永远是初始的undefined——至于为什么订阅回调里能正常打印userId，就是因为回调本身是等数据到了才运行的，这时候赋值操作已经完成了。

顺带原代码还有三个隐藏坑：

• 类型断言写错了：把返回的用户对象硬转成数组res as []，后面又按对象取userDetails.id，就算时序没问题，这行逻辑本身类型是不成立的
• 类内的userDetails、userId两个属性根本没显式声明，TS会直接报未定义的错误，初始状态本来就是空值
• subscribe回调里的赋值语句后面误用了逗号代替分号，严格编译模式下会触发语法错误

1. 用响应式数据流管理用户状态，彻底解耦时序 #

不要把userId当同步的静态类变量存储，把用户信息做成可观察的数据流，所有需要用到userId的地方直接订阅这个流，只要数据准备好了，订阅的回调就会自动触发，不管什么时候调用都不会拿到undefined。
示例代码：

import { BehaviorSubject, Observable, filter, map, take } from 'rxjs';

// 类内定义状态源
private userProfileSource = new BehaviorSubject<UserProfile | null>(null);
// 对外暴露处理好的userId流，外部不需要关心异步细节
public userId$: Observable<number> = this.userProfileSource.asObservable().pipe(
  filter(profile => Boolean(profile)),
  map(profile => (profile as UserProfile).id)
);

constructor(
  // 原有注入的依赖保持不变
) {
  this.UserService.getUserProfile().subscribe({
    next: (res: UserProfile) => {
      // 拿到数据直接推到状态源里
      this.userProfileSource.next(res);
    },
    error: err => console.error('拉取用户信息失败', err)
  })
}

testPrintUserID() {
  // 订阅流拿值，就算调用的时候数据还没回来，等数据到了也会正确打印
  this.userId$.pipe(take(1)).subscribe(id => {
    console.log('当前用户ID：', id);
  })
}

2. 方法内部直接拉取数据，不依赖constructor的提前赋值 #

如果testPrintUserID是用户点按钮触发的交互逻辑，完全没必要等constructor里的请求提前缓存值，直接在方法内部拿最新的用户信息就行，从根源上消解时序耦合。
示例：

testPrintUserID() {
  this.UserService.getUserProfile().subscribe({
    next: profile => console.log('用户ID：', profile.id),
    error: err => console.error(err)
  })
}

3. 用Promise串初始化流程，保证所有逻辑执行前数据就绪 #

如果要求所有类内逻辑必须等用户信息拉完才能运行，可以把拉取用户信息的过程封装成存储好的Promise，所有用到userId的方法先await这个Promise再执行逻辑。
示例：

import { firstValueFrom } from 'rxjs';

// 类内存初始化的Promise
private userProfileReady: Promise<UserProfile>;

constructor(
  // 原有注入依赖不变
) {
  // 把首次拉取用户信息的Observable转成Promise，存下初始化状态
  this.userProfileReady = firstValueFrom(this.UserService.getUserProfile());
}

async testPrintUserID() {
  // 等用户信息拉完再往下走，不会拿到undefined
  const user = await this.userProfileReady;
  console.log('用户ID：', user.id);
}

内容的提问来源于stack exchange，提问作者Al-otaibi Ayman