我不断收到“未捕获的 ReferenceError：imgArray 未定义”错误答案

【问题标题】：I keep getting an "Uncaught ReferenceError: imgArray is not defined" error我不断收到“未捕获的 ReferenceError：imgArray 未定义”错误
【发布时间】：2019-03-31 09:49:38
【问题描述】：

我已经编写了一些代码作为对象来淡入和淡出一些图像，只有当我要求构建幻灯片时，我才会得到一个

“未捕获的 ReferenceError：未定义 imgArray”。

任何人都可以帮助我了解为什么会出现此错误。谢谢。

const slideShow = {
  curIndex: 0,
  imgDuration: 10000,
  slider: document.querySelector('.banner__slider').childNodes,

  imgArray: [
    'images/background/img3.jpg',
    'images/background/img1.jpg',
    'images/background/img2.jpg'
  ],

  buildSlideShow(arr) {
    for (i = 0; i < arr.length; i++) {
      const img = document.createElement('img');
      img.src = arr[i];
      slider.appendChild(img);
    }
  },

  slideShow() {

    function fadeIn(e) {
      e.className = "fadeIn";
    };

    function fadeOut(e) {
      e.className = "";
    };

    fadeOut(slider[curIndex]);
    curIndex++;
    if (curIndex === slider.length) {
      curIndex = 0;
    }

    fadeIn(slider[curIndex]);

    setTimeout(function () {
      slideShow();
    }, imgDuration);
  },
}; 

slideShow.buildSlideShow(imgArray).slideShow();

【问题讨论】：

标签： javascript arrays object

【解决方案1】：

您收到错误是因为代码中没有 imgArray 变量。您可以将其更改为：

slideShow.buildSlideShow(slideShow.imgArray).slideShow();

这解决了一个问题，但又产生了另一个问题。 buildSlideShow 方法不返回任何内容。因此，.slideShow() 方法将再次抛出错误。由于imgArray 是slideShow 对象的属性，您可以使用this 关键字。将方法更改为：

buildSlideShow() {

  for (i = 0; i < this.imgArray.length; i++) {
    const img = document.createElement('img');
    img.src = this.imgArray[i];
    slider.appendChild(img);
  }

  return this;
}

从buildSlideShow，使用return this 返回对象的实例。这样您就可以链接方法。

const slideShow = {
  curIndex: 0,
  imgDuration: 10000,
  // slider: document.querySelector('.banner__slider').childNodes,

  imgArray: [
    'images/background/img3.jpg',
    'images/background/img1.jpg',
    'images/background/img2.jpg'
  ],

  buildSlideShow() {
    console.log("inside buildSlideShow method");
    
    for (i = 0; i < this.imgArray.length; i++) {
      console.log(this.imgArray[i]);
      const img = document.createElement('img');
      img.src = this.imgArray[i];
      //slider.appendChild(img);
    }
    
    return this;
  },
  
  slideShow() {
    console.log("inside slideShow method")
  }
}

slideShow.buildSlideShow()
         .slideShow();

（我已经注释掉了slider代码）

【讨论】：

【解决方案2】：

imgArray 不是一个全局变量，它是对象slideShow 的属性。您应该将slideShow.imgArray 传递给函数

slideShow.buildSlideShow(slideShow.imgArray).slideShow();

并且还修复了 uildSlideShow(arr){...} 开头缺少的类型 b。应该是buildSlideShow(arr){...}

【讨论】：