JavaScript: function name in the debugger

If a function has a name, the debugger displays its name on the called Stack during debugging. Some debuggers

If a function has a name, the debugger displays its name on the called Stack during debugging. Some debuggers (Firebug) Sometimes name your functions and display them to share the same role with the convenience of applying them, but normally, these debuggers are named by simple installation rules, so there is little value. Let's look at an example:

Function foo () {return bar ();} function bar () {return baz ();} function baz () {debugger;} foo (); // here we use three function declarations with names. // when the debugger goes to the debugger statement, firebug's call stack looks very clear // because it clearly displays the name baz bar foo expr_test.html ()

By viewing the call stack information, we can clearly understand that foo calls the bar, barand calls baz(and fooben is called in the global scope of the expr_test.html document). However, there is a better place, this is the function that Firebug named anonymous expressions:

Function foo () {return bar ();} var bar = function () {return baz ();} function baz () {debugger;} foo (); // Call stack baz bar () // have you seen it? Foo expr_test.html ()

Then, when the function expression is a little more complex, the debugger is not so intelligent. We can only see the question mark in the call Stack:

Function foo () {return bar ();} var bar = (function () {if (window. addEventListener) {return function () {return baz () ;}}else if (window. attachEvent) {return function () {return baz () ;}}) (); function baz () {debugger;} foo (); // Call stack baz (?) () // Here is the question mark: foo expr_test.html ()

In addition, when a function is assigned to multiple variables, the following depressing problems also occur:

  function foo(){    return baz();  }  var bar = function(){    debugger;  };  var baz = bar;  bar = function() {     alert('spoofed');  };  foo();  // Call stack:  bar()  foo  expr_test.html()

At this time, the call stack shows that foo calls bar, but this is not the case. The reason for this problem is that baz and another one contains alert ('spoofed ') the function is caused by reference swap.

In the final analysis, only getting a name for a function expression is the most delegate method, that is, using a namefunction expression. We will use an expression with a name to rewrite the above example (note that the names of the two functions returned in the expression block that is called immediately are bar ):

Function foo () {return bar ();} var bar = (function () {if (window. addEventListener) {return function bar () {return baz () ;};} else if (window. attachEvent) {return function bar () {return baz () ;}}) (); function baz () {debugger;} foo (); // The call stack information is displayed again! Baz bar foo expr_test.html ()

OK. I learned another trick, right?

Additional reading

The topic list of this article is as follows:

1. How should we understand the working principle of the JavaScript engine?
2. JavaScript exploration: the importance of writing maintainable code
3. JavaScript exploration: exercise caution when using global variables
4. JavaScript exploration: var pre-parsing and side effects
5. JavaScript exploration: for Loop (for Loops)
6. JavaScript exploration: for-in loop (for-in Loops)
7. Exploring JavaScript: Prototypes is too powerful
8. JavaScript: eval () is the devil"
9. JavaScript exploration: Using parseInt () for Numerical Conversion
10. Exploring JavaScript: Basic coding specifications
11. JavaScript exploration: function declaration and function expression
12. JavaScript exploration: Name function expressions
13. JavaScript: function name in the debugger
14. JavaScript: JScript Bug
15. JavaScript exploration: Memory Management of JScript
16. Exploring JavaScript: SpiderMonkey's quirks
17. JavaScript exploration: an alternative solution to naming function expressions
18. JavaScript exploration: Object
19. JavaScript exploration: Prototype chain
20. JavaScript exploration: Constructor
21. JavaScript probing: executable context Stack
22. Execution context 1: Variable object and activity object
23. Execution context 2: Scope chain Scope Chains
24. Execution context 3: Closure Closures
25. Execution context 4: This pointer
26. Exploring JavaScript: Powerful prototype and prototype chain
27. JavaScript Functions 1: function declaration
28. JavaScript function 2: function expressions
29. JavaScript function 3: function expressions in a group
30. JavaScript function 4: function Constructor
31. JavaScript variable object 1: VO Declaration
32. JavaScript variable object 2: VO in different execution contexts
33. JavaScript variable object 3: two stages of execution Context
34. JavaScript variable object IV: Variables
35. Property of the JavaScript variable object __parent _
36. JavaScript scope chain 1: Scope chain Definition
37. JavaScript scope chain 2: function Lifecycle
38. JavaScript scope chain 3: Scope chain features
39. JavaScript closure 1: Introduction to closures
40. JavaScript closure 2: Implementation of closure
41. JavaScript closure 3: Closure usage

This article is available at http://www.nowamagic.net/librarys/veda/detail/1635.