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

wenyiweb 發布于2019-08-21 17:25 / 486人閱讀

摘要：執行上下文環境然后將執行上下文環境壓棧，設置為活動狀態當前唯一然后執行到第行，調用函數。有閉包存在時，一個作用域存在兩個上下文環境也是有的。這就是作用域鏈。

本文參考引自：深入理解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這個函數的作用域中取值（這里是全局作用域），找到了就結束了。這就是作用域鏈。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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