使用类Getter访问数组元素时触发Uncaught TypeError错误求助

Uncaught TypeError: slideshows[i].images[slideshows[i].shownImage] is undefined

用户代码如下：

let slideshows = [];

class slideshow{
    constructor(images){
        this._images = images;
        this._shownImage = 0;
    }

    get images() {return this._images;}
    get shownImage() {return this._shownImage;}

    set images(images) {this._images = images;}
    set shownImage(shownImage) {this._shownImage = shownImage;}
}

// This function is called when the page has loaded in
function setupSlideshow(){
    // Create Array of all slideshows
    slideshowDivs = document.querySelectorAll("div.slideshow");
    for(i = 0; i < slideshowDivs.length; i++){
        slideshows.push(new slideshow(slideshowDivs[i].querySelectorAll("slideshow-image")));
    }

    // Show Active Image
    for(i = 0; i < slideshows.length; i++){
        slideshows[i].images[slideshows[i].shownImage].style.display = 'block';
        // The line above this one triggers the error
    }
}

用户猜测：语法没有问题，但JS类开发经验不足，猜测可能是JS无法识别slideshows[i]为slideshow类实例，因此未调用类中声明的方法。

问题原因与修复方案 #

• DOM选择器错误
  querySelectorAll("slideshow-image")是在选择自定义标签<slideshow-image>，如果你的图片实际是用<img>标签或带类名的元素实现，这个选择器会返回空的NodeList。当images为空时，images[0]自然是undefined，触发错误。
  修复：根据实际HTML结构修改选择器，比如图片是带类名的<img>，就改成slideshowDivs[i].querySelectorAll("img.slideshow-image")；如果确实使用自定义标签，确保HTML中存在<slideshow-image>元素。

• 未检查images是否为空
  即使选择器正确，也可能存在某个幻灯片容器下没有图片的情况，直接访问images[shownImage]会报错。
  修复：在访问前增加判断逻辑：

  for(let i = 0; i < slideshows.length; i++){
      const currentSlideshow = slideshows[i];
      if (currentSlideshow.images.length > 0) {
          currentSlideshow.images[currentSlideshow.shownImage].style.display = 'block';
      }
  }
  

• 变量未声明导致全局污染
  slideshowDivs和循环中的i都没有用let/const声明，会成为全局变量，可能引发意外问题。
  修复：补充变量声明：

  function setupSlideshow(){
      // Create Array of all slideshows
      const slideshowDivs = document.querySelectorAll("div.slideshow");
      for(let i = 0; i < slideshowDivs.length; i++){
          slideshows.push(new slideshow(slideshowDivs[i].querySelectorAll("slideshow-image")));
      }
  
      // Show Active Image
      for(let i = 0; i < slideshows.length; i++){
          const currentSlideshow = slideshows[i];
          if (currentSlideshow.images.length > 0) {
              currentSlideshow.images[currentSlideshow.shownImage].style.display = 'block';
          }
      }
  }
  

• 关于类实例的误解
  你的猜测不成立，slideshows[i]确实是slideshow类的实例——因为你通过new slideshow()创建并推入数组，JS完全能识别并调用类的getter方法。错误核心是images为空或索引越界，和类方法调用无关。

内容的提问来源于stack exchange，提问作者RattatAndyGo