从通过数组索引访问的对象中调用类方法

时间:2018-09-19 19:42:30

标签: javascript wavesurfer.js

菜鸟问题,我确定。要温柔。 (或者不会,这不会杀死我)。

也许答案已经发布了,但我在搜索中还没有识别出答案,但是这里有:

我有一个定义方法的类。我已经创建了该类的几个实例,并将它们保存在数组中。当我尝试访问类中定义的实例方法时,出现错误“无法读取属性”。如果将数组索引对象分配给变量并进行调用,则不会引发错误,但不会似乎按预期工作。也就是说,在我的循环中,似乎只为最后一次迭代分配了该方法。代码可能会有所帮助,令人尴尬的是:

class Track {

        constructor(path,docroot) {
                this.path = path;
                this.docroot = docroot;
        }

        urlpath() {
                var x = this.docroot.length;
                return this.path.substring(x);
        };

        createWave(id) {
                var url = this.urlpath();

                var wavesurfer = WaveSurfer.create({
                        container: '#' + id,
                        waveColor: 'violet',
                        progressColor: 'purple'
                });

                wavesurfer.load(url);
                return wavesurfer;
        }

}

for (i = 0; i < 2; i++) {
        tracks[i] = new Track(audiofiles[i],docroot);
        waves[i]  = tracks[i].createWave("wave-container-" + i);

        var w = waves[i];

        var playpausebtn       = document.createElement('BUTTON');
        playpausebtn.innerHTML = "Play / Pause";
        playpausebtn.id        = "playpause";
        document.getElementById('wave-container-' + i).appendChild(playpausebtn);
        document.getElementById('playpause').onclick = function() { w.playPause(); };
}

对于熟悉它的人,wavesurfer.js定义了waveurfer对象的playPause方法,由我的类方法中的createWave()返回。如果我用上面的w.playPause来调用它,它就可以工作-但仅适用于两个实例之一。如果我放弃var w = wave [i]分配,而只是尝试将onclick动作设置为Waves [i] .playPause()`,则会收到提到的错误。

我不知道这样做是否足够,但是希望您能提供任何指导或提示。

0 个答案:

没有答案