13-1 執行背景關系介紹
執行背景關系概念
什么是執行背景關系
執行背景關系(Execution Context):函式執行前進行的準備作業(也稱執行背景關系環境)。
運行JavaScript代碼時,當代碼執行進入一個環境時,就會為該環境創建一個執行背景關系,它在運行代碼前做一些準備作業,比如說：確定作用域,創建區域變數物件等。
####JavaScript中執行環境
1：全域環境
2：函式環境
3：eval函式環境(已經被淘汰)
####相對應的執行背景關系型別同樣也有三種
1：全域執行背景關系
2：函式執行背景關系
eval函式執行背景關系
JavaScript運行時首先會進入全域環境,對應會生成全域背景關系。程式代碼中基本都會存在函式,那么呼叫函式，就會進入函式執行環境,對應就會產生該函式的執行背景關系。
因為JavaScript是單執行緒,所以同一個時間段只能做一件任務,完成之后才可以繼續下一個任務,所以就必須有一個排隊機制。
####JavaScript 中管理多個執行背景關系
函式編程中,代碼中會宣告多個函式,對應的執行背景關系也會存在多個。在JavaScript中，通過堆疊的存取方式來管理執行背景關系，我們可稱其為執行堆疊
，或函式呼叫堆疊(Call Stack)。
####堆疊資料結構
堆疊遵循"先進后出，后進先出"的規則,或稱LIFO(“Last in First Out”)的規則。
堆疊資料結構的特點：
1：后進先出，先進后出
2：出口在頂部，且僅有一個
執行堆疊(函式呼叫堆疊)
JavaScript中如何通過堆疊來管理多個執行背景關系。
程式執行進入一個執行環境時，它的執行背景關系就會被創建，并被推入執行堆疊中(入堆疊)。程式執行完成時，它的執行背景關系就會被摧毀，并從堆疊頂被推出(出堆疊)，控制權交由下一個執行背景關系。
因為 JavaScript 執行中最先進入全域環境，所以處于"堆疊底的永遠是全域環境的執行背景關系"。而處于"堆疊頂的是當前正在執行背景關系"，當函式呼叫完成后，它就會從堆疊頂被推出(通常情況下，閉包會阻止該操作)。
全域環境只有一個，對應的全域執行背景關系也只有一個，只有當頁面被關閉之后才會從執行堆疊中被推出，否則一直存在于堆疊底。至于函式背景關系的個數是沒有任何限制的，每到呼叫執行一個函式時，引擎就會自動新建出一個函式背景關系。
例：
(function foo(i) {
if (i == 3) {
return;
} else {
console.log(i);
foo(++i);
}
})(0);
//步驟如下
//全域背景關系
//函式背景關系 0
//函式背景關系 1
//函式背景關系 2
####執行背景關系的生命周期
執行背景關系的生命周期有兩個階段：
1：創建階段(進入執行背景關系)：函式被呼叫時，進入函式環境，為其創建一個執行背景關系，此時進入創建階段。
2：執行階段(代碼執行)：執行函式中代碼時，此時執行背景關系進入執行階段。
####創建階段的操作
1：創建變數的物件
函式環境會初始化創建的Arguments物件，形式引數(并賦值)
普通函式宣告(并賦值)
區域變數宣告，函式運算式宣告(未賦值)
2：初始化作用域鏈
3：確定this指向(this由呼叫者確定)
4：確定作用域(語法環境決定，哪里宣告定義，就在哪里確定)
####執行階段的操作
1：變數物件賦值
變數賦值
函式運算式賦值
2：*呼叫函式
3：順序執行其他代碼
####執行背景關系與作用域區別
注：作用域和執行背景關系并不是同一個概念
執行代碼時，會產生一個執行背景關系環境，每次呼叫函式都有會執行背景關系環境。當函式呼叫完成時，這個背景關系環境以及其中的資料都會被消除(除了閉包)，處于活動狀態的執行背景關系環境只有一個。
而作用域在函式定義時就已經確定了，不是在函式呼叫時確定(區別于執行背景關系環境，并且this也是背景關系環境里的成分)
// 全域作用域
let x = 100;
function bar() {
console.log(x);
}
// fn ?作用域
function fn() {
let x = 50;
// bar作用域
bar();
}
fn(); // 100
作用域只是一個"地盤"，其中沒有變數。變數是通過作用域對應的執行背景關系環境中的變數物件來實作的，所以作用域是靜態觀念的，而執行背景關系環境是動態上的，兩者并不一樣。
有閉包存在時，一個作用域存在兩個背景關系環境也是有的。也就是說，作用域只是用于劃分你在這個作用域里面定義的變數的有效范圍，出了這個作用域就無效。
同一個作用域下，對同一個函式的不同的呼叫就會產生不同的執行背景關系你環境，然而產生不同的變數的值，所以，作用域中變數的值時執行程序中確定的，而作用域是在函式創建時確定的。
如果要查找一個作用域下某個變數的值，就需要找到這個作用域對應的執行背景關系環境，再在其中找到變數的值。
13-2 變數物件
以上介紹背景關系的概念。整個執行背景關系的生命周期包含2個階段：建立階段和執行階段。
當處于執行背景關系的建立階段時，可以將整個背景關系環境看作是一個物件。該物件擁有3個屬性
例
executionContextObj = {
variableObject : {}, //變數物件，里面包含 Arguments 物件，形參和實參，函式和區域變數
scopeChain : {},//作用域鏈，包含內部背景關系所有變數物件的串列
this ：{}//背景關系中 this 的指向物件
}
以上執行背景關系抽象成為了一個物件，擁有3個屬性，分別是變數物件，作用域鏈以及this指向
變數物件里面所擁有的東西
在函式的建立階段，首先會建立 Arguments 物件。然后確定形式引數，檢查當前背景關系的函式宣告，每當找到一個函式宣告，就會在 variableObject 下面用函式名建立一個屬性，屬性值就指向該函式在記憶體中的地址的一個參考。如果上述函式名已經存在于 variableObject (簡稱VO)下面，那么對應的屬性值就會被新的參考給覆寫。最后，是確定當前背景關系中的區域變數，如果遇到和函式名同名的變數，則會忽略該變數。
函式的這兩個階段以及變數物件是如何變化的
例：
const foo = function(i){
var a = "Hello";
var b = function privateB(){};
function c(){} }
foo(10);
首先在建立階段的變數物件如下
fooExecutionContext = {
variavleObject : {
arguments : {0 : 10,length : 1}, // 確定Arguments 物件
i : 10, // 確定形式引數
c : pointer to function c(), // 確定函式參考
a : undefined, // 區域變數 undefined
b : undefined // 區域變數 undefined
},
scopeChain : {},
this : {}
由此可見，在建立階段，除了Arguments，函式的宣告，以及形式引數被賦予了具體的屬性值外，其他的變數屬性默認的都是 undefined 。并且普通形式宣告的函式的提升是在變數的上面的。
一旦上述建立階段結束，引擎就會進入代碼執行階段，這個階段完成后，上述執行背景關系物件如下，變數就會被賦上具體的值。
fooExecutionContext = {
variavleObject : {
arguments : {0 : 10,length : 1},
i : 10,
c : pointer to function c(),
a : "Hello",// a 變數被賦值為 Hello
b : pointer to function privateB() // b 變數被賦值為 privateB()函式},
scopeChain : {},
this : {}
}
只有在代碼執行階段，區域變數才會被賦予具體的值。在建立階段區域變數的值都是undefined。這其實也就是解釋了變數提升的原理。
加深對函式這兩個階段的程序理解
(function () {
console.log(typeof foo);
console.log(typeof bar);
var foo = "Hello";
var bar = function () {
return "World";
}
function foo() {
return "good";
}
console.log(foo, typeof foo);
})()
定義一個IIFE，該函式在建立階段的變數物件如下：
fooExecutionContext = {
variavleObject : {
arguments : {length : 0},
foo : pointer to function foo(),
bar : undefined },
scopeChain : {},
this : {}
}
首先確定 Arguments 物件，接下來就是形式引數，由于本例中不存在形式引數，所以接下來開始確定函式的參考，找到foo()函式后，創建 foo 識別符號來指向這個foo()函式，之后同名的 foo 變數不會被創建，會直接避惡忽略。然后創建 bar 變數，不過初始值為 undefined 。
建立階段完成之后，接下來進入代碼執行階段，開始一句一句的執行代碼，結果如下：
(function () {
console.log(typeof foo); // function
console.log(typeof bar); // undefined
var foo = "Hello"; // foo被重新賦值 變成一個字串
var bar = function () {
return "World";
}
function foo() {
return "good";
}
console.log(foo, typeof foo); //Hello string
})()
什么是閉包
從廣義上講：所有的函式都是閉包，
從狹義上講：一個函式必須要滿足兩個條件，
一個函式要嵌套一個內部函式，標并且內部函式要訪問外部函式的變數
內部函式要被外部參考
為什么要使用閉包
為了保持在函式內部宣告的變數
閉包的原理
閉包就是把變數保護起來，讓它不受外部污染，用一個內部函式來操作變數，在把它封裝在一個外部函式中，且外部函式回傳內部函式。
閉包的優缺點
優點
1、通過閉包可以讓外部環境訪問到函式內部的區域變數。
2、通過閉包可以讓區域變數持續保持下來，不隨著它的背景關系環境一起銷毀。
缺點
長時間占用容易導致記憶體泄漏
閉包的應用
防止變數命名沖突\保存部分動態變數值在記憶體中
比如經常會使用時間函式對某一個變數進行操作，如：
let a = 100;
setTimeout(function () {
console.log(++a);
}, 10
在DOM事件操作中，也經常使用閉包，如：
<input id="count" type="button" value="https://bbs.csdn.net/topics/計數">
<script>
(function(){
var cnt = 0;
var count = document.getElementById("count");
count.onclick = function(){
console.log(++cnt);
}
})()
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/97648.html
標籤：新技術前沿
上一篇：matlab畫圖
下一篇：小組id