Question

看看小提琴here

在show函数中，JavaScript调用方法用于使this引用contactForm对象中的container变量。我想，我不太确定使这项工作变得神奇的魔力。有人可以解释为什么这样做有效，有什么好的替代方案可以吗？

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

根本没有魔力;这就是call的工作原理。 call允许您调用JavaScript函数并手动指定其中的this值，然后单独列出所有参数。

所以

cf.close.call(container);

调用cf.close，this值设置为container。假设，这个

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

会做同样的事情，除了还传入1和'b'作为参数。

调用与apply非常非常相似，区别在于apply将所有参数作为数组，而不是单独列出。因此（假设的）第二个例子与

相同

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

当你想调用另一个函数，设置这个值，并批量传递所有当前函数的参数时，这非常有用。即

someFunction.apply(thisValue, arguments);

OO JavaScript绕过.call

1 个答案: