Angular 5中Observable内this的作用域问题咨询

Hey there! Let's walk through how this behaves in your specific Observable subscription code—this is such a common point of confusion in Angular (and JavaScript overall), so it's great you're digging into it.

First, let's recap your working code for context:

student: Student = null; // Class-level property
ngOnInit() {
  const id: number = Number(this.activatedRoute.snapshot.params['id']);
  if (id) {
    this.studentEditSubscription = this.studentService.getStudentById(id).subscribe(
      data => {
        this.student = data as Student;
        console.log(this.student); // Logs the correct student object
      },
      error => alert('The stu...')
    );
  }
}

Why this works correctly here #

The magic here is that you're using arrow functions (data => { ... }) for your subscription callbacks.

In JavaScript, arrow functions don't create their own this binding. Instead, they "inherit" the this value from the surrounding code's context—which in this case is the ngOnInit method's this, pointing directly to your component class instance. That's why this.student correctly references the class-level property you defined, and assigning data to it updates the component's state exactly as you expect.

What would break this? #

If you swapped the arrow function for a traditional function expression, you'd hit a wall fast:

// This will NOT work as intended!
.subscribe(function(data) {
  this.student = data as Student; // `this` here doesn't point to your component
  console.log(this.student); // Will be undefined or an unexpected value
})

Regular functions create their own this context, which inside an Observable subscription typically points to the subscription itself (or the global object in non-strict mode)—not your component. So this.student wouldn't reference the class property you're trying to update.

Workarounds if you need a regular function (though arrow functions are preferred) #

If for some edge case you need to use a regular function (this is rare in modern Angular code), you have two reliable fixes:

1. Bind this explicitly:

   .subscribe(function(data) {
     this.student = data as Student;
   }.bind(this)) // Forces the function to use your component's `this`
   

2. Capture this in a variable:

   const self = this; // Save the component's `this` to a variable
   .subscribe(function(data) {
     self.student = data as Student; // Use `self` instead of `this`
   })
   

But in your scenario, the arrow function approach is clean, concise, and the standard best practice for Angular components. It eliminates scope confusion entirely and ensures you always have access to your component's properties and methods inside the subscription callback.

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