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

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; }
};

并调用它以访问bc ： ac()

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)
}