时间戳

首页 > 技术文章 > js执行过程之上下文对象(Context)

js执行过程之上下文对象(Context)

youqiancheng 2021-02-19 10:45 原文

在js的学习中，我们已经不满足于仅了解js的基础知识，而是开始追求更深层次的学习。因为你会发现，仅了解js的基础知识，在开发项目的过程中是远远不够的。今天就来介绍一下在js执行过程中的一些相关内容了。

JavaScript运行环境

JavaScript的运行不是像C++，Java等编译语言编译后直接在操作系统上运行，因为它是脚本语言，运行时必须要借助引擎来运行，所以它可以在封装了引擎的环境下运行。而当js运行时，它会有不同的运行环境。

  • Global Code -- JavaScript代码开始的默认运行环境
  • Function Code -- 代码执行在JavaScript函数中
  • Eval Code -- 使用eval()执行代码

JavaScript运行过程

Js的执行过程可分为两个重要的时期预编译期（预解析期）和执行期。

  • 预编译期
  1. 浏览器的JavaScript引擎“解析”js代码
  2. 建立arguments对象，函数，参数，变量
  3. 建立作用域链
  4. 确定this的指向
  • 执行期
    按照从上到下的顺序执行代码。

执行上下文

概念

如何区分不同的运行环境，需要引出的一个概念就是执行上下文(Execution Context)。它是一个对象，由js的执行引擎创建，具有三个属性：变量对象(variable object)，作用域链(scope chain)，this指针。

上下文栈

js在执行过程中会有一个上下文栈，上下文栈中存放的就是不同的上下文对象（你可以理解为不同的js运行环境)。比如当js开始执行一个函数，那此时它的运行环境从原来的Global Code变为Function Code，js引擎会创建一个context对象，并将其压如栈中。当这个函数执行完后，这个对象将会弹出。故而，当前执行代码的context对象总是在栈顶。

var a = 1;
 
function plus(a, b) {
    var c;
    c = a + b;
    return c;
};
 
plus(1, 2);
 
function minus() {
    var d = 3;
    function get() {
        var e = 4;
        return e;
    }
    return d - get();
};
 
minus();

变量对象

变量对象是context对象中的一个重要属性，其创建过程如下：

  1. 创建arguments对象，其中保存有多个属性，属性的key值是'0','1','2'......，value值就是传入的参数的实际值。
  2. 找到这个作用域内的所有var和function的声明，作为属性存储在变量对象中，如果是function，那属性名就是函数名，属性值是函数的引用。如果是var，那属性名就是变量名，属性值是undefined.

理解了变量对象创建的过程，你就可以理解为什么会有变量提升这个特性了。

console.log(a);   // undefined
var a = 1;

 

以上代码预解析后的实际过程可理解为：

var a;
console.log(a);
a =1

 

function声明的函数也是一样的原理：

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

以上代码预解析后的实际过程可理解为:

 function f() {
    var a = 1;
    console.log(a);
}

f();   // 1

既然var声明和function声明都具有变量提升的特性，那var和function哪一个的声明在前呢？其实从上面的变量对象的创建过程中我们就已经知道了，为了看的清楚，我们用函数表达式的方式来声明一个函数检测一下。

f();
 
var f = function (){
    var a = 1;
    console.log(a);
};
 
function f(){
    var b = 2;
    console.log(b);
};
 
f();

 

 控制台打印效果

显然是function的声明在前。

 

看了变量对象的创建过程，是不是觉得它和js执行过程中预编译期的第2步非常相似。没错，其实在js的预编译时期所做的工作实际上就是创建Global Execution Context的过程。它的第2步，就是context对象中创建变量对象的过程。

看到这里，是不是又有一个新的疑惑，为什么在最初的时候我们是在代码还没有开始执行的时候就已经创建了Global Execution Context对象，而之后是在要执行函数之前，才创建context对象呢？需要理解的一点就是函数体的预解析发生在函数被调用之时，被调用时先进行函数体的预编译，然后按顺序进行执行。

如果这段js代码是运行在浏览器端的，那么你猜到此时的Gobal Execution Context中的变量对象是什么了吗？没错，它就是window对象。但是当它是运行在服务器端的时候，全局上下问的变量对象却不是它的全局对象global。为什么呢？各位可爱的读者可以自己来探索一下哦。

推荐阅读