When splitting my scenes into multiple .js files, I can no longer access anything through "this" and everything is undefined

[BrettMCoding]

Hi everybody! Fairly new to programming, and having a blast making a game with Phaser 3. Everything has been going great so far, and I've cleared most hurdles through the docs, lab, google, and all of the helpful things people post online. I have some gameplay starting to form, and I got to a point where I wanted to add new scenes in new .js files. First a start menu, then a game over, and maybe a loader later?

Either way, my structure looked like this:

 

index.html
|-main.js
  |-player.js
  |-words.js

And barring some hiccups from not knowing everything I am doing and learning along the way, I got that working great by passing (scene) arg into player/words.

I have been accessing and storing everything in my scene as variants of this.foo. Functions are added below update()

Accessing player.js and words.js using this.Player = new Player(scene, x, y) and this.words etc works fine.

 

But when I do this:
 

index.html
|-main.js
  |-GameScene.js
    |-player.js
    |-words.js

 

Everything goes undefined after the game starts. If I throw a debugger in anywhere in GameScene and refresh my server, everything is accessible as I want it to be. If I open the console and pause the script AFTER it's started, nothing is accessible to me.

I've googled and read about this every which way. The only leads I have are that when I pause the script with my unmodulated game, my local scope is Scene. When I pause it with the modulated scene, the local scope is Window.

I also saw a couple of posts suggesting I need to learn how to use webpack, and that JS modules are complicated. But having player/words out of main.js was working. What am I missing?

If you think you can help, but you'd like to see some code or I'm not enough information please let me know!

Thanks,
Brett

[cornstipated]

the code would definitely help but it might be something as simple as trying to use something you have not loaded yet. IE scene.js references player.js but player.js is loaded after scene.js   (the order of the script elements matter)

[BrettMCoding]

I figured out what was happening. If I call a function from inside one of the Phaser main functions (like update), "this" inside the function would no longer reference the GameScene. So everything initialized fine, but then the functions wouldn't work. This is what was happening with player/words, and I just passed scene. But I did not understand that I would lose "this" scope if I went 2 functions deep. So I just had to pass "this" as "scene" into all the functions I made below update() 

I also just needed a night of sleep and a day away.

If anyone else reads through this, and sees something in my reasoning that should be clarified, please let me know! I'm still learning. Is passing CallFunc(x, y, this) bad practice?

I see there are other methods possible.
https://stackoverflow.com/questions/7890685/referencing-this-inside-setinterval-settimeout-within-object-prototype-methods