JS 上下文模式
发布时间:2020-01-06 03:44

mg游戏中心 1

function test(){ console.log(a);//undefined; var a = 1;}test();

也许你会遇到过上面这样的面试题,你只知道它考的是变量提升,但是具体的原理又知道吗?所以我觉得很有必要搞明白底层的原理,才能加深理解,其实围绕的就是执行上下文的概念。

什么是执行上下文?

mg游戏中心,当控制器转到可执行的代码时,会进入该代码对应的执行上下文,可以理解为该代码对应的一个执行环境,就叫做执行上下文。 在JavaScript中运行环境有三种,分别是:

全局环境:JavaScript代码执行起来,首先就是进入全局环境。函数环境:当函数被调用执行时,就会进入函数中执行。eval

所以在一个JavaScript程序中,就会产生多个不同的执行上下文,这时候就需要用到前面提到的栈数据结构来管理了,我们称之为调用栈。当代码在执行过程中,遇到上面说的三种情况,就会产生三种执行上下文,然后分别压入调用栈中,等一个执行上下文执行完毕,弹出栈,才能执行下一个执行上下文中的代码,这就是栈结构的特点。

执行上下文的特点单线程,其实javascript就是单线程,所以很好理解。同步执行,同步就是按顺序,不能同时执行。全局上下文只有一个,它在浏览器关闭时才会弹出栈。函数的执行上下文的数目没有限制。每次某个函数被调用时,就会有新的执行上下文,即使是调用的自身函数。

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

我以上面这样一个例子讲解,执行上下文在调用栈中的创建过程

执行上下文的生命周期

如图所示,主要分为两个阶段,一个是创建阶段,一个是执行阶段。

创建阶段:生成变量对象,后面会讲解建立作用域链确定this指向执行阶段:变量赋值函数引用执行其他代码执行完毕后弹栈,等待回收

变量对象和活动对象的区别就在于,执行周期不一样,在创建阶段叫做变量对象,在执行阶段叫做活动对象。

变量对象

变量对象的创建主要有三个阶段:

1、创建arguments对象。2、检查function函数声明创建属性。在VO对象中以函数名建立一个属性,属性值为函数的地址。如果函数名的属性已经存在了,那么该属性将会被新的引用所覆盖。3、检查var变量声明创建属性。在VO对象中以变量名建立一个属性,属性值为undefined。为了防止同名的属性值会被修改为undefined,则会直接跳过,原属性值不会被修改。

举个变量提升和函数提升的例子,就明白了

function test(){ console.log(a); console.log(foo()); var a = 1; function foo(){ return 2; }}test();

这是一个典型的变量提升和函数提升的例子,最后会输出undefined和2,接下来以执行上下文的生命周期来讲解

创建过程

testEC = { VO:{}, scopeChain:{}, this:{}}VO = { arguments:{}, foo:foo reference, a:undefined}

执行阶段

VO-AOAO={ arguments:{}, foo:foo reference, a:2}

等同于

function test(){ function foo(){ return 2; } var a; console.log(a); console.log(foo()); a = 1;}test();

通过上面知识的讲解,进一步了解到了变量提升和函数提升的底层原理,对后面知识的学习也做了铺垫。