javascript - 如何重用对象文字

Question

我正在尝试重用我创建的对象以在页面上动态创建多个 slider 。我的想法是创建一个数组并根据需要经常将我的 slider 对象推送到那里，这样我就可以通过 id 访问它。不幸的是，它不起作用。希望有人能指出我正确的方向......

所以我有这个；

var slider = {
  "init":function(slide_it){
    this.parent = $(slide_it);
    /Count Elements and create a navigation depending on the count etc./
  },
  "otherstuff":{...}
}

在我的 (document).ready 函数中，我创建了一个数组并用不同的 slider 对象填充它，将 ID 添加到 accordion 并调用 init 函数:

var slide_array = [];
var accordion_sections = $('#accordion > div').length;
for(var i = 0; i < accordion_sections; i++){
  slide_array.push(slider);
  $('#accordion').children('div').eq(i).attr('id', 'slide_it_'+ i);
  slide_array[i].init($('#slide_it_' + i).find('.slider'));
}

然后我有一个带有 class="next"的按钮，我在 slider 中调用一个函数

$('.next').click(function(){
  slide_array[0].otherstuff();
});

我的计划是获取 .next 的父级及其 ID，以便我可以使用 slide_array[parentID].otherstuff();

但是...当我在 for 循环中多次调用 init 函数时，它无法正常工作。

更奇怪的是，有些函数调用似乎有效，其他的无效。我做错了什么？

Answer 1

您可以使用Object.create。

var s1 = Object.create(slider),
    s2 = Object.create(slider);

s1.init(...);
s2.init(...);

如果您从 init 返回 this，您将能够像这样链接:

var s1 = Object.create(slider).init(...);

但是在这一点上，我只想放弃对象文字并使用构造函数，因为这就是您所需要的。

function Slider(slide_it) {
    this.parent = $(slide_it);
}

Slider.prototype = {
    constructor: Slider,
    otherStuff: function () {}
};


var s1 = new Slider(...),
    s2 = new Slider(...);