MS-JS :(一)理解执行上下文

981 阅读2分钟
总会有这种感觉:别人问一个问题,我总是自己为是的理解,却无法描述出来。这就是一知半解的结果。MS(Memory and Sharing)系列是我自己学习笔记的分享和记录,不会对概念详细的探索和描述,旨在理解和记忆,并对好的资源进行收录以便查看!

ps: 不要小看概念的力量


1.概念小记

1.1 执行上下文


评估和执行 JavaScript 代码的环境的抽象概念,可以理解成执行环境。

js中有三种执行上下文:
  1. 全局执行上下文
  2. 函数执行上下文
  3. eval函数执行上下文(不常用)


每个执行上下文中都有三个重要的属性

  • 变量对象(VO),包含变量、函数声明和函数的形参,该属性只能在全局上下文中访问
  • 作用域链(JS 采用词法作用域,也就是说变量的作用域是在定义时就决定了)
  • this

1.2 执行栈

一种‘先进后出’的栈结构,用以存储代码运行时创建的所有执行上下文;
一个JavaScript程序中,必定会产生多个执行上下文,JavaScript引擎会以栈的方式来处理它们,这个栈,我们称其为函数调用栈(call stack)。栈底永远都是全局上下文,而栈顶就是当前正在执行的上下文。

1.3 创建执行上下文的过程


1.4 变量对象


执行上下文的创建过程中用来承载变量和函数声明的载体对象。

1.5 作用域和作用域链


当前变量对象上变量和函数的作用范围成为其作用域。但是如果在当前作用域中没有查到值,就会向上级作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链。


2.详细讲解推荐


3.来点题目加深理解

3.1 思考下题的执行过程

var a=2; //函数说明 
function bar() { 
  var i=3; 
  function foo(){
    var b=4; 
    method();
  } 
  foo(); 
  console.log("123"); 
} 

function method(){ 
  console.log("abc");
}
// 调用bar()
bar()

过程解析

// 1.先创建全局上下文,变量提示-变量赋值-执行
function bar
function method
var a
// 变量赋值
function bar () { ... }  // 此处省略,只为解析过程
function method () { ... } // 此处省略,只为解析过程
a = 2

// 2.调用bar,开始创建bar的函数执行上下文
bar() 
// 这里不是全局声明,只是解析过程bar() 执行过程
function foo
var i
function foo () { ... }  // 此处省略,只为解析过程
i = 3
foo() // 这里会进入foo的执行上下文
// ... 此处对foo的执行上下文创建
// var b
// b = 4
// method() .  // 由于全局上下文中有声明,直接执行,输入abc
console.log('123')  // 123