Question

我有一个文字对象做某事，这个对象必须在使用任何方法之前为变量分配一些初始数据。

var slideshow = {

    slideshowBox: null,
    slideImages: null,
    slideImagesLen: 0,

    init: function(){
        this.slideshowBox = document.getElementById('slideshow');
        this.slideImages = document.getElementById('images');
        this.slideImagesLen = this.slideImages.children.length;
    },
    show: function(){
        return this.slideImagesLen;
    }

};

但是当使用它的任何方法时你必须首先使用init方法然后使用我可以使用任何其他方法，但这种行为并不好。

slideshow.init()
console.log(slideshow.show());

此外，我尝试使用以下方式：

(function(){   
    var slideshow = {

        slideshowBox: null,
        slideImages: null,
        slideImagesLen: 0,

        init: function(){
            this.slideshowBox = document.getElementById('slideshow');
            this.slideImages = document.getElementById('images');
            this.slideImagesLen = this.slideImages.children.length;
        },
        show: function(){
            return this.slideImagesLen;
        }
    };
    slideshow.init();
})();

但是，有一些错误，例如this.slideImages is null，slideshow.show is not a function

我想在使用任何方法之前自动调用init方法，而无需手动调用。

Answer 1

你应该尝试在这里使用构造函数来进行原型继承。

(function(){
  var Slideshow = function () {
    this.slideshowBox = document.getElementById('slideshow');
    this.slideImages = document.getElementById('images');
    this.slideImagesLen = this.slideImages.children.length;
  };

  Slideshow.prototype.show = function () {
    return this.slideImagesLen;
  };

  var slideShowInstance = new Slideshow();
  slideShowInstance.show();

})();

我实际上会更进一步，使其更具可扩展性

  var Slideshow = function (slideShowId, images) {
    this.slideshowBox = slideShowId;
    this.slideImages = images;
    this.slideImagesLen = this.slideImages.children.length;
  };


  var slideShowId = document.getElementById('slideshow'),
      images = document.getElementById('images');

  var slideShowInstance = new Slideshow(slideShowId, images);

Answer 2

在函数Object中调用_slideshow后，尝试返回_slideshow.init slides

＆＃13;

var slides = function(options) {
  return (function(opts) {
  var _slideshow = opts || {

    slideshowBox: null,
    slideImages: null,
    slideImagesLen: 0,

    init: function() {
      this.slideshowBox = document.getElementById('slideshow');
      this.slideImages = document.getElementById('images');
      this.slideImagesLen = this.slideImages.children.length;
    },
    show: function() {
      return this.slideImagesLen;
    }

  };
  _slideshow.init();
  return Object.create(_slideshow)
}(options))
};

var slideshow = slides();

console.log("slideImagesLen:", slideshow.show(), "slideshow:", slideshow);

＆＃13;

<div id="slideshow">
  <div id="images">
    <img src="http://lorempixel.com/50/50/nature" />
  </div>
</div>

＆＃13;

Answer 3

有两种方法。例如：

var slideshow = {
        ...
    init: function () {
            ...
        return this;
    }
        ...
}.init();

或者，如果仍然过于手动，您只需在对象文字中使用IIFE：

var slideshow = {
        ...
    init: (function init () {
            ...
        return init;
    }())
        ...
}

在这两种情况下，在创建对象之前，引用的HTML元素必须存在。

如何在使用前将初始数据分配给文字对象中的某些变量

3 个答案: