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

Question

菜鸟问题，我确定。要温柔。 （或者不会，这不会杀死我）。

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

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

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（）`，则会收到提到的错误。

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