再問你一遍，你真的瞭解try..catch(finally)嗎？？?

定義

首先來看下 MDN 的定義：

The try...catch statement marks a block of statements to try and specifies a response should an exception be thrown.

try...catch語句標記要執行的語句，並指定一個當有異常拋出時候的響應

簡短的一句的確描述了try...catch的大部分功能。

可是，最MDN的最後，有一段話是這麼寫的：

Returning from a finally-block

If the finally-block returns a value, this value becomes the return value of the entire try-catch-finally statement, regardless of any return statements in the try and catch-blocks. This includes exceptions thrown inside of the catch-block:

finally語句塊的返回值

若是finally語句塊中有返回值，那麼這個值將做爲整個try...catch語句的返回，不管try語句塊或者catch語句塊中是否有返回，這包括了catch中的異常。

ok，那咱們就嘗試加上return，看看會發生什麼。

case1

輸入

function fn() {
  try {
    console.log('try塊內log');
  } catch (error) {
    console.log('catch塊內log');
  } finally {
    console.log('finally塊內log====');
  }
  return '通常狀況下的return';
}
console.log(fn());
複製代碼

輸出：

一切看起來都如咱們所想，沒有問題，繼續往下看。

case2

輸入

function fn() {
  try {
    console.log('try塊內log');
    return 'try中的return'; // <=== 多了這麼一句
  } catch (error) {
    console.log('catch塊內log');
    return 'catch中的return語句';
  } finally {
    console.log('finally塊內log====');
  }
  return '通常狀況下的return';
}
console.log(fn());
複製代碼

輸出

正如上圖所示，這裏打印的是try的return，可是，finally語句塊中的log依然被執行了。 看到這裏，咱們能夠知道，finally的執行時機是在try(或者cache，cache同理)執行return以前被執行。 那咱們就能夠驗證下MDN上所說的：finally語句塊的返回值 這句話的真正含義。

case3

輸入

function fn() {
  try {
    console.log('try塊內log');
    return 'try中的return'
  } catch (error) {
    console.log('catch塊內log');
    return 'catch中的return語句';
  } finally {
    console.log('finally塊內log====');
    return 'finaly中的return'; // <=== 多了這麼一句
  }
  return '通常狀況下的return';
}
console.log(fn());
複製代碼

輸出

ok，依然很正常，由於finally會在try的return以前執行，因此攔截了try中的return，打印了finally中的return。

你覺得這樣就結束了嗎？

咱們繼續往下看。

case4

輸入

function justLog(){
  console.log('來自justLog的打印');
  return '來自justLog的return'
}

function fn() {
  try {
    console.log('try塊內log');
    return justLog(); // <=== 此次咱們return了一個函數
  } catch (error) {
    console.log('catch塊內log');
    return 'catch中的return語句';
  } finally {
    console.log('finally塊內log====');
    return 'finaly中的return';
  }
  return '通常狀況下的return';
}
console.log(fn());
複製代碼

先思考一下會打印什麼？看看是否和真實的輸出一致。給咱們幾秒鐘...

---

---

---

---

---

---

小小的聲援一下，但願戰'役'早日勝利。加油！ 而後： 我會長期更新有趣的，有料的前端知識，若是對你有幫忙，請關注我，往後接受第一手更新消息。很是感謝

---

---

---

---

---

---

輸出

你答對了沒有？ 能夠看到，紅框內爲justLog函數的log，紅框下面是finally中的打印和返回。 因此finally真正的執行時機是：try(或catch)中 return關鍵字以前。 因此咱們纔看到了justLog中的打印。 有關return關鍵字的實現，能夠自行查詢標準，這裏不贅述。

應用場景

好比咱們有這樣一個高階函數：

function hoc(fn) {
  return fn()
}
複製代碼

咱們想要返回所傳遞參數的執行結果，這樣作是沒問題的。

那若是咱們想在函數執行以後，return以前，作一些其餘操做，應該怎麼作呢？

function hoc(fn) {
  const res = fn();
  // 其餘操做
  return res;
}
複製代碼

很簡答，咱們能夠先獲取返回值，再進行其餘操做，而後return。 不過這樣咱們就佔用了額外的空間，並且沒法便利的複用return後的語句，這個時候，咱們的try...catch就能夠排上用場了:

function hoc(fn) {
  try {
    return fn();
  } finally {
    // 一些其餘操做，這些操做會在 `fn()執行後，return執行前` 被執行
  }
}
複製代碼

總結

大白話來說，finally語句塊會在try(或catch)中的 return 關鍵字以前執行。一圖以概之：

最後，若是有幫到你的地方，歡迎關注、交流。