JavaScript - 实例化同一类的多个对象答案

【问题标题】：JavaScript - instantiate multiple objects of the same classJavaScript - 实例化同一类的多个对象
【发布时间】：2015-05-09 21:15:26
【问题描述】：

我一直在尝试更好地组织我的 JavaScript/jQuery，但在处理对象时遇到了问题。

请看看这个JSFiddle

基本部分如下：

(function($){

    $.toast = function(params) {
         return new toast(params)
    }

    var toast = (function(params){
        var params = params;
         var show = function()  {
            // getToast() returns jQuery DOM object
            getToast().show();
        }

        // Public API
        return {
            show : show
        }

    });

}(jQuery));

$(document).ready(function(){
    var toast1 = $.toast(params);
    var toast2 = $.toast(params);
    toast1.show();
    toast2.show();
});

问题在于我在创建的对象上调用函数。在 $(document).ready() 函数中，我实例化了 2 个对象，然后我调用了 show()。

show() 方法只是更改显示属性。

然而，只有一个祝酒词显示。

我研究了实例化对象的不同方法，但无济于事。

我也移动了“新”关键字，也无济于事。

我开始使用对象文字来清洁 IS，但我无法将事件绑定到正确的对象。在将绑定函数应用于所有对象的地方发生了奇怪的事情。

我喜欢实例化 toast 的方式，所以如果可能的话，我希望 $(document).ready() 中的代码保持不变。

感谢任何/所有帮助，因为我可能需要朝着正确的方向前进。

干杯。

【问题讨论】：

你能贴出getToast()的代码吗？
看看fiddle，都在里面：）（只是我在手机上，打码太难了）
哦，好的。错过了小提琴。对不起。现在看。
那个return new toast 包装器完全没用。你的toast 函数返回一个对象，所以没有理由用new 调用它。只需将所有代码直接移动到 $.toast 内即可。
尝试在getToast的函数定义前添加var 。

标签： javascript jquery javascript-objects

【解决方案1】：

您将getToast 定义为全局函数，因为您缺少它前面的var 语句。所以应该是：

var getToast = function(){
};

【讨论】：

很好。我盯着那把小提琴看了太久。
*叹息...我只是新手，我会让自己看起来像个白痴！我认为有时你需要离开几个小时才能回去看到明显的东西。干杯

【解决方案2】：

在getToast，你有这件作品：

        getToast = function(){

            if ( $toast !== undefined ) return $toast;

            ...
        }

如果存在 $toast，则返回一个现有的 $toast，当创建第一个 toast 时，这样的对象存在并随后返回。从我收集的信息来看，这似乎是问题所在。

【讨论】：

【解决方案3】：

更改函数定义以返回唯一的 toast 不一样的 toast getToast().show();

(function($){

    $.toast = function(params) {
         return new toast(params)
    }

    var toast = (function(params){
        var params = params;
         var show = function()  {
            // getToast() returns jQuery DOM object
           //getToast().show();
             alert(params)
        }

        // Public API
        return {
            show : show
        }

    });

}(jQuery));


    var toast1 = $.toast('params1');
    var toast2 = $.toast('params2');
    toast1.show();
    toast2.show();

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：