变量未定义，但我已在类中定义为属性

Question

我有以下代码：

使用Javascript：

slideShow = {
     ImgsFolder: "images/",
     ImgsSrc: ['img.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg'],
     MainElem: document.getElementById('SlideShow'),
     ImgElem: (this.MainElem.firstElementChild) ? this.MainElem.firstElementChild : this.MainElem.firstChild
     doit: function(){
          for (i = 0; i < this.ImgsSrc.length; i++) {
               document.writeln(this.ImgsFolder + this.ImgsSrc[i] + "<br/>");
               }
       }

  }

打印ImgElem变量的值时，会给出错误消息this.MainElem is undefined，并在最后一行显示问题。
我不知道这段代码中的问题是什么

Answer 1

要使用this关键字，您必须使用new关键字实例化对象。否则，在这种情况下，this关键字将指向window对象。

Answer 2

正如我在评论中提到的那样，无法从符号本身引用通过对象文字符号创建的对象。

您需要先完全创建对象，然后才能引用它。

slideShow = {
     ImgsFolder: "images/",
     ImgsSrc: ['img.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg'],
     MainElem: document.getElementById('SlideShow')
}

slideShow.ImgElem = slideshow.MainElem.firstElementChild ||
                    slideshow.MainElem.firstChild

---

要在创建过程中引用对象，您需要一个构造函数。

function SlideshowMaker() {
     this.ImgsFolder = "images/",
     this.ImgsSrc = ['img.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg'],
     this.MainElem = document.getElementById('SlideShow')

     this.ImgElem = this.MainElem.firstElementChild ||
                    this.MainElem.firstChild
}

 // use "new"----v----to create a new object
var slideshow = new SlideshowMaker()

Answer 3

当您使用{ key: value, ... }之类的对象文字时，实际上在解析/执行整个块之后创建对象。

var a = {
  // a is not defined here
  key: value
};
// it is defined here

此外，您不能使用this作为对要创建的对象的引用。 this只能用于对象的方法（绑定到对象的函数或在其上下文中执行的函数）。

您有两种选择：

1。）您需要创建一个getter函数，例如

var a = {
  b: value,
  c: function () { return this.b.c; }
};

并调用它以访问b.c：a.c()

2。）在你的情况下，更好的方法是在实际创建对象后定义属性ImgElem：

var slideShow = {
 MainElem: document.getElementById('SlideShow')
};
slideShow.ImgElem = slideShow.MainElem.firstElementChild || slideShow.MainElem.firstChild;

请注意使用slideShow代替this。

Answer 4

也许你错了一些括号？

var slideShow = {
ImgsFolder: "images/",
ImgsSrc: ['img.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg'],
MainElem: document.getElementById('SlideShow'),
ImgElem: (this.MainElem.firstElementChild ? this.MainElem.firstElementChild :   this.MainElem.firstChild)
}