有没有更简单的方法从 class 中引用 Javascript class 方法？

Question

我没有 javascript 编码背景，我习惯做的一件事是将代码封装在 class.

中

所以我有一个 class 文件并且它可以工作，但是对 this. 的不断引用缺乏某种优雅这让我觉得我是以错误的方式做事。特别是当我尝试从方法中的代码“级别”内引用 this. 并且我必须在局部变量中携带引用以使其工作时。

下面是我所拥有的示例

class catalogue {

    constructor () {

        this.currentDoc = null;
        this.dataDirectory = "data/";

    }
    
    loadJSON(filepath) {
        // there is actual code in the real class
    }
    
    loadHTML(filePath) {
        // there is actual code in the real class
    }
    
    loadExternalData() {

        let filePath = `${this.dataDirectory}${this.currentDoc.filepath}`;
        let dataIsJson = this.currentDoc.filepath.indexOf('.json') != -1;

        let me = this; // this again :-(
        
        if (dataIsJson) {
            me.loadJSON(filePath);
        } else {
            me.loadHTML(filePath);
        }

    }
    
}

从创建 class 实例的代码调用 loadExternalData() 方法。然后确定如何加载所需的数据，并根据数据类型调用各种方法。

回到 'old days' 时，我会将对 class 的引用存储为 class 的属性，然后使用它来调用方法。主要问题是，正如我们所知，this. 是上下文相关的，一旦您使用条件或任何类似上下文的内容，由于某些奇怪的原因，更改和 this. 对我的 class 了。

所以所有这些让我觉得我没有按照 Javascripty 的方式做事。

是否有更简单的方法来引用方法和属性而不使用 this. 或者我是否需要重新编写代码？

Answer 1

你所做的是完全正常和普遍的。如果你担心什么：

The main problem is that, as we know, this. is contextual and as soon as you use a conditional or anything similar the context, for some bizarre reason, changes and this. is not useful to my class any more.

一个非常简单的调整是使用箭头函数 class 字段来代替，这样 this 将始终引用实例，而不必担心调用上下文的变化。

class catalogue {
    constructor () {

        this.currentDoc = null;
        this.dataDirectory = "data/";
    }
    loadJSON = (filepath) => {
        // there is actual code in the real class
    }
    loadHTML = (filePath) => {
        // there is actual code in the real class
    }
    loadExternalData = () =>  {
        let filePath = `${this.dataDirectory}${this.currentDoc.filepath}`;
        let dataIsJson = this.currentDoc.filepath.indexOf('.json') != -1;
        if (dataIsJson) {
            this.loadJSON(filePath);
        } else {
            this.loadHTML(filePath);
        }

    }
    
}

Is there an easier way to refer to methods and properties without using this

不特别，但我想如果函数正确绑定到 this，您也可以先将它们提取到独立变量中，也许在函数的第一行。 IMO 这不是改进，而是 YMMV。例如

    loadExternalData() {
        let filePath = `${this.dataDirectory}${this.currentDoc.filepath}`;
        let dataIsJson = this.currentDoc.filepath.indexOf('.json') != -1;

可以更改为

    loadExternalData() {
        const { dataDirectory, currentDoc } = this;
        let filePath = `${dataDirectory}${currentDoc.filepath}`;
        let dataIsJson = currentDoc.filepath.indexOf('.json') != -1;

也可以将最后一行更改为

const dataIsJson = currentDoc.filePath.endsWith('.json');

准确地说。

有没有更简单的方法从 class 中引用 Javascript class 方法？

Is there an easier way to refer to Javascript class methods from within the class?

javascript

class

this