进击的 JavaScript（三） 之 函数实行历程

2019年8月21日 158次阅读 来源: 周大侠啊

邃晓js 的实行历程是很主要的，比方，作用域，作用域链，变量提拔，闭包啊，要想邃晓这些，你就得搞懂函数实行时究竟发生了什么！

一、实行环境（Execution Context）又称实行高低文

当代码实行时都邑发生一个实行环境。JavaScript中的实行环境能够分为三种。

  1. 全局环境：在浏览器中，全局环境被认为是window对象，因而，一切的全局变量和函数都作为window对象的 属性 和 要领 竖立的。
  2. 函数环境：当一个函数实行时，就会竖立该函数的实行环境，在个中实行代码。
  3. eval（不发起运用，可疏忽）

函数内，没有运用var 声明的变量，在非严厉形式下为window的属性，即全局变量。

二、函数挪用栈（call stack）

js 是依据函数的挪用（实行） 来决议 实行递次的。每当一个函数被挪用时，js 会为其竖立实行环境，js引擎就会把这个实行环境 放入一个栈中 来处置惩罚。

这个栈，我们称之为函数挪用栈（call stack）。栈底永远都是全局环境，而栈顶就是当前正在实行函数的环境。当栈顶的实行环境 实行完以后，就会出栈，并把实行权交给之前的实行环境。

看栗子措辞：

function A(){
   console.log("this is A");
   function B(){
       console.log("this is B");
   }
   B();
}

A();

那末这段代码实行的状况就是如许了。

  1. 起首 A() ;A 函数实行了，A实行环境入栈。
  2. A函数实行时，碰到了 B()，B 又实行了，B入栈。
  3. B中没有可实行的函数了，B实行完 出栈。
  4. 继承实行A， A中没有可实行的函数了，A实行完 出栈。

《进击的 JavaScript（三） 之 函数实行历程》

再来个不通例的：

function A(){
    
    function B(){
        console.log(say);
    }
 
    return B;
}

var C = A();

C();
  1. 起首 A() ;A 函数实行了，A实行环境入栈。
  2. 继承实行A， A中没有可实行的函数了，A实行完 出栈。
  3. 然后C()， 这时刻的C 就是 B，A 实行后，把B返回 赋值给了C，B实行环境入栈。
  4. B中 没有可实行的函数了，B实行完 出栈。

《进击的 JavaScript（三） 之 函数实行历程》

眼尖的同砚，预计看出来了，它怎样像闭包呢？实在，轻微修改下，它就是闭包了。

function A(){
    
    var say = 666
    
    function B(){
        console.log(say);
    }
 
    return B;
}

var C = A();

C();

//666

这就是闭包了，然则此次我们不讲闭包，你就晓得，它是的实行是怎样回事就行。

三、实行历程

如今我们已晓得，每当一个函数实行时，一个新的实行环境就会被竖立出来。实在，在js引擎内部，这个环境的竖立历程可分为两个阶段:

A. 竖立阶段(发生在挪用（实行）一个函数时，然则在实行函数内部的详细代码之前)

        1.竖立运动对象；
        2.构建作用域链；
        3.肯定this的值。

B. 代码实行阶段（实行函数内部的详细代码）
       1.变量赋值；
       2.实行别的代码。

须要注重的是，作用域链是竖立函数的时刻就竖立了，此时的链只要全局变量对象，保留在函数的[[Scope]]属性中，然后函数实行时的，只是经由过程复制该属性中的对象 来 构建作用域链。本文背面另有申明。

看图更清楚！

《进击的 JavaScript（三） 之 函数实行历程》

假如把函数实行环境算作一个对象的话：

executionContextObj = {           //实行高低文对象
            AtiveObject: { },  //运动对象
            scopeChain: { },      //作用域链
            this: {}              //this
}

//下面这段内容，感兴致的能够看下，不感兴致，就跳过哈。
或许你在别家看到跟我的不一样，人家写的是竖立变量对象。下面我来说说我得主意吧！

之前我根据 起首竖立变量对象，厥后，变量对象转变为运动对象的划定规矩 去邃晓，然则呢，经由过程我剖析JavaScript高等程序设计第三版，4.2节 和 7.2节，发明基础就不相符逻辑。

然后，我依据剖析，得出了我的结论：变量对象 是实行环境中保留着环境中定义的一切变量和函数 的对象 的统称。而运动对象，是函数实行环境中竖立的，它不仅保留着函数实行环境中定义的变量和函数，而且独占一个arguments 属性。因而，运动对象也可称之为变量对象。

如许，许多东西就说的通了。
比方（以下都是来自JavaScript高等程序设计第三版，4.2节 和 7.2节 中原文）：

假如这个环境是函数，则将其运动对象（activation object）作为变量对象。运动对象在最开始时只包括一个变量，即 arguments 对象（这个对象在全局环境中是不存在的）。

