调用chekPersonalNumber时try/catch未触发catch分支问题求解

问题原因 #

你在按钮点击的回调函数中，先单独调用了一次chekPersonalNumber()，这次调用没有被try/catch逻辑包裹。当校验不通过时，函数抛出的错误会直接终止代码运行，后续的tryCatchChek()根本不会执行，因此你预期的catch分支逻辑自然不会触发。

解决方法 #

直接删除点击回调中多余的chekPersonalNumber()调用即可，tryCatchChek()内部已经包含了对该校验函数的调用，且已经做了异常捕获处理。

修正后的完整代码 #

document.querySelector('button').addEventListener('click', function() {
    // 移除多余的无捕获校验调用
    tryCatchChek();
});


function chekPersonalNumber () {
    let personalNumber = document.querySelector('#personal_number').value;
    if(personalNumber.length !== 11) {
        throw "length must be 11 symbols"
    }
    return true;
}

function tryCatchChek () {
    try {
        chekPersonalNumber ()
        console.log("working")
        document.querySelector('#trueOrFalse').innerHTML = 'true'
        document.querySelector('#trueOrFalse').classList.add("true")

    } catch (e) {
        console.log ("doesnt working")
        document.querySelector('#trueOrFalse').innerHTML = 'false'
        document.querySelector('#trueOrFalse').classList.add("false")
    }
}

补充说明 #

如果你有需要在校验函数执行前做其他逻辑的场景，也可以把所有调用chekPersonalNumber()的逻辑都放在try块内，避免无捕获的抛出错误打断代码执行。

内容的提问来源于stack exchange，提问作者Soso Sosiashvili