小编给大家分享一下JavaScript执行上下文的处理过程,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
在《深入学习js之——执行上下文栈》中说过,当JavaScript代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution context)
对于每一个执行上下文,都有三个重要的属性:
变量对象(Variable object VO)
作用域链(Scope chain)
this
本文我们结合着这三个部分的内容,讲讲执行上下文的具体处理过程。
在《深入学习js之——词法作用域和动态作用域》中,提出这样一道思考题:
// 思考题一: var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f(); } checkscope(); // 思考题二: var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f; } checkscope()();
两段代码都会打印local scope
,但是还是有些许差异的,本文就详细的解析执行上下文栈和执行上下文的具体变化过程。
我们分析第一段代码:
var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f(); } checkscope();
执行过程如下:
1、执行全局代码,创建全局执行上下文,全局上下文被压入执行上下文栈
ECStack = [ globalContext ];
2、全局上下文初始化
globalContext = { VO: [global], Scope: [globalContext.VO], this: globalContext.VO }
2、初始化的同时,checkscope 函数被创建,保存作用域链到函数内部的属性[[scope]]
checkscope.[[scope]] = [ globalContext.VO ];
3、执行checkScope 函数,创建checkScope 函数执行上下文,checkScope 函数执行上下文被压入执行上下文栈:
ECStack = [ checkscopeContext, globalContext ];
4、checkscope 函数执行上下文初始化:
1.复制函数 [[scope]] 属性创建作用域链,
2.用 arguments 创建活动对象,
3.初始化活动对象,即加入形参、函数声明、变量声明,
4.将活动对象压入 checkscope 作用域链顶端,
同时 f 函数被创建,保存作用域链到 f 函数的内部属性[[scope]]
checkscopeContext = { AO: { arguments: { length: 0 }, scope: undefined, f: reference to function f(){} }, Scope: [AO, globalContext.VO], this: undefined }
5、执行f函数,创建 f 函数执行上下文,f 函数执行上下文被压入执行上下文栈
ECStack = [ fContext, checkscopeContext, globalContext ]
6、f 函数执行上下文初始化, 以下跟第 4 步相同:
1.复制函数[[scope]]
属性创建作用域链
2.用 arguments 创建活动对象
3.初始化活动对象,即加入形参、函数声明、变量声明
4.将活动对象压入 f 作用域链顶端
fContext = { AO: { arguments: { length: 0 } }, Scope: [AO, checkscopeContext.AO, globalContext.VO], this: undefined }
7、f 函数执行,沿着作用域链查找 scope 值,返回 scope 值
8、f 函数执行完毕,f 函数上下文从执行上下文栈中弹出
ECStack = [ checkscopeContext, globalContext ]
9、checkscope 函数执行完毕,checkscope 执行上下文从执行上下文栈中弹出
ECStack = [ globalContext ]
以上是“JavaScript执行上下文的处理过程”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。