JavaScript - instantiate multiple objects of the same class

Question

I have been attempting to organise my JavaScript/jQuery somewhat better, but am having trouble with objects.

Please take a look at this JSFiddle

The fundamental pieces are as follows:

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

The trouble lies where I am calling a function on the object(s) created. Within the $(document).ready() function, I instantiate 2 objects, which I then call show() on.

The show() method simply changes the display property.

Only one of the toasts shows, however.

I've looked into different ways of instantiating the objects to no avail.

I've also moved around the "new" keyword, also to no avail.

I started my journey to cleaner IS with object literals, but I had trouble binding events to the correct object. Done weird stuff was happening where the bound function was being applied to all objects.

I like the way I instantiate the toasts, so I'd like for the code within the $(document).ready() to stay the same, if possible.

Any/all help is appreciated as I probably need a jolt in the right direction.

Cheers.

Take a look at the fiddle, it's all in there :) (it's just that I'm on my mobile and it's very hard to type code) — Josh-Mason
– Josh-Mason, Commented May 9, 2015 at 21:19
That return new toast wrapper is completely useless. Your toast function returns an object, so there's no reason to call it with new. Just move all your code directly inside of $.toast. — Bergi
– Bergi, Commented May 9, 2015 at 21:23
try to add var before the function definition of getToast. — basilikum
– basilikum, Commented May 9, 2015 at 21:27

basilikum · Accepted Answer · 2015-05-09 21:34:21Z

2

Your defining getToast as a global function since you are missing the var statement in front of it. So it should be:

var getToast = function(){
};

edited May 9, 2015 at 21:34

answered May 9, 2015 at 21:30

basilikum

10.5k5 gold badges49 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

azium Over a year ago

Ha nice. I was staring at that fiddle for too long.

Josh-Mason Over a year ago

*sigh...I just new I'd make myself look like an idiot!!! I think sometimes you need to leave a couple of hours before you can go back and see the obvious. Cheers

xiix · Accepted Answer · 2015-05-09 21:26:53Z

0

In getToast, you have this piece:

        getToast = function(){

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

            ...
        }

This returns an existing $toast if there is one, and when the first toast is created, such an object exists and is subsequently returned. This appears to be the problem, from what I gather.

edited May 9, 2015 at 21:26

answered May 9, 2015 at 21:20

xiix

1629 bronze badges

Comments

vinayakj · Accepted Answer · 2015-05-09 21:38:07Z

0

Change function definition to return the unique toast not same toast of 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();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered May 9, 2015 at 21:38

vinayakj

5,7013 gold badges30 silver badges49 bronze badges

Collectives™ on Stack Overflow

JavaScript - instantiate multiple objects of the same class

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related