Javascript TypeError is not a function issue

Question

Run into a JavaScript issue that I can't understand. I'm making a JavaScript "class" that is supposed to draw some things on a canvas, and if the window gets resized, it's supposed to know how to resize the canvas on its own and fix orientation for the drawn objects.

Everything seems to work fine when I use this class from my own test html, but when I extracted my class into a separate .js file to be added as <script src="myclass.js"></script> for other people's usage, it starts throwing a "TypeError: this.func02 is not a function" error upon resize. This is annoying because this.func02 clearly is a function.

Also, there's a ticker constantly calling func03, and in the console I can clearly see logs being printed out periodically (those logs happen from func01, which is called by func03, in the exact same way that func02 calls it). Those logs keep working even after a TypeError showing up whenever I resize.

The JS:

function myClass() {
    this.func01 = function() {
      console.log("func1");
      //do stuff
    }
    this.func02 = function() { //<- this doesn't work ???
      this.func01();
      //and do more stuff
    }
    this.func03 = function() { //<- this works ???
      this.func01();
      //stuff
    }
    window.addEventListener("resize", this.func02, false);
}

function useMe() {
    objectOfMyClass = new myClass();
    setInterval(tickerThatCallsFunc03ofMyClass, 50);
}

If anybody has any idea why this happens, please write stuff. I'm stumped on debugging this. I tried to remove all irrelevant code from my program, if you need more information post and I'll add it.

Note: the problem here isn't the keyword "this". Maybe it's part of the problem, but it's not all of it. The exact code works when it's in one file with the html, but doesn't work when it's added to the html with

my actual code is several thousands of lines and uses a lot of external assets to draw images as well as createjs and jquery, I'd rather not post it on fiddle... I think the key of the problem here is maybe not the code itself but rather me using it externally wrong? the exact code works fine inside an html, but if I delete it from the html and replace with and put everything that was originally between — Aqo, May 17 '16 at 13:11
Possible duplicate of [How does the "this" keyword work?](http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Andreas, May 17 '16 at 13:16
Are you sure that mycode.js is loaded before you create an object and call a function? — mirage, May 17 '16 at 13:19
please add the code and/or provide a jsfiddle (create at jsfiddle.net) — Rachel Gallen, May 17 '16 at 13:25
how can I check if it loaded? can I apply onload to src lines somehow? — Aqo, May 17 '16 at 13:25
Put your other code inside: $(function() { // HERE }); ( if you are using jquery ) Or put the before the other code... — mirage, May 17 '16 at 13:26
well, it *is* before the other code. it's right in the beginning of the html. it does let me instantiate an object of my class. actually I should've realized this earlier, the fact that it does means it's fully loaded. I did a console log on the object and it gives me all the attributes and functions of it. — Aqo, May 17 '16 at 13:29

score 0 · Accepted Answer · answered May 17 '16 at 13:29

this is inside of a function is referencing the function not the class to save a reference to the class and use that within a function:

function myClass() {
    var myclass = this;
    this.func01 = function() {
          console.log("func1");
          //do stuff
    }
    this.func02 = function() { //<- this doesn't work ???
        myclass.func01(); //<- I get typeError on this call
        //and do more stuff
    }
    this.func03 = function() { //<- this works ???
        myclass.func01();
        //stuff
    }
    window.addEventListener("resize", this.func02, false);
}

function useMe() {
    objectOfMyClass = new myClass();
    setInterval(tickerThatCallsFunc03ofMyClass, 50);
}

so I tried and this actually solved my problem. thanks. what I don't get is why func03 manages to call func01 if this is the case. and also why the whole thing worked before I moved it to another file... — Aqo, May 17 '16 at 13:34

Javascript TypeError is not a function issue

1 Answers1