try…catch…finally的执行顺序

一般使用try...catch进行异常捕获，当出错时保证代码正常执行。那么，你真正地了解try...catch...finally的执行顺序吗？

function getValue() {
  let count = 0;
  try {
    console.log('try ' + count);
    return ++count;
  } finally {
    count = 10;
    console.log('finally ' + count);
  }
}

console.log('result ' + getValue());

输出结果为

try 0
finally 10
result 1

可以看到，finally里面的代码总是会被执行，即使在try里面加了return，finally还是在try里面return之前执行的。

那么，如果在finally中添加一个return，输出的又是什么呢？

function getValue() {
  let count = 0;
  try {
    console.log('try ' + count);
    return ++count;
  } finally {
    count = 10;
    console.log('finally ' + count);
    return count;
  }
}

console.log('result ' + getValue());

输出结果为

try 0
finally 10
result 10

结果try中的return并没有生效，直接在finally中return掉了，返回的finally的结果。

另外一种情况，如果在catch中直接return呢？

function getValue() {
  let count = 0;
  try {
    console.log('try ' + count);
    throw new Error('some error');
    return ++count;
  } catch {
    count = 20;
    console.log('error ' + count);
    return count;
  } finally {
    count = 10;
    console.log('finally ' + count);
    return count;
  }
}

console.log('result ' + getValue());

输出结果为

try 0
error 20
finally 10
result 10

结果return的值依然为finally中return的值，即使在catch中加了return，同样不会返回，执行顺序是try → catch → finally。

此时，我推断将finally中的return去掉后应该返回的是error中return的值。

function getValue() {
  let count = 0;
  try {
    console.log('try ' + count);
    throw new Error('some error');
    return ++count;
  } catch {
    count = 20;
    console.log('error ' + count);
    return count;
  } finally {
    count = 10;
    console.log('finally ' + count);
  }
}

console.log('result ' + getValue());

输出结果

try 0
error 20
finally 10
result 20

果然不出所料。

总结

try...catch...finally包裹的代码段不管如何都会去执行finally中的代码，如果在finally中包含了return，那么返回的肯定是finally的结果。如果finally中不存在return，则返回try或者catch中的结果。