执行上下文和作用域的理解

wenyiweb 发布于2019-08-21 17:25 / 410人阅读

摘要：执行上下文环境然后将执行上下文环境压栈，设置为活动状态当前唯一然后执行到第行，调用函数。有闭包存在时，一个作用域存在两个上下文环境也是有的。这就是作用域链。

本文参考引自：深入理解javascript原型和闭包（完结）
不得不说，这个系列文章是真的给人恍然顿悟的感觉，写的非常好，强烈推荐。感谢大佬！

执行上下文

函数每调用一次，都会产生一个新的执行上下文环境。因为不同的调用可能就有不同的参数。

function fn(x) {
  console.log(arguments)
  console.log(x)
}
fn(20)
fn(10) // 不同的调用可能有不同的参数

执行上下文栈

执行全局代码时，会产生一个执行上下文环境，每次调用函数都又会执行上下文环境。当函数调用完成时，这个上下文环境以及其中的数据都会被消除（当然了闭包并不会乖乖就范），处于活动状态的执行上下文环境只有一个。

// 这是一个压栈出栈的过程--执行上下文栈
1 let a = 10, fn, // 1、进入全局上下文环境
2    bar = function(x) {
3      let b = 5
4      fn(x + b) // 3、进入fn函数上下文环境
5    }
6 fn = function(y) {
7  let c = 5
8  console.log(y + c)
9 }
10
11 bar(10) // 2、进入bar函数上下文环境

（1）执行代码之前，首先创建全局上下文环境。（活动状态）

// 全局上下文环境
a: undefined
fn: undefined
bar: undefined
this: window

然后执行代码，代码到10行之前，上下文环境中的变量都在执行过程中被赋值。

// 全局上下文环境
a: 10
fn: function
bar: function
this: window

（2）然后执行到11行，调用bar函数。
跳转到bar函数内部，执行函数体语句之前，会创建一个新的执行上下文环境。

// bar执行上下文环境
b: undefined
x: 10
arguments: [10]
this: window

然后将bar执行上下文环境压栈，设置为活动状态（当前唯一）

（3）然后执行到第4行，调用fn函数。
调到fn函数内部，执行函数体语句之前，会创建一个新的执行上下文环境

// fn执行上下文环境
c: undefined
y: 15
arguments: [15]
this: window

然后将fn执行上下文环境压栈，设置为活动状态（当前唯一）

（4）fn执行完毕后，调用fn函数生成的fn上下文环境出栈，被销毁。
然后bar执行完毕后，调用bar函数生成的上下文环境出栈，被销毁。然后剩下全局上下文环境，出栈销毁。

作用域

JS没有块级作用域，除了全局作用域，函数会创建自己的作用域。作用域在函数定义时就已经确定了，不是在函数调用确定（区别于执行上下文环境，当然this也是上下文环境里的成分）

// 全局作用域
let x = 100
    // fn作用域
    function fn(x) {
        // bar作用域
        function bar(x) {
          console.log(x)
        }
    }

let f1 = fn(5)
let f2 = fn(10)

f1() // 5
f2() // 10

作用域只是一个“地盘”，其中没有变量。变量是通过作用域对应的执行上下文环境中的变量对象来实现的。所以作用域是静态观念的，而执行上下文环境是动态上的，两者并不一样。有闭包存在时，一个作用域存在两个上下文环境也是有的。

同一个作用域下，对同一个函数的不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值，所以，作用域中变量的值是在执行过程中确定的，而作用域是在函数创建时就确定的。

如果要查找一个作用域下某个变量的值，就需要找到这个作用域对应的执行上下文环境，再在其中找到变量的值。

作用域链

函数在定义的时候（不是调用的时候）就已经确定了函数体内部自由变量的作用域。

自由变量：比如a，是在fn作用域使用，但是并没有在fn作用域定义，这就是自由变量。

let a = 100
function fn() {
  let b = 20
  function bar() {
    console.log(a + b) // a是自由变量
  }
  return bar
}

let x = fn(), b = 200
x()

那么自由变量是如何得到的呢？这就引出了作用域链。

bar要取得a的值，就要到创建bar这个函数的作用域中取值（这里是fn作用域），fn作用域也没有a，就到创建fn这个函数的作用域中取值（这里是全局作用域），找到了就结束了。这就是作用域链。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89490.html

谈谈javascript语法里一些难点问题（二）

摘要：讲作用域链首先要从作用域讲起，下面是百度百科里对作用域的定义作用域在许多程序设计语言中非常重要。原文出处谈谈语法里一些难点问题二 3) 作用域链相关的问题作用域链是javascript语言里非常红的概念，很多学习和使用javascript语言的程序员都知道作用域链是理解javascript里很重要的一些概念的关键，这些概念包括this指针，闭包等等，它非常红的另一个重要原因就...

Enlightenment 2019-08-21 10:27 评论0 收藏0
JavaScript之闭包

摘要：以上描述，全部符合闭包的描述，那这就是闭包。二执行过程之前的文章讲了函数的执行上下文栈，变量对象，作用域链等内容，接下来通过闭包代码回顾代码是怎么样的执行过程。将活动对象压入作用域链顶端。函数执行结束，弹出执行上下文栈。本文一共 1300 字，读完只需 5 分钟概述闭包, 可以说是每个前端工程师都听说的一个词，咋一看很难从字面上去理解，从而给人留下了闭包是一个重要又难以理解的...

huashiou 2019-08-23 12:26 评论0 收藏0
深入理解JavaScript作用域和作用域链

前言 JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说，作用域的概念并不是很容易理解，本文我会尽我所能用最简单的方式来解释作用域和作用域链，希望大家有所收获！想阅读更多优质文章请猛戳GitHub博客作用域(Scope) 1.什么是作用域作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见...

baiy 2019-08-23 15:55 评论0 收藏0
深入理解JavaScript作用域和作用域链

前言 JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说，作用域的概念并不是很容易理解，本文我会尽我所能用最简单的方式来解释作用域和作用域链，希望大家有所收获！想阅读更多优质文章请猛戳GitHub博客作用域(Scope) 1.什么是作用域作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见...

ytwman 2019-08-02 14:31 评论0 收藏0
javascript的执行环境和作用域的理解1

摘要：执行环境又称作执行上下文，其作用就是规定了对环境内的变量还有函数的操作权利，主要分为全局的执行环境和局部的执行环境。创建作用域链的作用主要是让每个嵌套关联的执行环境中的变量和函数有序的调用和操作。 1 执行环境（exeution context）又称作执行上下文，其作用就是规定了对环境内的变量还有函数的操作权利，主要分为全局的执行环境和局部的执行环境。 2 当一段代码进行运行的时候...

Raaabbit 2019-08-20 15:09 评论0 收藏0