javascript - 使用回调返回数据后，函数仍然捕获来自其他函数的错误

Question

对于 javascript 来说还很陌生。我调用一个函数并发送一些数据。该函数通过回调返回数据。然后，我将数据发送到包含错误的不同函数。不知何故，错误被第一个函数的 CATCH block 捕获。我以为回调后第一个函数就完成了。我不明白错误如何返回到第一个函数的 CATCH block 。

var data1 = 1;
let myMessage = document.querySelector('.fiddleMessage');
myMessage.value = '';

//Main function
function myFunc1(myData, callback) {
  myMessage.innerHTML = 'myFunc1 - enter Try block';
  try {
    myData += 1;
    myMessage.innerHTML += '<br>myFunc1 - myData = ' + myData;

    //Callback to send results   
    if (typeof callback === "function") {
      myMessage.innerHTML += '<br>myFunc1 - return data with callback';
      return (callback(myData));
      //This next message should not be reachable
      myMessage.innerHTML += '<br>myFunc1 - after callback';
    }

  } catch (err) {
    myMessage.innerHTML += '<br>myFunc1 - in CATCH block';
    myMessage.innerHTML += '<br>' + err;
    console.log('myFunc1 - in CATCH block');
    console.log(err);

    //Send a message back to calling function
    if (err) {
      if (typeof callback === "function") {
        myMessage.innerHTML += '<br>myFunc1 - in catch block - in callback';
        var errorMessage = "dataError";
        callback(errorMessage);
      }
    }
  }
}


//Function to do some processing
function myFunc2(myData2) {
  myMessage.innerHTML += '<br>myFunc2 - myData2 = ' + myData2;

  //Cause an error here with the wrong name
  //In the following line, "result" should be "myData2"
  //The error will be sent back to myFunc1 to the CATCH block - why?
  myMessage.innerHTML += '<br>myFunc2 - cause ERROR here';
  var data3 = myResult += 1;
  //var data3 = myData2 += 1;
  return data3;
}

//Call myFunc1
myFunc1(data1, function(result) {
  myMessage.innerHTML += '<br>call to myFunc1 - result = ' + result;
  if (result === "dataError") {
    myMessage.innerHTML += '<br>call to myFunc1 - received a dataError';

  } else {
    myMessage.innerHTML += '<br>call to myFunc1 - make a call to myFunc2';
    var data2 = myFunc2(result);
  }
});

h1 {
  color: #f00;
}

<h1>Function exit Callback</h1>

<p>This test is to demonstrate a function does not close after a callback. Send data to a function, the callback returns the data, then send to a different function with an error and the error is caught in the CATCH block of the first function</p><br>

<div class="fiddleMessage"></div>

Answer 1

这就是异常处理的工作原理。该错误被抛出到 myFunc2 内部，并且没有被捕获 - 因此它会沿着调用堆栈向上移动。由于 myFunc2 是从 myFunc1 中的 try block 内调用的，因此执行其中的 catch 子句。任何异常都可以在调用堆栈中实际发生点上方的任何位置捕获(第一个这样的点，从异常发生点向上移动，确实“捕获”了它，因此停止了传播)。只有当我们到达堆栈顶部的全局范围时，错误才会实际打印到控制台并终止执行(如果没有在那里捕获它)。

另外，我注意到你说“我认为第一个函数在回调后完成”。事实显然并非如此。第一个函数在其 return 语句后结束，但由于您返回了回调的返回值，因此直到回调完成后它才会完成。