当某个函数被挪用时，会竖立一个实行环境（execution context）及响应的作用域链。
然后，运用 arguments 和其他定名参数的值来初始化函数的运动对象。

每一个实行环境都有一个示意变量的对象——变量对象。

今后，又有一个运动对象（在此作为变量对象运用）被竖立并被推入执
行环境作用域链的前端。关于这个例子中 compare() 函数的实行环境而言，其作用域链中包括两个变量对象：当地运动对象和全局变量对象。

有兴致的能够去看看这本书上说的，有差别的主意能够主动留言，我们好好讨论，哈哈。

（一）竖立阶段

1、竖立运动对象（AO）

A. 竖立arguments对象，搜检当前高低文中的参数，竖立该对象下的属性以及属性值 。

B. 搜检当前环境中的函数声明（运用function 声明的）。每找到一个函数声明，就在运动对象下面用函数名竖立一个属性，属性值就是指向该函数在内存中的地点的一个援用,假如上述函数名已存在于运动对象下，那末则会被新的函数援用所掩盖。

C. 搜检当前高低文中的变量声明（运用 var 声明的）。每找到一个变量声明，就在运动对象下面用变量名竖立一个属性，该属性值为undefined。假如该属性名已存在，则疏忽新的声明。

function test(){
    function a(){};
    var b;
}
test();

test 函数 的运动对象：

testAO: {    //test变量对象
    arguments: { ... };
    a:function(){};
    b:undefined
}

变量作用域
javaScript 中，只要两种变量作用域，一种是部分变量作用域，又称函数作用域。另一个则是全局作用域。

什么变量提拔题目的基础原因就在竖立阶段了。

console.log(A);

function A(){};

console.log(B);

var A = 666;
var B = 566;

console.log(A);
console.log(B);

//function A
//undefined
//666
//566

上面的现实递次就是如许的了

function A(){};
//var A; 这个var 声明的 同名 A，会被疏忽

var B = undefined;

console.log(A);

console.log(B);

A = 666;   //给A 从新赋值
B = 566;   //给B 赋值

console.log(A);
console.log(B);

注重第三点，运用var 声明时，假如VO对象下，该属性已存在，疏忽新的var 声明。
由于A 运用 function 声明，VO对象下，竖立A属性，然后 var 声明时，检索发明已有该属性了，就会疏忽 var A 的声明，不会把A 设置为 undefined。

2、构建作用域链
作用域链的最前端，一直都是当前实行的代码地点函数的运动对象。下一个AO（运动对象）为包括本函数的外部函数的AO，以此类推。最末端，为全局环境的变量对象。

注重：虽然作用域链是在函数挪用时构建的，然则，它跟挪用递次（进入挪用栈的递次）无关，由于它只跟 包括关联（函数 包括 函数 的嵌套关联） 有关。

能够比较绕口，照样来个小栗子，再来个图

function fa(){
    var va = "this is fa";
    
    function fb(){
        var vb = "this is fb";
    
        console.log(vb);
        
        console.log(va);
    }
    return fb;
}
var fc = fa();
fc();

//"this is fb"
//"this is fa"

函数挪用栈的状况就是如许：

《进击的 JavaScript（三） 之 函数实行历程》

那末把函数 fb 的实行环境比作对象（竖立阶段）：

fbEC = {           //实行高低文对象

            fbAO: {   //运动对象 AO
            
                  arguments: { ... };   //arguments 对象

                  vb: undefined   //变量声明竖立的属性，设置为undefined
            },
            
            scopeChain: [ AO(fa), AO(fb), VO(window) ],      //作用域链
            
            this: { ... }              //this
}

fb作用域的睁开就是如许的：

《进击的 JavaScript（三） 之 函数实行历程》
fb 函数 被 fa 函数 包括， fa 函数 被 window 全局环境包括。作用域链只跟包括关联有关！

注重：作用域链是单向的，因而，函数内的能够接见函数外 和 全局的变量，函数，然则反过来，函数外，全局内 不能接见函数内的变量，函数。

3、肯定 this 指向
所以说 this 的指向，是在函数实行时肯定的。

（二）实行阶段

1、变量赋值
依据代码递次实行，碰到变量赋值时， 给对应的变量赋值。

function getColor(){
    console.log(color);
    
    var color;
    console.log(color);
    
    color = "red";
    console.log(color);
}
getColor();
//undefined
//undefined
//"red";

3、实行其他代码。

当函数实行终了后，部分运动对象就会被烧毁（也就是说，部分的变量，函数，arguments 等都邑被烧毁），内存中仅保留全局作用域（全局实行环境的变量对象）。

这句话对邃晓闭包很主要，随后，我会出一个闭包的文章，敬请期待！

    原文作者：周大侠啊
    原文地址: https://segmentfault.com/a/1190000015600582
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