当给定私有变量作为参数时，Path.join 抛出异常

Question

我正在尝试使用 Electron，我试图加载一个 html 文件，并将该文件的路径存储在一个私有变量中。参考下面的代码。

但是 Path.join 失败并出现此错误：

但是，如果我传递具有相同值的字符串文字，它可以工作。

非工作代码：

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))
    }
}

工作代码：

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'))
    }
}

这对我来说没有任何意义，只会增加我对任何包含 javascript 的东西的挫败感。感觉就像一架随时可能自行消失的怪异超音速飞机……

我确实检查了它是否是一些奇怪的打字稿编译错误，但不是，我选择哪个 javascript 版本都没有关系，结果是一样的。编译后的代码是这样的，我也看不出有什么问题：

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));
    }
}

Answer 1

经典范围错误：仅仅因为您从this 中提取ready，并不意味着this.ready 具有任何定义的范围，它只是一个裸函数。

因此，当您调用this.app.on('ready', this.onReady) 时，您并不是在告诉JS 在声明时保留this 关键字的含义。相反，JS 在运行您的函数后遇到的任何this 的使用都将是“无论执行时时的范围是什么”，并且当事件处理代码触发时，这将是全局的范围而不是您的类实例。

非常简单的解决方案：这就是我们发明箭头函数的目的。

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

完成，当这个函数被执行时，它的this 仍然和声明时一样。