js系列十一：在chrome开发者工具中观察函数调用栈，作用域与闭包

1 基础概念的回顾
函数在被调用执行时，会创建一个当前函数的执行上下文，在该执行上下文的创建阶段，变量对象，作用域链，闭包，this 会分别确认，而一个程序中一般来说会有多个函数执行，因此执行引擎会使用函数调用栈来管理这些函数的执行顺序。函数调用栈的执行顺序与栈数据结构一致。

2 认识断点调试工具
浏览器右上角竖着的三点 -> 更多工具 -> 开发者工具 -> Sources

断点调试界面
在我的demo中，我把代码放在app.js中，在index.html中引入。我们暂时只需要关注截图中红色箭头的地方。在最左侧上方，有一排图标。我们可以通过使用他们来控制函数的执行顺序。从左到右他们依次是：

• resume/pause script execution
• 恢复/暂停脚本执行
  step over next function call
• 跨过，实际表现是不遇到函数时，执行下一步。遇到函数时，不进入函数直接执行下一步。
  step into next function call
• 跨入，实际表现是不遇到函数时，执行下一步。遇到到函数时，进入函数执行上下文。
  step out of current function
• 跳出当前函数
  deactivate breakpoints
• 停用断点
  don‘t pause on exceptions
  不暂停异常捕获
  其中跨过，跨入，跳出是我使用最多的三个操作。

上图左侧第二个红色