執(zhí)行上下文是當(dāng)前 JavaScript 代碼被解析和執(zhí)行時所在環(huán)境的抽象概念巾钉。
執(zhí)行上下文的類型
-
全局執(zhí)行上下文：只有一個视粮，瀏覽器中的全局對象就是 window 對象，
this指向這個全局對象。 - 函數(shù)執(zhí)行上下文：存在無數(shù)個阅嘶，只有在函數(shù)被調(diào)用的時候才會被創(chuàng)建，每次調(diào)用函數(shù)都會創(chuàng)建一個新的執(zhí)行上下文载迄。
-
Eval 函數(shù)執(zhí)行上下文： 指的是運行在
eval函數(shù)中的代碼讯柔，很少用而且不建議使用。
執(zhí)行棧
執(zhí)行棧护昧，也叫調(diào)用棧魂迄，具有 LIFO（后進先出）結(jié)構(gòu)，用于存儲在代碼執(zhí)行期間創(chuàng)建的所有執(zhí)行上下文惋耙。
首次運行JS代碼時捣炬，會創(chuàng)建一個全局執(zhí)行上下文并Push到當(dāng)前的執(zhí)行棧中熊昌。每當(dāng)發(fā)生函數(shù)調(diào)用，引擎都會為該函數(shù)創(chuàng)建一個新的函數(shù)執(zhí)行上下文并Push到當(dāng)前執(zhí)行棧的棧頂湿酸。
根據(jù)執(zhí)行棧LIFO規(guī)則婿屹，當(dāng)棧頂函數(shù)運行完成后，其對應(yīng)的函數(shù)執(zhí)行上下文將會從執(zhí)行棧中Pop出推溃，上下文控制權(quán)將移到當(dāng)前執(zhí)行棧的下一個執(zhí)行上下文昂利。
var a = 'Hello World!';
function first() {
console.log('Inside first function');
second();
console.log('Again inside first function');
}
function second() {
console.log('Inside second function');
}
first();
console.log('Inside Global Execution Context');
// Inside first function
// Inside second function
// Again inside first function
// Inside Global Execution Context
又如有以下兩段代碼
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f();
}
checkscope();
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
}
checkscope()();
他們的不同體現(xiàn)在執(zhí)行棧的順序上
ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();
ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();
執(zhí)行上下文的創(chuàng)建
執(zhí)行上下文分兩個階段創(chuàng)建：1）創(chuàng)建階段； 2）執(zhí)行階段
ES3規(guī)范
- 1.創(chuàng)建變量對象VO(包括參數(shù)铁坎，函數(shù)蜂奸，變量)。
- 2.創(chuàng)建作用域鏈硬萍。
- 3.確定this的值扩所。
變量對象與活動對象
在函數(shù)上下文中，用活動對象(AO)來表示變量對象(VO)襟铭。
活動對象和變量對象的區(qū)別在于
- 1碌奉、變量對象（VO）是規(guī)范上或者是JS引擎上實現(xiàn)的，并不能在JS環(huán)境中直接訪問寒砖。
- 2赐劣、當(dāng)進入到一個執(zhí)行上下文后，這個變量對象才會被激活，所以叫活動對象（AO），這時候活動對象上的各種屬性才能被訪問何恶。
調(diào)用函數(shù)時，會為其創(chuàng)建一個Arguments對象咐汞，并自動初始化局部變量arguments，指代該Arguments對象儒鹿。所有作為參數(shù)傳入的值都會成為Arguments對象的數(shù)組元素化撕。
function foo(a) {
var b = 2;
function c() {}
var d = function() {};
b = 3;
}
foo(1);
對于上面的代碼，這個時候AO是
AO = {
arguments: {
0: 1,
length: 1
},
a: 1,
b: undefined,
c: reference to function c(){},
d: undefined
}
形參arguments這時候已經(jīng)有賦值了约炎，但是變量還是undefined植阴，只是初始化的值
這段代碼執(zhí)行后會修改AO
AO = {
arguments: {
0: 1,
length: 1
},
a: 1,
b: 3,
c: reference to function c(){},
d: reference to FunctionExpression "d"
}
總結(jié)如下
- 1、全局上下文的變量對象初始化是全局對象
- 2圾浅、函數(shù)上下文的變量對象初始化只包括 Arguments 對象
- 3掠手、在進入執(zhí)行上下文時會給變量對象添加形參、函數(shù)聲明狸捕、變量聲明等初始的屬性值
- 4喷鸽、在代碼執(zhí)行階段，會再次修改變量對象的屬性值
創(chuàng)建作用域鏈灸拍。
后續(xù)博客說明
確定this的值
后續(xù)博客說明
ES5規(guī)范
- 1做祝、確定 this 的值砾省，也被稱為 This Binding。
- 2混槐、LexicalEnvironment（詞法環(huán)境） 組件被創(chuàng)建纯蛾。
- 3、VariableEnvironment（變量環(huán)境） 組件被創(chuàng)建纵隔。
ExecutionContext = {
ThisBinding = <this value>, // 確定this
LexicalEnvironment = { ... }, // 詞法環(huán)境
VariableEnvironment = { ... }, // 變量環(huán)境
}
This Binding
-
全局執(zhí)行上下文中，
this的值指向全局對象炮姨，在瀏覽器中this的值指向window對象捌刮，而在nodejs中指向這個文件的module對象。 -
函數(shù)執(zhí)行上下文中舒岸，
this的值取決于函數(shù)的調(diào)用方式绅作。具體有：默認(rèn)綁定、隱式綁定蛾派、顯式綁定（硬綁定）俄认、new綁定、箭頭函數(shù)洪乍，具體內(nèi)容后續(xù)會詳細介紹眯杏。
詞法環(huán)境（Lexical Environment）
詞法環(huán)境有兩個組成部分
- 1、環(huán)境記錄：存儲變量和函數(shù)聲明的實際位置
- 2壳澳、對外部環(huán)境的引用：可以訪問其外部詞法環(huán)境
詞法環(huán)境有兩種類型
- 1岂贩、全局環(huán)境：是一個沒有外部環(huán)境的詞法環(huán)境，其外部環(huán)境引用為 null巷波。擁有一個全局對象（window 對象）及其關(guān)聯(lián)的方法和屬性（例如數(shù)組方法）以及任何用戶自定義的全局變量萎津，
this的值指向這個全局對象。 - 2抹镊、函數(shù)環(huán)境：用戶在函數(shù)中定義的變量被存儲在環(huán)境記錄中锉屈，包含了
arguments對象。對外部環(huán)境的引用可以是全局環(huán)境垮耳，也可以是包含內(nèi)部函數(shù)的外部函數(shù)環(huán)境颈渊。
直接看偽代碼可能更加直觀
GlobalExectionContext = { // 全局執(zhí)行上下文
LexicalEnvironment: { // 詞法環(huán)境
EnvironmentRecord: { // 環(huán)境記錄
Type: "Object", // 全局環(huán)境
// 標(biāo)識符綁定在這里
outer: <null> // 對外部環(huán)境的引用
}
}
FunctionExectionContext = { // 函數(shù)執(zhí)行上下文
LexicalEnvironment: { // 詞法環(huán)境
EnvironmentRecord: { // 環(huán)境記錄
Type: "Declarative", // 函數(shù)環(huán)境
// 標(biāo)識符綁定在這里 // 對外部環(huán)境的引用
outer: <Global or outer function environment reference>
}
}
變量環(huán)境（VariableEnvironment）
變量環(huán)境也是一個詞法環(huán)境，因此它具有上面定義的詞法環(huán)境的所有屬性氨菇。
在 ES6 中儡炼，詞法 環(huán)境和 變量 環(huán)境的區(qū)別在于前者用于存儲函數(shù)聲明和變量（ let 和 const ）綁定，而后者僅用于存儲變量（ var ）綁定查蓉。
使用例子進行介紹
let a = 20;
const b = 30;
var c;
function multiply(e, f) {
var g = 20;
return e * f * g;
}
c = multiply(20, 30);
GlobalExectionContext = {
ThisBinding: <Global Object>,
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Object",
// 標(biāo)識符綁定在這里
a: < uninitialized >,
b: < uninitialized >,
multiply: < func >
}
outer: <null>
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Object",
// 標(biāo)識符綁定在這里
c: undefined,
}
outer: <null>
}
}
FunctionExectionContext = {
ThisBinding: <Global Object>,
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
// 標(biāo)識符綁定在這里
Arguments: {0: 20, 1: 30, length: 2},
},
outer: <GlobalLexicalEnvironment>
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
// 標(biāo)識符綁定在這里
g: undefined
},
outer: <GlobalLexicalEnvironment>
}
}
執(zhí)行階段
此階段乌询，完成對所有變量的分配，最后執(zhí)行代碼豌研。
如果 Javascript 引擎在源代碼中聲明的實際位置找不到 let 變量的值妹田，那么將為其分配 undefined 值唬党。
與上述ES3規(guī)范對活動對象的操作大同小異
變量提升
eg1:變量提升
foo; // undefined
var foo = function () {
console.log('foo1');
}
foo(); // foo1，foo賦值
var foo = function () {
console.log('foo2');
}
foo(); // foo2鬼佣，foo重新賦值
eg2:函數(shù)提升
foo(); // foo2
function foo() {
console.log('foo1');
}
foo(); // foo2
function foo() {
console.log('foo2');
}
foo(); // foo2
eg3:聲明優(yōu)先級驶拱，函數(shù) > 變量
foo(); // foo2
var foo = function() {
console.log('foo1');
}
foo(); // foo1，foo重新賦值
function foo() {
console.log('foo2');
}
foo(); // foo1
變量提升的原因：在創(chuàng)建階段晶衷，函數(shù)聲明存儲在變量環(huán)境中蓝纲，而變量會被設(shè)置為 undefined（在 var 的情況下）或保持未初始化（在 let 和 const 的情況下）。所以這就是為什么可以在聲明之前訪問 var 定義的變量（盡管是 undefined ）晌纫，但如果在聲明之前訪問 let 和 const 定義的變量就會提示引用錯誤的原因税迷。這就是所謂的變量提升。
