上下文与作用域

目录

• 代码分析
• 执行过程

作用域

每个函数都是一个对象,对象中有些属性可以被我们访问,比如name,有些属性仅供js引擎存取,[[Scope]]就是其中一个,由ES3定义,

上下文又叫环境

什么是执行上下文

执行上下文是ECMAScript规范中用来描述 JavaScript 代码执行的抽象概念，规定了当前代码执行的环境(当前执行代码片段中的变量、函数、作用域链等)

执行上下文栈

执行上下文栈用来管理执行上下文。

执行上下文栈也叫调用栈，执行上下文栈用于存储代码执行期间创建的所有上下文，具有LIFO（Last In First Out后进先出，也就是先进后出）的特性。

JS代码首次运行，都会先创建一个全局执行上下文并压入到执行上下文栈中，之后每当有函数被调用，都会创建一个新的函数执行上下文并压入栈内；由于执行栈LIFO的特性，所以可以理解为，JS代码执行完毕前在执行栈底部永远有个全局执行上下文。

可以把执行栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。

执行上下文创建

行上下文创建分为创建阶段与执行阶段

执行上下文创建阶段负责三件事:

• 确定this
• 创建词法环境组件
• 创建变量环境组件

词法环境与变量环境

词法环境

是Js引擎内部用来跟踪标识符和特定变量之间的映射关系

活跃对象与变量对象(ES3)又叫词法环境和变量环境(ES5+)

在ES5后,已经不存在活跃对象的定义了,现如今活跃对象只是广义的抽象,而不再是狭义的定义了

词法环境分为全局词法环境与函数词法环境

词法环境中有两个组成部分：

• 环境记录： 储存变量和函数声明的实际位置
• 对外部环境的引用：当前可以访问的外部词法环境(全局词法环境对外部环境的引入记录为null)

变量环境也是一个词法环境,他具有词法环境中所有的属性,区别如下:

• 词法环境存储函数声明和变量let和const绑定
• 变量环境仅用于变量var绑定

活跃对象是作用域链上正在被执行和引用的变量对象

全局执行上下文

全局执行上下文只有一个，在客户端中一般由浏览器创建，也就是我们熟知的window对象，我们能通过this直接访问到它。

全局对象window上预定义了大量的方法和属性，我们在全局环境的任意处都能直接访问这些属性方法，同时window对象还'var声明的全局变量的载体。我们通过var创建的全局对象，都可以通过window直接访问。

函数执行上下文

函数执行上下文可存在无数个，每当一个函数被调用时都会创建一个函数执行上下文；需要注意的是，同一个函数被多次调用，都会创建一个新的上下文。

返回目录

代码分析

function f1() {
    f2();
    console.log(1);
};

function f2() {
    f3();
    console.log(2);
};

function f3() {
    console.log(3);
};

f1();//3 2 1

返回目录

执行过程

//代码执行前创建全局执行上下文
// f1调用
// f1又调用了f2，f2执行完毕之前无法console 1
// f2又调用了f3，f3执行完毕之前无法console 2
// f3执行完毕，输出3并出栈
// f2执行完毕，输出2并出栈
// f1执行完毕，输出1并出栈
// 此时执行栈中只剩下一个全局执行上下文

总结

执行上下文主要干了如下两件事:

1. 创建执行环境

   • 确定this指向
   • 创建词法环境组件
   • 创建变量环境组件
   • 其中词法环境与变量环境
     • 确定当前执行环境的作用域(对外部环境的引用)
     • 收集变量和函数声明形成一个对象(环境记录) --> 预解析

   词法环境分为全局词法环境与函数词法环境

   词法环境中有两个组成部分：

   • 环境记录(是一个对象)： 储存变量和函数声明的实际位置
   • 对外部环境的引用：当前可以访问的外部词法环境(全局词法环境对外部环境的引入记录为null)

   变量环境也是一个词法环境,他具有词法环境中所有的属性,区别如下:

   • 词法环境存储函数声明和变量let和const绑定
   • 变量环境仅用于变量var绑定

2. 执行执行环境中代码

1.全局执行上下文一般由浏览器创建(即window对象)，代码执行时就会创建；(所以执行完毕前在执行栈底部永远有个全局执行上下文)

2.函数执行上下文只有函数被调用时才会创建，调用多少次函数就会创建多少上下文。

3.执行上下文栈(调用栈)用于存放所有执行上下文，满足FILO规则(先入后出)