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

Question

I have an literal object which do something, this object must assigns some initial data to variables before use any of its methods.

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

};

But the problem when use any of its method you must firstly use init method then use I can use any of other methods, but this behavior is not good.

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

Also I have tried to use the following way:

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

But, there are some errors like this.slideImages is null , slideshow.show is not a function

I want any way to call init method automatically before use any method and without need to calls it manually.

Answer 1

you should try to use prototypal inheritance with a constructor here.

(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();

})();

I actually would go a bit further to make it more extendable

  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

Try returning Object _slideshow , after calling _slideshow.init within function slides

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

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

Answer 3

There are a couple of ways. For example:

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

Or if that's still too manual, you can simply use an IIFE within the object literal:

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

In both cases the referred HTML elements must exist before creating the object.