jQuery 方法抛出新错误 - 未被外部 try/catch 块捕获

Question

我开始向我的 javascript 对象添加错误处理，这些对象经常使用 jQuery。 我遇到的问题是，当我从 jQuery 方法中抛出新错误时——它没有被包装 jquery 调用的 catch 语句捕获——它只是抛出标准错误，但不会作为日志消息登录到控制台。这是一个例子：

var MyNamespace = MyNamespace || {};

MyNamespace.Page = function() {};

MyNamespace.Page.prototype = {

    callPage : function() {

        "use strict";

        $(document).on('change', 'select', function(event) {

            event.preventDefault();
            event.stopPropagation();

            throw new Error('callPage method failed');

        });

    },

    init : function() {

        "use strict";

        try {

            this.callPage();

        } catch(errorMessage) {

            console.log('Error : ' + errorMessage);

        }

    }

};

当我用 try / catch 包装回调函数的内容时，它就起作用了：

$(document).on('change', 'select', function(event) {

    try {

        event.preventDefault();
        event.stopPropagation();

        throw new Error('callPage method failed');

    } catch(errorMessage) {

        console.log('Error : ' + errorMessage);

    }

});

知道如何简化这一点以及为什么会这样吗？

Answer 1

在第一个示例中，try/catch 保护设置事件处理程序的代码，而不是事件处理程序本身的主体。该代码在触发事件之前不会运行，此时执行早已离开try 块。

考虑这个等价的例子：

try {
    var foo = function() {
        throw new Error("foo error");
    }
}
catch (error) {
}

foo();

您不会期望调用 foo 导致的错误会被捕获，因为在定义 foo 时执行是在 try 块内。

一种解决方案当然是在可能抛出的函数体内使用try/catch，如您所展示的。另一种解决方案是创建一个可重用的“捕获包装器”函数，可能是这样的：

function catchIfException(func, handler) {
    return function() {
        try {
            var args = Array.prototype.slice.call(arguments);
            func.apply(this, args);
        }
        catch (error) {
            handler(error);
        }
    };
}


$(document).on('change', 'select', 
    catchIfException(
        function(event) {
            event.preventDefault();
            event.stopPropagation();

            throw new Error('callPage method failed');
        }, 
        function(error) {
            console.log("error: " + error);
        }
    );
);