Method called from another method in the same class not working

[drezzia]

 

I am calling a method from another method in the same class but its showing undefined function.

    
     

class Store {


    show_price() {
        

        alert("Well done , dude!!!");


}

    //another method
    fast_selling() {


     //works here
    // this.show_price();

        

          let obj = {"0":"zero","1":"one"}

          let data;

          let index = 0;

          let html ="";

$("#more").click(function () {


            let el = $(this);   

            const more = (index) => {
     
                for (let i = 1; i <= 4; i++) {
                 
                    data = obj[index];

                    if (data === undefined && i > 1) {
                        continue;
                    } //condition 1

                  
                    if (data === undefined && i === 1) {
                        //change page number to 1
                        el.find(".pageNo").html(1);
                        //index of first element of page 1
                        index = 0;

                        //remove conteent of htmlm
                        html = "";

                        //re run loop
                        more(index);

                        return;
                    } //condition

                    

                    index++;
                } //for loop

                //display product
                $("#fs-wrap").html(html);

                return true;


            }; //end more()

            //run function to load more
            let load = more(index);

            if (load == true) {
                //update page
                el.find(".pageNo").text(next_page);
            }

            //doesnt work here
            this.show_price();
        });
    } 
} //class store


const store = new Store();


store.fast_selling() 

    

Now when I want to use the fast_selling, all works fine except that I can't access that show_price() method.  But when I call it at the first code after fast_selling() method it works.

    

I get an error that states that the show_price method is undefined.

 

Edited August 19, 2022 by drezzia

[eaglehopes]

Maybe your problem is scope problem of "this" keyword. When you used this you showed what, I think it shows function you defined when user clicked?

For more detailed explanation please look here : tutorial about scope of this keyword in Javascript

If you defined show_price() method for class Store, you can use it only for instances of Store class objects as you did at the end of the code. I managed to make your code to work like by sending store object to fast_selling method as parameter like that :

   fast_selling(store) { // I get Store class object that is instantiated
     //works here
    // this.show_price();
          //.... your code here
            //doesnt work here
            store.show_price();
        
    } 
} //class store

const store = new Store();
store.fast_selling(store);  // send store object as parameter to fast_selling method

or you can use call() or apply() methods to work it like that :

 

class Store {
    show_price() {
        alert("Well done , dude!!!");
}
    //another method
    fast_selling() {
     //works here
    // this.show_price();
          
            //doesnt work here
            this.show_price();
        
    } 
} //class store

const store = new Store();
store.fast_selling().call(store);  // show what is the scope of this in fast_selling() method

 

Edited August 19, 2022 by eaglehopes
add reference and another solution method

[requinix]

To be a little more clear about what I think eaglehopes is saying:

The "this" in your code here

let el = $(this);

is not going to be the same "this" that was your Store object. You already know that: it will be the element that was clicked. However, later you then try to do

this.show_price();

"this" is going to be the exact same one as it before.

If you want to remember which Store object you're running with, assign "this" to a variable outside the click handler (where it will be the Store object) then reference that variable inside it.

[drezzia]

Yeah thanks. I later solved it .  At the beginning of the function I added this line below

const self = this; 

 

So this.show_price(); becomes

self.show_price();