What is the method for invoking an outer class function from an inner function in JavaScript?

Question

What is the method for invoking an outer class function from an inner function in JavaScript?

class Outer{
    private outFunction(){
       console.log("Okay!");
    }
    public functionWeCall(){
         function innerFunction(){
             this.outFunction();    //That doesn't work
         }
    }
}

I am attempting to organize the code into separate functions, but I am having trouble calling a function from the outer class within an inner function. How can this be achieved?

javascript typescript class oop

Answer 1

Answer №1

When you reach the functionWeCall() function, this starts pointing to that specific function rather than the class itself. This means that outFunction() is not accessible through this. One common workaround involves utilizing a variable like this:

class Outer {
  private outFunction() {
    console.log("Okay!");
  }

  public functionWeCall() {
    let _this = this;
    
    function innerFunction() {
        _this.outFunction();
    }
  }
}

However, it may be preferable to reconsider the structure to avoid nested functions like this.

Edit: In response to suggestions from @Aluan Haddad, here is the updated approach using an arrow function:

class Outer {
  private outFunction() {
    console.log("Okay!");
  }

  public functionWeCall() {
    () => {
      this.outFunction();
    }
  }
}

If you still want the inner function to be callable, you can assign it to a variable:

class Outer {
  private outFunction() {
    console.log("Okay!");
  }

  public functionWeCall() {
    let innerFunction = () => {
      this.outFunction();
    }
    
    innerFunction(); // this could be anywhere in the scope of functionWeCall()
  }
}

Answer 2

When you reach the functionWeCall() function, this starts pointing to that specific function rather than the class itself. This means that outFunction() is not accessible through this. One common workaround involves utilizing a variable like this:

class Outer {
  private outFunction() {
    console.log("Okay!");
  }

  public functionWeCall() {
    let _this = this;
    
    function innerFunction() {
        _this.outFunction();
    }
  }
}

However, it may be preferable to reconsider the structure to avoid nested functions like this.

Edit: In response to suggestions from @Aluan Haddad, here is the updated approach using an arrow function:

class Outer {
  private outFunction() {
    console.log("Okay!");
  }

  public functionWeCall() {
    () => {
      this.outFunction();
    }
  }
}

If you still want the inner function to be callable, you can assign it to a variable:

class Outer {
  private outFunction() {
    console.log("Okay!");
  }

  public functionWeCall() {
    let innerFunction = () => {
      this.outFunction();
    }
    
    innerFunction(); // this could be anywhere in the scope of functionWeCall()
  }
}

What is the method for invoking an outer class function from an inner function in JavaScript?

Answer №1

Similar questions

Declaration in Typescript for an array of strings that will be returned as a

The best practices for managing item spacing in React or React Native

Animating jQuery Accordion in Horizontal Direction Extending to the Far Right

What is the best way to create a carousel component with this particular design?

What could be causing the "AJAX data not defined" error

Is it possible to modify the class within TypeScript code while utilizing the CSS library for styling?

Using AngularJS to bind objects with a checkbox

Is there a way to retrieve all the selected values from multiple select inputs when a button is clicked in React?

Toggle the visibility of the data depending on the dropdown option chosen

Change the structure of the JavaScript object into a new format

Looking to attach the "addEventListener" method to multiple elements that share the same class?

Ways to transfer information among Angular's services and components?

Geometry of Rounded Corners Box - three.js

core.js:15723 ERROR TypeError: Unable to access the 'OBJECT' property because it is undefined

Response coming from an ajax call in the form of a JSON

What is the process for importing unpkg url-join.js using the <script src=...> tag?

Tips for utilizing method overload in TypeScript with a basic object?

The reverse pagination feature of SwipeRanger is incredible for navigating through

What steps can be taken to address the InvalidPipeArgument error when working with dates?

"Experience the power of MVC single page CRUD operations paired with dynamic grid functionality