Question

我有以下代码 -

jQuery(document).ready(function() {
   var objDemo = new DemoPlugin();
   objDemo.Insert();
});

var DemoPlugin = (function() {
    function DemoPlugin() {
        this.Name = "XXXXX";
        this.Email = "xxxxx@osmosys.asia";
    }

    var makeAjaxCall = function(methodToCall, dataTo, msg, cB, scMsg, errMsg) {
        var wpAction = 'handleRequests';
        msg = msg ? msg : "Loading...";
        scMsg = scMsg ? scMsg : "The operation was successful.";
        errMsg = errMsg ? errMsg
                : "There was an error while perfomring the operation.";
        var dataToSend = {
            action : wpAction,
            dataToProcess : {
                method : methodToCall,
                data : dataTo
            }
        };
        try {
            jQuery.post(WpAjax.ajaxurl, dataToSend, function(response) {
                console.log(response);
                if (cB) {
                    cB(response);
                }
                return;
            });
        } catch (err) {
            console.log(err);
        }
    };

    DemoPlugin.prototype.Insert = function() {
        console.log(this);
        makeAjaxCall('insertContacts', this, 'Inserting Contact');
    };

    return DemoPlugin;
}());

当我在没有jQuery.post部分的情况下运行这段代码时，该函数运行正常。但是当包含jQuery.post时，Prototype Insert方法被调用两次，makeAjaxCall方法也会被调用，然后导致提到的错误。第二次调用Insert和makeAjaxCall方法时，这指的是窗口对象。

我无法确定原因。我的代码设计有什么问题吗？

WpAjaxUrl由WordPress wp_localize_script

定义

以下是jsFiddle重现此问题。

如果您注意到，在Insert方法中的ACCESS ORIGIN ERROR之前，我正在记录this。第一次引用DemoPlugin是正确的，但第二次它引用了窗口对象。

Answer 1

由于Insert是DemoPlugin的成员，因此jQuery.post会调用它。

修改jsFiddle就可以证明这一点。在这里，我们甚至没有直接调用Insert。相反，它由jQuery.post调用：

jQuery(document).ready(function () {
    var objDemo = new DemoPlugin();
    jQuery.post('/echo/json/',objDemo);
    //objDemo.Insert();
});

控制台证明仍然调用Insert：

In Insert: Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

当jQuery.post尝试将this转换为JSON字符串时，它似乎在调用Insert。这是由Window对象完成的，这可以解释为什么重复调用它，因为Window包含对自身的引用。尝试stringify引用自身的对象会导致无限递归。

解决此问题的最简单方法可能是将Insert写为非成员函数。

超出最大调用堆栈大小 - 重复调用方法

1 个答案: