学习 JS 的 Try-Catch-Final & Return

根据try/catch和finally中是否有return语句, 可以分为以下几种情况:

try/catch 和 finally 中都没有 return

按照正常的执行顺序, 先执行try中的代码, 如果有异常则执行catch中的代码, 最后执行finally中的代码

const fn = () => {
    let v = 1
    try {
        v += 1
        throw new Error('error')
    } catch (err) {
        v += 1
    } finally {
        v += 1
    }
    return v
}
fn()  // 4

try/catch 中没有 return, finally 中有 return

finally本身已经是最后执行的, 所以其中的return对整个函数的返回值没有影响

const fn = () => {
    let v = 1
    try {
        v += 1
        throw new Error('error')
    } catch (err) {
        v += 1
    } finally {
        v += 1
        return v
    }
}
fn()  // 4

try/catch 中有 return, finally 中没有 return

由于finally在try/catch后一定会执行, 所以finally中的语句可能会对try/catch中的return语句产生影响

具体表现为:

在return时已经确定了返回的内容(值或引用)
finally中对原变量的修改不会影响return的内容
finally中对同一引用的修改会影响return的内容

// 对原变量的修改不会影响返回值
const fn1 = () => {
    let v = ''
    try {
        v += 'try'
        return v
    } catch (err) {
        v += 'catch'
    } finally {
        v += 'finally'
    }
}
fn1()  // 'try'
 
// 对同一引用的修改会影响返回值
const fn2 = () => {
    let obj = { v: 1 }
    try {
        obj.v = 2
        throw new Error('error')
    } catch (err) {
        obj.v = 3
        return obj
    } finally {
        obj.v = 4
    }
}
console.log(fn2())  // { v: 4 }
console.log(fn2().v)  // 4

try/catch 和 finally 中都有 return

finally中的return会覆盖try/catch中的return

const fn = () => {
    try {
        return 1
    } finally {
        return 2
    }
}
fn()  // 2

References

MDN - try…catch