前者基础进阶,执行上下文详细图解

前端基础进阶(二):执行上下文详细图解

2017/02/21 · 基础技术 ·
执行上下文

原文出处: 波同学   

亚洲必赢官网 1

先随便放张图

俺们在JS学习初期或者面试的时候日常会遇到考核变量升高的思考题。比如先来一个概括一点的。

JavaScript

console.log(a); // 这里会打印出什么样? var a = 20;

1
2
console.log(a);   // 这里会打印出什么?
var a = 20;

临时先不管这几个事例,我们先引入一个JavaScript中最基础,但还要也是最着重的一个定义施行上下文(Execution
Context)

历次当控制器转到可实施代码的时候,就会进来一个举办上下文。执行上下文可以知道为当前代码的执行环境,它会形成一个效用域。JavaScript中的运行环境大致包罗三种情状。

  • 大局环境:JavaScript代码运行起来会率先进入该环境
  • 函数环境:当函数被调用执行时,会进去当前函数中施行代码
  • eval

故此在一个JavaScript程序中,必定会爆发五个实施上下文,在自身的上一篇小说中也有提到,JavaScript引擎会以堆栈的法门来处理它们,这一个库房,我们称其为函数调用栈(call
stack)。栈底永远都是全局上下文,而栈顶就是时下正值实践的上下文。

当代码在进行进度中,碰到以上二种意况,都会变动一个推行上下文,放入栈中,而处在栈顶的上下文执行落成之后,就会自动出栈。为了进一步清楚的敞亮那么些进度,依照上边的例子,结合图示给大家呈现。

JavaScript

var color = ‘blue’; function changeColor() { var anotherColor = ‘red’;
function swapColors() { var tempColor = anotherColor; anotherColor =
color; color = tempColor; } swapColors(); } changeColor();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var color = ‘blue’;
 
function changeColor() {
    var anotherColor = ‘red’;
 
    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }
 
    swapColors();
}
 
changeColor();

俺们用ECStack来代表处理实施上下文组的仓库。大家很简单了然,第一步,首先是全局上下文入栈。

亚洲必赢官网 2

第一步:全局上下文入栈

大局上下文入栈之后,其中的可实施代码初叶举办,直到蒙受了changeColor(),这一句激活函数changeColor创设它和谐的施行上下文,由此第二步就是changeColor的实施上下文入栈。

亚洲必赢官网 3

第二步:changeColor的举行上下文入栈

changeColor的前后文入栈之后,控制器伊始履行其中的可举办代码,境遇swapColors()从此未来又激活了一个实施上下文。由此第三步是swapColors的实践上下文入栈。

亚洲必赢官网 4

其三步:swapColors的推行上下文入栈

在swapColors的可进行代码中,再没有赶上任何能生成执行上下文的状态,因而那段代码顺遂举办完结,swapColors的上下文从栈中弹出。

亚洲必赢官网 5

第四步:swapColors的履行上下文出栈

swapColors的实施上下文弹出事后,继续执行changeColor的可实施代码,也远非再相见其余执行上下文,顺遂实施完结之后弹出。那样,ECStack中就只身下全局上下文了。

亚洲必赢官网 6

第五步:changeColor的实施上下文出栈

大局上下文在浏览器窗口关闭后出栈。

小心:函数中,蒙受return能直接终止可进行代码的施行,由此会平素将眼前上下文弹出栈。

亚洲必赢官网 7

所有经过

详见掌握了那些进程之后,大家就可以对履行上下文总计一些定论了。

  • 单线程
  • 同台施行,唯有栈顶的上下文处于执行中,其他上下文必要等待
  • 前者基础进阶,执行上下文详细图解。大局上下文唯有唯一的一个,它在浏览器关闭时出栈
  • 函数的实施上下文的个数没有限定
  • 历次某个函数被调用,就会有个新的履行上下文为其创制,固然是调用的本身函数,也是如此。

为了加固一下推行上下文的领悟,我们再来绘制一个例证的嬗变进程,那是一个粗略的闭包例子。

JavaScript

function f1(){ var n=999; function f2(){ alert(n); } return f2; } var
result=f1(); result(); // 999

1
2
3
4
5
6
7
8
9
function f1(){
    var n=999;
    function f2(){
        alert(n);
    }
    return f2;
}
var result=f1();
result(); // 999

因为f1中的函数f2在f1的可进行代码中,并从未被调用执行,由此举办f1时,f2不会成立新的上下文,而直到result执行时,才创立了一个新的。具体衍变进度如下。

