JavaScript:不调用构造函数

Question

有人可以解释一下为什么这不能按照我认为应该的方式工作(或者我忽略了什么)。

function Pane(data) {
    var state = {
        show: function(data) {
            var pane = document.querySelector('.pane[data-content='+data.target+']');
            pane.classList.add('active');
        },
        hide: function(data) {
            var pane = document.querySelector('.pane[data-content='+data.target+']');
            var paneSibling = $(pane.parentNode.childNodes);
            paneSibling.each(function(sibling) {
                if(check.isElement(sibling)) {
                    var isActive = sibling.classList.contains('active');
                    if(sibling != pane && isActive) {
                        sibling.classList.remove('active');
                    };
                };
            });
        }
    }
    return state;
}

所以我可以控制台日志 Pane(arg).show/hide 并将其记录为函数，那么为什么当我调用 Pane(arg).show 它什么也没做？对象中的函数起作用(在构造函数之外，在它们自己的函数中)。

Answer 1

该函数返回 state 对象，因此它永远不会返回构造的对象，即使与 new 一起使用也是如此。由于 state 包含这些方法，因此您只需调用该函数即可立即调用返回对象上的方法之一。

现在，如果您期望 show 和 hide 通过闭包自动访问 data，那么它不起作用，因为您通过声明方法参数来隐藏变量。您可以这样做:

function Pane(data) {
    var state = {
        show: function() {
            var data = data || arguments[0];
            var pane = document.querySelector('.pane[data-content='+data.target+']');
            pane.classList.add('active');
        },
        hide: function() {
            var data = data || arguments[0];
            var pane = document.querySelector('.pane[data-content='+data.target+']');
            var paneSibling = $(pane.parentNode.childNodes);
            paneSibling.each(function(sibling) {
                if(check.isElement(sibling)) {
                    var isActive = sibling.classList.contains('active');
                    if(sibling != pane && isActive) {
                        sibling.classList.remove('active');
                    };
                };
            });
        }
    }
    return state;
}

然后你可以像这样使用它:

Pane({}).show();

或者像这样:

var p = Pane();
p.show();

或者在需要时强制使用新参数:

p.show({foo:'bar'});