通过变量对象,作用域链,this三方面全面解析js中的上下文环境

2020-4-6 15:27:05
学习记录
66

开始之前需要先了解的内容

  • AO(激活对象)和VO(变量对象)都是变量对象,只不过是否处于正在执行中
  • scope表示作用域链
  • this 在非严格模式下 浏览器环境中的this如果是undefined则指向window

通过一个例子来说明

分析下面代码的执行上下文

var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f; } checkscope()();

详细解析上下文环境

//执行全局代码,全局上下文被压入执行上下文栈 ECStack = [ [globalCtx] ] //全局下上文初始化 globalCtx = { VO:[global], scope:[globalCtx].VO], this:globalCtx.VO } //checkscope被创建,保存作用域链到函数的内部属性[[scope]] checkscope[[scope]] = [globalCtx.AO]; //执行checkscope(),创建 checkscope 函数执行上下文,checkscope 函数执行上下文被压入执行上下文栈 ECstack = [ [checkscope], [globalCtx] ] //初始化checkscope()上下文 checkscopeCtx = { AO:{ arguments:{}, scope:undefined, f:function }, scope:[AO,globalctx.VO], this:undefined } //执行完毕弹出checkscope执行上下文栈 ECstack = [ [globalCtx] ] //函数f被创建,保存作用域链 f[[scope]] = checkscopeCtx[[scope]]=[[checkscopeCtx.VO],globalCtx.VO]; //执行checkscope()();即执行f(); f压入上下文栈 ECstack = [ [f] [globalCtx] ] //初始化f上下文 fCtx ={ VO:{ arguments:{}, }, scope:[VO,checkscopeCtx[[scope]],globalctx.VO], this:undefined } //执行完毕弹出f ECstack = [ [globalCtx] ]

通过变量对象,作用域链,this三方面全面解析js中的上下文环境

avatar

Sky(小新)

个人签名: 提升能力,创造价值!

江苏-南京
skylpz@qq.com