如何在使用之前将初始数据赋值给文字对象中的一些变量

How can I assign initial data to some variables in literal object before use

本文关键字：对象 文字 赋值 变量 数据      更新时间：2023-09-26

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

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方法，而不需要手动调用它。

你应该尝试在构造函数中使用原型继承。

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

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

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>

有几种方法。例如:

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

或者如果仍然太手动，您可以简单地在对象文字中使用IIFE:

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

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

相关文章：