JavaScript class methods in an array or object

Question

I am currently working on a project where I want to deference an array of functions (function references) and excecute the function.

This does only work, if I don't call another class method within the function. Otherwise I get "Uncaught TypeError" and I can't figure out how to solve this error.

Here's my code sample 'working' the same way my original project does: After calling function2 the engine cannot find this.log...

Do you have ideas? Thank you very much in advance.

KR, Robert

class ArrayWithFunctions {

    constructor() {
        this.functionTable = [
            this.function1,
            this.function2,
        ];
        
    }
    
    execute(index) {
        return (this.functionTable[index])();
    }
    
    log(chars) {
        console.log(chars);
    }
    
    function1() {
        console.log('I am Function 1.');
    }
    
    function2() {
        this.log('I am Function 2.');
    }
}

let example = new ArrayWithFunctions();
example.execute(0);
example.execute(1);

Drago96 · Accepted Answer · 2021-10-11 09:14:46Z

1

This is an example of Javascript's execution contexts in action. In this situation, to avoid losing the correct reference to the class, you can bind the functions when putting them inside the array, or initialize them as arrow functions:

Example 1: Bind them in the constructor:

    constructor() {
        this.functionTable = [
            this.function1.bind(this),
            this.function2.bind(this),
        ];
        
    }

Example 2: Create them as arrow functions:

class ArrayWithFunctions {

    // ...

    function1 = () => {
        console.log('I am Function 1.');
    }
    
    function2 = () => {
        this.log('I am Function 2.');
    }
}

edited Oct 11, 2021 at 9:14

answered Oct 11, 2021 at 9:07

Drago96

1,41711 silver badges23 bronze badges

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

Comments

malifa · Accepted Answer · 2021-10-11 09:07:12Z

0

You can use arrow functions to dodge scoping issues:

function2 = () => {
     this.log('I am function 2.');
}

answered Oct 11, 2021 at 9:07

malifa

8,1552 gold badges44 silver badges57 bronze badges

Comments

Felix Kling · Accepted Answer · 2021-10-11 09:12:22Z

0

Related: How to access the correct `this` inside a callback (and you might also want to take a look at How does the "this" keyword work?).

In this case you can simply set the correct this value by calling the function with .call:

return this.functionTable[index].call(this);

answered Oct 11, 2021 at 9:12

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Collectives™ on Stack Overflow

JavaScript class methods in an array or object

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related