JavaScript尝试捕获

Question

I'm looking at some code on a website that hides / shows content on a click.

    function expando() {
        try {
            if (document.getElementsByClassName) {
                var e = document.getElementsByClassName("expandlink"); 
                t = 0;
            } else {
                var e = document.querySelectorAll(".expandlink"),
                    t = 1;
            };
            if (null != e) {
                for (var a = 0; a < e.length; ++a) e[a].onclick = function() {
                    return OpenClose(this), !1
                };
                if (1 == t)
                    for (var a = 0; a < e.length; ++a) {
                        var n = e[a].href,
                            r = n.indexOf("#"),
                            i = n.substr(r + 1),
                            l = document.getElementById(i);
                        l.className = l.className + " expandtargetIE8"
                    }
            }
        } catch (o) {}
    }

    function OpenClose(e) {
        try {
            var t = e.href,
                a = t.indexOf("#"),
                n = t.substr(a + 1),
                r = document.getElementById(n);
            r.className = "expandtarget" === r.className ||
                "expandtarget expandtargetIE8" === r.className ?
                "expandtargeted" : "expandtarget expandtargetIE8",
                e.className = "expandlink" === e.className ?
                "expandlink expandlinked" : "expandlink"
        } catch (i) {}
    }
    window.onload = function() {
        expando()
    };

Here is the JS Fiddle.

https://jsfiddle.net/amykirst/3hbxwv1d/

I've never seen the JavaScript try...catch statement. I looked at some tutorials, and they all say that they are for error testing. Why would it be used here?

It doesn't look like the catch actually does anything.

Note: this code had been minified. I used an online tool to unminify it.

Answer 1

The try..catch block here is used for error handling. It's used here to allow the code to continue normal execution if an error does arise.

Not all browsers will support both document.getElementsByClassName and document.querySelectorAll . On a browser which doesn't support either, we'd get the following error:

Uncaught TypeError: document.querySelectorAll is not a function

...and further code execution would stop.

However with a try..catch block here, the code instead wouldn't alert us about the error at all (at least, not without inspecting o within the catch block). Execution would continue as normal. It's no longer an uncaught error, it's a caught error which simply has nothing done with it.

If in the same browser we're to adjust the above code to log o within the catch block:

... } catch (o) { console.log(o) }

The same message shown above would be displayed on the console, without the "uncaught" part:

TypeError: document.querySelectorAll is not a function(…)

Answer 2

Actually there are few real use case of try-catch.

1. Error handling : Your JS function/statements may throw error, like TypeError (Accessing undefined,null) , JsonParseError etc. Sometimes you need that to be handled, so that next set of statements has to be executed. If it is not handled, the JS engine will throw it and halts the function execution.

2. Getting meaningfull information from multiple function call stack : You may get into situation, in legacy codes, that function f1 is calling f2 and f2 calling f3 and so on. You may want to do some validation check and if validation fails you may like to stop the flow and show meaningfull error message. (like saying, invalid state). To handle this kind of scenario, we can handle with Custom Exception.

    function ValidationError(message) { this.name = "IocError"; this.message = (message || "Validation/System Error"); } ValidationError.prototype = Error.prototype; 

   we can throw the custom error, if we see any validation error, like throw new ValidationError('Rule is missing...') in the function f3.

    try { ... } catch(e) { if(e instanceof ValidationError) { infoBox(e.message); return false; } else { //This is not validation error, some other unknown issue has occurred throw e; } } 

   We will use the above block to catch the exception in function f1 and if it is of type ValidationError, we'll display proper error message. If it as any other type we'll throw back for future debug purpose.