Undefined this in a compare function of class with a sort method

Question

I am unsure of why the this in the second case of the Sort methods sort compare function is undefined? I managed to get the correct this by using an arrow function.

var SortTypeEnum = {
  SortByGold: 1,
  SortByOwnership: 2,
};

class Resource {
  constructor(Gold, IsOwned) {
    this.Gold = Gold;
    this.IsOwned = IsOwned;
  }
}

class ResourceInventory {
  constructor(Inventory, SortedDescending = false) {
    this.Inventory = Inventory;
    this.SortedDescending = SortedDescending;
  }

  Sort(sortType) {
    switch (sortType) {
      case SortTypeEnum.SortByOwnership:
        this.Inventory.sort(function (lhs, rhs) {
          return rhs.IsOwned - lhs.IsOwned;
        });
        break;
      case SortTypeEnum.SortByGold:
        this.Inventory.sort(function (lhs, rhs) {
          return this.SortedDescending ? rhs.Gold - lhs.Gold : lhs.Gold - rhs.Gold;
        });
        this.SortedDescending = !this.SortedDescending;
        break;
    }
  }
}

var resources = [new Resource(1, false), new Resource(3, false), new Resource(2, true)];

var inv = new ResourceInventory(resources);

inv.Sort(SortTypeEnum.SortByGold);

The sort-callback does not get `this` bound to what you think. See referenced Q&A. One solution: define that callback as an arrow function. — trincot, Sep 13 '17 at 09:25
Use an arrow function, or read the flag once in a local variable outside the `sort` and then use that. — T.J. Crowder, Sep 13 '17 at 09:26

score 1 · Answer 1 · answered Sep 13 '17 at 09:25

In this code

this.Inventory.sort(function (lhs, rhs) {
    return this.SortedDescending ? rhs.Gold - lhs.Gold : lhs.Gold - rhs.Gold;
});

your this refers to another context, not the object. Use arrow function instead

this.Inventory.sort( (lhs, rhs) => this.SortedDescending ? rhs.Gold - lhs.Gold : lhs.Gold - rhs.Gold );

Undefined this in a compare function of class with a sort method

1 Answers1