亚洲必赢官网 8

上例演化进度

下一篇文章继续总括实践上下文的创制进度与变量对象,求持续关怀与点赞,谢谢我们。

前端基础进阶连串目录

前端基础进阶种类我会持续创新,欢迎我们关切自己公众号isreact,新的稿子更新了我会在万众号里第一时间布告大家。也欢迎大家来简书关怀自己。

1 赞 2 收藏
评论

亚洲必赢官网 9

初稿参考

大家在JS学习初期或者面试的时候平日会碰到考核变量升高的思考题。比如先来一个概括一点的。

大家在JS学习初期或者面试的时候时不时会遭逢考核变量进步的思考题。比如先来一个简约一点的。

js中的运行条件不难分类
大局环境,执行js代码就会进入该环境
函数环境,函数被调用就会进去该条件
eval哪个人调用此办法,this就指向该目标

console.log(a);   // 这里会打印出什么?
var a = 20;
console.log(a);   // 这里会打印出什么?
var a = 20;

在栈中,栈底永远都是全局上下文,栈顶是正值实施的上下文

临时先不管这几个事例,大家先引入一个JavaScript中最基础,但还要也是最重点的一个定义执行上下文(Execution
Context)。

暂时先不管这几个例子,大家先引入一个JavaScript中最基础,但与此同时也是最要紧的一个概念执行上下文(Execution
Context)。

单线程中,
一同实施,栈顶上下文处于执行,其余等待
大局上下文唯有一个,在浏览器关闭时出栈。
实践上下文个数没限制
函数被调用就有新上下文创设

每一遍当控制器转到可实施代码的时候,就会进入一个实施上下文。执行上下文可以知晓为眼前代码的举办环境,它会形成一个功能域。JavaScript中的运行条件大致包涵三种情状。

老是当控制器转到可实施代码的时候,就会进入一个举行上下文。执行上下文可以精通为眼前代码的推行环境,它会形成一个功用域。JavaScript中的运行条件大致包蕴三种情景。

亚洲必赢官网 ,// 全局上下文进栈
var color = ‘blue’;
function changeColor(){
var anotherColor = ‘red’;
function swapColors(){
var tempColor = anotherColor;
antherColor = color;
color = tempColor;
}
// swapColors进栈
swapColors();
// swapColors出栈
}
// changeColor进栈
changeColor();
// changeColor出栈

  • 大局环境:JavaScript代码运行起来会首先进入该条件
  • 函数环境:当函数被调用执行时,会跻身当前函数中施行代码
  • eval
  • 全局环境:JavaScript代码运行起来会首先进入该条件
  • 函数环境:当函数被调用执行时,会进来当前函数中执行代码
  • eval

函数中实施到return语句会终止可实施代码的实践,将眼前上下文弹出栈

故此在一个JavaScript程序中,必定会爆发八个执行上下文,在自身的上一篇小说中也有涉嫌,JavaScript引擎会以堆栈的章程来拍卖它们,那个库房,大家称其为函数调用栈(call
stack)。栈底永远都是全局上下文,而栈顶就是眼前正在举行的上下文。

故此在一个JavaScript程序中,必定会发生多少个实施上下文,在自家的上一篇作品中也有提到,JavaScript引擎会以堆栈的章程来处理它们,那些库房,我们称其为函数调用栈(call
stack)。栈底永远都是全局上下文,而栈顶就是时下正值实践的上下文。

现代码在实施进度中,遭逢上述二种状态,都会生成一个举行上下文,放入栈中,而高居栈顶的上下文执行达成之后,就会活动出栈。为了尤其明显的领悟这么些历程,依照下边的事例,结合图示给大家来得。

现代码在履行进度中,境遇上述两种状态,都会转移一个实施上下文,放入栈中,而高居栈顶的上下文执行达成之后,就会自行出栈。为了尤其清晰的精通这一个进度,依据下边的例子,结合图示给大家来得。

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();
var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

我们用ECStack来代表处理实施上下文组的仓库。大家很不难掌握,第一步,首先是大局上下文入栈。

俺们用ECStack来表示处理实施上下文组的堆栈。大家很不难了解,第一步,首先是全局上下文入栈。

亚洲必赢官网 10

亚洲必赢官网 11

第一步:全局上下文入栈

先是步:全局上下文入栈

大局上下文入栈之后,其中的可举行代码先导举行,直到蒙受了changeColor(),这一句激活函数changeColor创建它自己的实施上下文,因而第二步就是changeColor的实践上下文入栈。

