深入理解JavaScript：Chrome开发者工具中的函数调用栈与闭包
超级会员免费看
本文回顾了JavaScript的基础概念，重点讲解如何使用Chrome开发者工具进行函数调用栈和作用域的观察。通过示例介绍了断点调试工具的使用，特别是跨过、跨入和跳出功能。文章详细分析了闭包的概念和产生，以及其在循环、setTimeout和单例模式中的应用。同时，讨论了模块化开发与闭包的关系，展示了模块化开发的流程和实践案例。
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 - 停用断点
订阅专栏 解锁全文
扫一扫
4728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
