javascript - 通过 p5 上的 setup() 内的 DOM 元素实例化对象

Question

我遇到一个问题，我试图使用回调在 p5 的 setup 函数中实例化一个对象:

这是与问题相关的 sketch.js 部分:

var g; //for graph instance
var dropzone; //for the file dropping area

function setup() {
    createCanvas(640, 480);

    dropzone = select('#dropzone'); //selects the <p> element I'm using as dropzone
    dropzone.drop(process_file, unhighlight); //unhighlight is just a function to make the drop area not-highlighted
}

function draw() {
    background(200);
    if (g) {
        g.show();
    }else{
        msg = "Please, load a file by dropping it in the box above";
        text(msg, width/2, height/2);
    }
}

// callback being used to process the text file content
function process_file(file){
    data = file.data; //gets file data(content)
    lines = data.split('\n'); // split the lines
    digraph = lines[0] == 1 ? true : false; // is it a digraph?
    v = int(lines[1]);
    g = Graph(digraph, v); //the class I"m using to instantiate the graph
    console.log(g); // <-- says undefined
    g.init_graph(); // initialize all vertices
    for (var i = 2; i < lines.length; i++) {
        edge = lines[i].split(' ');
        g.add_edge(edge[0], edge[1], edge[2]);
    }
}

我已经使用 console.log() 检查过，文件的内容已正确加载，并且这些值符合我的预期。 Graph() 类位于另一个文件中，但它与 sketch.js 一样被导入。我也尝试将导入的脚本放在页面末尾，但得到了相同的结果，g仍然显示undefined。

我没有尝试将 Graph 类的全部代码放入 sketch.js 文件中，但稍后我需要在该类上放入更多 15 个算法，所以草图文件将增长到不需要的大小。我认为通过将 g 声明为全局变量我不会有任何问题。

我对 JavaScript 相当缺乏经验，所以这可能是关于某种加载顺序的菜鸟错误，所以如果你回答这个问题，请告诉我为什么它不能按原样工作。如果需要任何其他代码，请告诉我。

提前致谢。

Answer 1

看这一行:

g = Graph(digraph, v);

我认为你的意思是这样做:

g = new Graph(digraph, v);

这会创建一个新实例，并将对该实例的引用存储在 g 变量中。