javascript - 变量未定义，但我已定义为类中的属性

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