Javascript use anonymous function inside class methods

Question

I am refactoring working code in to class. I am getting an error where I am loading some Json and parsing it. This code works fine as a function but not inside a class method.

Code:

class MemoryCards {
    
    constructor() {
        this.gameData = [];
        this.cardData = [];

        this.currentLives = 0;
        this.levelLives = 0;
        this.level = 1;

        this.hasFlippedCard = false;
        this.lockDeck = false;
        this.firstCard, this.secondCard;
        this.trackMatches = 0;

        this.cardSelection = [];
    }

    startGame () {
        this.loadJSON(function(response) {
            this.gameData = JSON.parse(response);}, 
            'gameData.json');
    }

    loadJSON(callback, file) {   

        var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open('GET', `assets/data/${file}`, false);
        xobj.onreadystatechange = function () {
            if (xobj.readyState == 4 && xobj.status == "200") {
                callback(xobj.responseText);
            }
        };
        xobj.send(null);  
    }
}

Error:

game.js:21 Uncaught TypeError: Cannot set property 'gameData' of undefined
    at game.js:21
    at XMLHttpRequest.xobj.onreadystatechange (game.js:68)
    at MemoryCards.loadJSON (game.js:71)
    at MemoryCards.startGame (game.js:20)
    at (index):77

Use an arrow function, this.loadJSON(response => { this.gameData = ... }) — goto
– goto, Commented Jan 16, 2021 at 19:43
Does this answer your question? Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? — goto
– goto, Commented Jan 16, 2021 at 19:46

Vince · Accepted Answer · 2021-01-16 20:13:33Z

4

Implement Arrow Function:

startGame () {
  this.loadJSON((response) => {
  this.gameData = JSON.parse(response);
 }, 'gameData.json');
}

Why it Works?

It is because of the this keyword. The this keyword is referring to the Global Object by default. functions have their own block scope but arrow and normal functions have different world when it comes to looking for global object.

This code or normal function is looking for it's parent object and that is the startGame function.

function(response) {
 this.gameData = JSON.parse(response);
}, 'gameData.json')

but this arrow function is looking for the last parent object and that is MemoryCards

(response) => {
  this.gameData = JSON.parse(response);
 }, 'gameData.json')

Think of this way the arrow function is looking for the LAST scope or { }

edited Jan 16, 2021 at 20:13

answered Jan 16, 2021 at 19:44

Vince

88713 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ted Brownlow Over a year ago

You should include an explanation as to why the arrow function solves this issue

Vince Over a year ago

Ok, I will just a min.

Collectives™ on Stack Overflow

Javascript use anonymous function inside class methods

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related