OO JavaScript规避.call

Question

Take a look at the fiddle here

In the show function the JavaScript call method is used to make this refer to the container variable in my contactForm object. I think, I'm not too sure about the magic that makes this work. Can someone elucidate why this does work, and what a good alternative might be?

JS

 $(document).ready(function () {
            var contactForm = {
                container: $('#contact'),
                config: {
                    effect: 'slideToggle',
                    speed: 400
                },
                /*******************/
                init: function (config) {
                    $.extend(this.config, config);
                    $('<button>').text('Contact me')
                                 .attr('type', 'button')
                                 .insertAfter('#firstArticle')
                                 .on('click', this.show);
                   //currently only logic on the close button
                },
                /*******************/
                show: function () {
                    //using variable names to shorten up
                    var cf = contactForm,
                        container = cf.container,
                        config = cf.config;
                    if (container.is(':hidden')) {
                        cf.close.call(container);
                        container[config.effect](config.speed);
                    }
                },
                /*******************/
                close: function () {
                    var self = $(this);
                    if (self.find('span.close').length) {
                        return;
                    }
                    $('<span>').addClass('close')
                               .text('close')
                               .prependTo(this)
                               .on('click', function () {
                                   //self= span
                                   self[contactForm.config.effect](500)
                               });
                }
            };


            contactForm.init();

        });

Answer 1

There's no magic at all; that's just how call works. call lets you call a JavaScript function and manually specify the this value therein, followed by all of the parameters, listed out individually.

So

cf.close.call(container);

calls cf.close with the this value set to container . Hypothetically, this

cf.close.call(container, 1, 'b');

would do the same thing, except also pass in 1 and 'b' as parameters.

Call is very, very similar to apply , with the difference being that apply takes all parameters as an array, rather than being listed out individually. So the (hypothetical) second example would be the same as

cf.close.apply(container, [1, 'b']);

This can be incredibly useful when you want to call another function, set the this value, and wholesale pass all of the current function's arguments along for the ride. Ie

someFunction.apply(thisValue, arguments);