I'm experimenting with Electron and I was trying to load an html file, and I store the path to that file in a private variable. Refer to code below.

However Path.join fails with this error:

BUT if I pass a string literal with the same value it works.

Non-working code:

import * as Electron from 'electron'
import * as Path from 'path'
import { Option, Some, None } from './option'

export default class Main
{
    private indexFilePath = 'index.html'
    private app: Electron.App
    private browserWindow: Option<Electron.BrowserWindow>

    constructor (app: Electron.App)
    {
        this.app = app
        this.browserWindow = new None()
        this.app.on('ready', this.onReady)
    }

    private onReady(): void
    {
        this.browserWindow = new Some(new Electron.BrowserWindow({
            width: 800,
            height: 600
        }))
        this.browserWindow.unwrap().loadFile(Path.join(__dirname, this.indexFilePath))
    }
}

Working code:

import * as Electron from 'electron'
import * as Path from 'path'
import { Option, Some, None } from './option'

export default class Main
{
    private app: Electron.App
    private browserWindow: Option<Electron.BrowserWindow>

    constructor (app: Electron.App)
    {
        this.app = app
        this.browserWindow = new None()
        this.app.on('ready', this.onReady)
    }

    private onReady(): void
    {
        this.browserWindow = new Some(new Electron.BrowserWindow({
            width: 800,
            height: 600
        }))
        this.browserWindow.unwrap().loadFile(Path.join(__dirname, 'index.html'))
    }
}

This doesn't make any sense to me and just increases my frustration with anything that has javascript in it. It feels like a whacky supersonic plane that could obliterate itself at any moment...

I did check if it was some weird typescript compilation error but no, doesn't matter which javascript version I choose the result is the same. Compiled code looks like this, I see nothing wrong with it either:

class Main {
    constructor(app) {
        this.indexFilePath = 'index.html';
        this.app = app;
        this.browserWindow = new option_1.None();
        this.app.on('ready', this.onReady);
    }
    onReady() {
        this.browserWindow = new option_1.Some(new Electron.BrowserWindow({
            width: 800,
            height: 600
        }));
        this.browserWindow.unwrap().loadFile(Path.join(__dirname, this.indexFilePath));
    }
}

CodePudding user response：

Classic scoping error: just because you're pulling ready from this, does not mean that this.ready has any defined scope, it's just a bare function.

So, when you call this.app.on('ready', this.onReady), you are not telling JS to preserve the meaning of the this keyword at the time of declaration. Instead, any use of this that JS encounters once it runs your function will be "whatever the scope is at the time of execution", and when the event handling code triggers, that will be the global scope instead of your class instance.

Pretty simple solution: this is what we invented arrow functions for.

this.app.on('ready', () => this.onReady())

Done, when this function gets executed, its this is still the same as it was at declare time.