Shulou(Shulou.com)06/02 Report--

What are the common sense of JavaScript error and call stack? I believe many inexperienced people don't know what to do about it. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Most engineers may not pay attention to the details of the wrong object and error stack in JS, even though they face a lot of errors in their daily work, and some students even look confused in front of console's errors and don't know where to start troubleshooting. If you have a systematic understanding of the content of this article, it will be much more leisurely. Error stack cleanup allows you to effectively remove noise messages and focus on what really matters. In addition, if you understand what the various attributes of Error are, you can make better use of it.

Next, let's get to the point.

The working mechanism of call stack

Before we explore the errors in JS, we must understand how the call stack (Call Stack) works, in fact, this mechanism is very simple, if you already know this, you can just skip this part.

To put it simply: when a function is called, it will be added to the top of the call stack, and after execution, the function will be removed from the top of the call stack. The key to this data structure is last-in-first-out, which is known as LIFO. For example, when we call function x inside function y, the order of the call stack from bottom to top is y-> x.

Let's give another code example:

Function c () {console.log ('c');} function b () {console.log ('b'); c ();} function a () {console.log ('a'); b ();} a ()

When this code runs, first an is added to the top of the call stack, and then, because b is called internally, b is added to the top of the call stack, which is similar when b invokes c internally. When calling c, our call stack will be in this order from bottom to top: a-> b-> c. After c is finished, c is removed from the call stack, the control flow goes back to b, and the call stack becomes: a-> b, and then after b executes, the call stack becomes: a, and when an is finished, it is also removed from the call stack.

In order to better illustrate the working mechanism of the call stack, we make a slight change to the above code and use console.trace to output the current call stack to console. You can think that each line of the call stack printed by console.trace is caused by the line below it.

Function c () {console.log ('c'); console.trace ();} function b () {console.log ('b'); c ();} function a () {console.log ('a'); b ();} a ()

When we run this code in Node.js 's REPL, we get the following result:

Traceat c (repl:3:9) at b (repl:3:1) at a (repl:3:1) at repl:1:1 / / b-> c. If you make a slight change to the code, call it after the c execution in b, as follows:

Function c () {console.log ('c');} function b () {console.log ('b'); c (); console.trace ();} function a () {console.log ('a'); b ();} a ()

As you can see from the output, the printed call stack is from the bottom up: a-> b, there is no c, because c is removed from the call stack after execution.

Trace at b (repl:4:9) at a (repl:3:1) at repl:1:1 / /

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.