全局上下文入栈之后,其中的可实施代码初阶履行,直到碰到了changeColor(),这一句激活函数changeColor始建它自己的举办上下文,由此第二步就是changeColor的举办上下文入栈。

亚洲必赢官网 12

亚洲必赢官网 13

第二步:changeColor的执行上下文入栈

第二步:changeColor的实施上下文入栈

changeColor的内外文入栈之后,控制器起初举办其中的可举办代码,蒙受swapColors()尔后又激活了一个举办上下文。由此第三步是swapColors的施行上下文入栈。

changeColor的左右文入栈之后,控制器初阶进行其中的可举办代码,遇到swapColors()事后又激活了一个推行上下文。因而第三步是swapColors的施行上下文入栈。

亚洲必赢官网 14

亚洲必赢官网 15

其三步:swapColors的实践上下文入栈

其三步:swapColors的推行上下文入栈

在swapColors的可实施代码中,再没有赶上其他能生成执行上下文的图景,由此那段代码顺遂举办达成,swapColors的上下文从栈中弹出。

在swapColors的可实施代码中,再没有蒙受其余能生成执行上下文的事态,因而这段代码顺遂推行达成,swapColors的上下文从栈中弹出。

亚洲必赢官网 16

亚洲必赢官网 17

第四步:swapColors的推行上下文出栈

第四步:swapColors的执行上下文出栈

swapColors的实践上下文弹出之后,继续执行changeColor的可举行代码,也从未再遇上任何执行上下文,顺遂执行达成之后弹出。那样,ECStack中就只身下全局上下文了。

swapColors的举办上下文弹出事后,继续执行changeColor的可举行代码,也远非再相见任何执行上下文,顺遂实施已毕之后弹出。那样,ECStack中就只身下全局上下文了。

亚洲必赢官网 18

亚洲必赢官网 19

第五步:changeColor的实践上下文出栈

第五步:changeColor的推行上下文出栈

大局上下文在浏览器窗口关闭后出栈。

大局上下文在浏览器窗口关闭后出栈。

留神:函数中,境遇return能一直终止可实施代码的履行,由此会直接将近日上下文弹出栈。

留意:函数中,遭逢return能一贯终止可实施代码的进行,因而会直接将近日上下文弹出栈。

亚洲必赢官网 20

亚洲必赢官网 21

全副进度

成套进度

详见询问了这一个进度之后,我们就足以对进行上下文总括一些定论了。

详细询问了那一个进度之后,我们就可以对施行上下文总计一些定论了。

  • 单线程
  • 一同施行,唯有栈顶的上下文处于执行中,其余上下文须求拭目以待
  • 全局上下文只有唯一的一个,它在浏览器关闭时出栈
  • 函数的实施上下文的个数没有限定
  • 历次某个函数被调用,就会有个新的推行上下文为其创制,固然是调用的自身函数,也是如此。
  • 单线程
  • 协办实施,惟有栈顶的上下文处于执行中,其他上下文要求等待
  • 大局上下文唯有唯一的一个,它在浏览器关闭时出栈
  • 函数的施行上下文的个数没有范围
  • 历次某个函数被调用,就会有个新的举行上下文为其创制,即便是调用的自家函数,也是那般。

为了加固一下实施上下文的了解,咱们再来绘制一个例证的嬗变过程,那是一个简单易行的闭包例子。

为了巩固一下履行上下文的知道,大家再来绘制一个事例的衍变进度,这是一个简便的闭包例子。

function f1(){
    var n=999;
    function f2(){
        alert(n); 
    }
    return f2;
}
var result=f1();
result(); // 999
function f1(){
    var n=999;
    function f2(){
        alert(n); 
    }
    return f2;
}
var result=f1();
result(); // 999

因为f1中的函数f2在f1的可举办代码中,并没有被调用执行,由此推行f1时,f2不会创设新的上下文,而停止result执行时,才创制了一个新的。具体衍变进度如下。

因为f1中的函数f2在f1的可举办代码中,并从未被调用执行,由此实施f1时,f2不会创制新的上下文,而直至result执行时,才创造了一个新的。具体衍生和变化进度如下。

亚洲必赢官网 22

亚洲必赢官网 23

上例衍变进程

上例演化进程

读书进度中境遇哪些问题要么想获得学习资源的话,欢迎出席学习沟通群
343599877,大家一道学前端!

学学进度中蒙受怎么着问题要么想博得学习资源的话,欢迎加入学习交换群
343599877,大家一块学前端!

网站地图xml地图