对箭头功能中的“this”感到困惑

Question

I've seen a lot of discussion on this topic, and I've read through numerous articles, but I'm still confused about what this refers to in arrow functions.

I seem to be getting run-time errors associated with the following code (simplified):

export class Foo implements OnInit {
myProp: string;
myKeys: Array<any> = [];
mySubKeys: Array<any> = [];
@Input myObj;

. . . 

ngOnInit() {

this.myKeys = Object.keys(this.myObj); 
this.myKeys.forEach((key) => {
    this.myProp = key;
    this.mySubKeys = Object.keys(this.myObj[key]);
    this.mySubKeys.forEach((subkey) => { . . .  
. . . 

The error happens at this.myProp = key where the debugger complains that this is undefined.

My confusion is that for arrow functions I understood that this refers to the this preceding the scope in which the arrow function is called. In this case, wouldn't the preceding scope be the class scope, and therefore shouldn't this.myProp be defined?

I tried changing the arrow function to forEach(function(key) { . . . but got different errors.

Finally, if the this inside the arrow function doesn't refer to the class this then how do I refer to the class this and associated class properties (such as myProp ) inside the arrow function?

Answer 1

The reason for this is that the value of this in a function depends on how the function is called.

At it's most basic level if the function is called as this.myKeys.forEach() , the value of this is the calling context which in this case is myKeys

In all cases however it isn't going to be myKeys , so this.myProp & this.mySubKeys is not going to return value , it's going to return undefined or raise an error.

This instability of this is an incredibly common problem in Javascript that has affected it since the early days.

In ES5 there are a number of methods we can use to stabilize the value of this . One common solution is to assign this to another variable at the top, usually called self , and then always use self in the function body, like so:

ngOnInit() {


   this.myKeys = Object.keys(this.myObj) {

    let self = this; // declare the variable to refer class object
    this.myKeys.forEach((key) => {
        self.myProp = key;
        self.mySubKeys = Object.keys(this.myObj[key]);
        self.mySubKeys.forEach((subkey) => { . . .  
   . . . 

Hope this will help!

Answer 2

The this in the code you expose should work as you intend to. I think your problem comes from this line:

this.myKeys = Object.keys(this.myObj) {

There is an opening { when it should be just a close ; .

this.myKeys = Object.keys(this.myObj);

The code should look like:

ngOnInit() {
    this.myKeys = Object.keys(this.myObj);
    this.myKeys.forEach((key) => {
        this.myProp = key;
        this.mySubKeys = Object.keys(this.myObj[key]);

Edit:

Adding demo to try the this is working: https://stackblitz.com/edit/stackoverflow-mykeys-demo

Note that the Input() has to have the () too.

Answer 3

From MDN :

An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. So while searching for this which is not present in current scope they end up finding this from its enclosing scope.