前提：海康实习接触的项目（2022-6-14-2022-9-15）

组件复用性差

项目背景是：一个页面涉及模板，内容，草稿箱这3个部分，这3个部分基本一模一样，只是表单和表格在填写和展示的时候，存在个别差距

我的问题：没有考虑复用

带来的后果：师父给我填坑

代码出现低级错误

我的问题：catch里进行return，然后错误信息都没有，保存表单不成功，但是不报错

带来后果：师父花费大量的时间，排查错误

对 try catch finally return的几点思考

1.执行顺序

2.原理

正常的情况

const test = () => {
	console.log('begin test()')
	try {
		console.log('begin try')
		throw new Error('error from try')
		console.log('end try')
	} catch (e) {
		console.log('begin catch')
		console.log(`${e.message}`)
		console.log('end catch')
	} finally {
		console.log('begin finally')
		console.log('end finally')
	}
	console.log('end test()')
}

console.log('before test()')
test()
console.log('after test()')

before test()
begin test()
begin try
begin catch
error from try
end catch
begin finally
end finally
end test()
after test()

这是非常常规的一个状态，按照顺序执行，而且通过实践证明，throw或者return之后的语句是不会执行的，所以代码console.log('end try')是不会执行的

当try块中有return时，finally的执行顺序

const test = () => {
    let count = 1;
    try {
      return count;
    } catch (e) {
    } finally {
      count = 2;
      console.log(count);
    }
  }
  
console.log(test()); //  2 1

这里我学了一句话，叫做，finally是在return语句执行后，return语句返回之前执行

有点拗口，💥

理解一下，就是 return count;执行之后，会进到finally块，finally里的所有语句执行，执行完成之后， return count;返回值

return 返回的是变量的副本，上一个题，就是说，return count的是1 ，其实已经定了，你这个finally在后面在搞多少小动作（除非finally中有return，才会覆盖try的return），都改变不了事实

看一下代码的改写理解一下

const test = () => {
let count = 1;
try {
  const temp = count; // 变量副本
  return temp;
} catch (e) {
} finally {
  count = 2;
  console.log(count);
}
}

console.log(test()); // 2 1

对于变量副本，我们做的是赋值操作，对于基本数据类型是深拷贝，但是对于对象，那就是浅拷贝了

  const test = () => {
    let count = { num: 1 };
    try {
      return count;
    } catch (e) {
    } finally {
      count.num = 2;
      console.log(count);
    }
  }
  
  console.log(test());
// { num: 2 }
// { num: 2 }

将下来谈谈return 的问题

const test = () => {
	console.log('begin test()')
	try {
		console.log('begin try')
		return 'try'
		console.log('end try')
	} catch (e) {
	} finally {
		console.log('begin finally')
	}
	console.log('end test()')
}
console.log(test())


begin test()
begin try
begin finally
try

常规的就是返回try

const test = () => {
	console.log('begin test()')
	try {
		console.log('begin try')
		return 'try'
		console.log('end try')
	} catch (e) {
	} finally {
		console.log('begin finally')
		return '覆盖try中return'
	}
	console.log('end test()')
}
console.log(test())

begin test()
begin try
begin finally
覆盖try中return

finally 的return会覆盖try的return

总结🎉🎉：

如果 try 抛了异常但没有被 catch 捕获（即没有 catch 代码块），或者 catch/finally 抛了异常，那么异常会被抛到外部并终止代码的执行

catch 中的异常会覆盖 try 中的异常

finally 中的异常会覆盖 try/catch 中的异常

思考💡：try 可以有 return，catch/finally 也可以有 return，如果这个抛异常那个 return 会怎么样呢？

catch 中的异常会覆盖 try 中的异常和 return

catch 中的 return 会覆盖 try 中的异常和 return

finally 中的异常会覆盖 try/catch 中的异常和 return

finally 中的 return 会覆盖 try/catch 中的异常和 return

try/catch/finally 块中异常或 return 之后的代码不会被执行

参考👀👀：

JS try-catch-finally 中的 return