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
已标记关键词 清除标记
05-08 1945
05-06 2172
实付 79.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值