執(zhí)行上下文

1. 什么是執(zhí)行上下文

簡而言之江醇，執(zhí)行上下文就是當(dāng)前 JavaScript 代碼被解析和執(zhí)行時(shí)所在環(huán)境的抽象概念友绝， JavaScript 中運(yùn)行任何的代碼都是在執(zhí)行上下文中運(yùn)行

2.執(zhí)行上下文的類型

執(zhí)行上下文總共有三種類型：

• 全局執(zhí)行上下文： 這是默認(rèn)的、最基礎(chǔ)的執(zhí)行上下文欧聘。不在任何函數(shù)中的代碼都位于全局執(zhí)行上下文中乳规。它做了兩件事：1. 創(chuàng)建一個(gè)全局對(duì)象集漾，在瀏覽器中這個(gè)全局對(duì)象就是 window 對(duì)象。2. 將 this 指針指向這個(gè)全局對(duì)象板乙。一個(gè)程序中只能存在一個(gè)全局執(zhí)行上下文是偷。
• 函數(shù)執(zhí)行上下文： 每次調(diào)用函數(shù)時(shí)，都會(huì)為該函數(shù)創(chuàng)建一個(gè)新的執(zhí)行上下文募逞。每個(gè)函數(shù)都擁有自己的執(zhí)行上下文蛋铆，但是只有在函數(shù)被調(diào)用的時(shí)候才會(huì)被創(chuàng)建。一個(gè)程序中可以存在任意數(shù)量的函數(shù)執(zhí)行上下文放接。每當(dāng)一個(gè)新的執(zhí)行上下文被創(chuàng)建刺啦，它都會(huì)按照特定的順序執(zhí)行一系列步驟，具體過程將在本文后面討論纠脾。
• Eval 函數(shù)執(zhí)行上下文： 運(yùn)行在 eval 函數(shù)中的代碼也獲得了自己的執(zhí)行上下文玛瘸，但由于 Javascript 開發(fā)人員不常用 eval 函數(shù)蜕青，所以在這里不再討論。

執(zhí)行上下文的生命周期

執(zhí)行上下文的生命周期包括三個(gè)階段：創(chuàng)建階段→執(zhí)行階段→回收階段糊渊，本文重點(diǎn)介紹創(chuàng)建階段市咆。

1. 創(chuàng)建階段

當(dāng)函數(shù)被調(diào)用，但未執(zhí)行任何其內(nèi)部代碼之前再来，會(huì)做以下三件事：

• 創(chuàng)建變量對(duì)象：首先初始化函數(shù)的參數(shù)arguments蒙兰，提升函數(shù)聲明和變量聲明。下文會(huì)詳細(xì)說明芒篷。
• 創(chuàng)建作用域鏈（Scope Chain）：在執(zhí)行期上下文的創(chuàng)建階段搜变，作用域鏈?zhǔn)窃谧兞繉?duì)象之后創(chuàng)建的。作用域鏈本身包含變量對(duì)象针炉。作用域鏈用于解析變量挠他。當(dāng)被要求解析變量時(shí)，JavaScript 始終從代碼嵌套的最內(nèi)層開始篡帕，如果最內(nèi)層沒有找到變量殖侵，就會(huì)跳轉(zhuǎn)到上一層父作用域中查找，直到找到該變量镰烧。
• 確定this指向：包括多種情況拢军，下文會(huì)詳細(xì)說明

在一段 JS 腳本執(zhí)行之前，要先解析代碼（所以說 JS 是解釋執(zhí)行的腳本語言）怔鳖，解析的時(shí)候會(huì)先創(chuàng)建一個(gè)全局執(zhí)行上下文環(huán)境茉唉，先把代碼中即將執(zhí)行的變量、函數(shù)聲明都拿出來结执。變量先暫時(shí)賦值為undefined度陆，函數(shù)則先聲明好可使用。這一步做完了献幔，然后再開始正式執(zhí)行程序懂傀。

另外，一個(gè)函數(shù)在執(zhí)行之前蜡感，也會(huì)創(chuàng)建一個(gè)函數(shù)執(zhí)行上下文環(huán)境蹬蚁，跟全局上下文差不多，不過 函數(shù)執(zhí)行上下文中會(huì)多出this arguments和函數(shù)的參數(shù)铸敏。

2. 執(zhí)行階段

執(zhí)行變量賦值缚忧、代碼執(zhí)行

3.回收階段

執(zhí)行變量賦值、代碼執(zhí)行

變量提升和this指向的細(xì)節(jié)

1.變量聲明提升

大部分編程語言都是先聲明變量再使用杈笔，但在JS中闪水，事情有些不一樣：

console.log(a) // undefined
var  a = 10

上述代碼正常輸出 undefined而不是報(bào)錯(cuò) UncaughtReferenceError:aisnotdefined,這是因?yàn)槁暶魈嵘╤oisting），相當(dāng)于如下代碼：

var a;//聲明 默認(rèn)值是undefined 準(zhǔn)備工作
console.log(a);
a = 10 // 賦值

函數(shù)聲明提升

我們都知道，創(chuàng)建一個(gè)函數(shù)的方法有兩種球榆，一種是通過函數(shù)聲明 functionfoo(){}另一種是通過函數(shù)表達(dá)式 var foo=function(){} ,那這兩種在函數(shù)提升有什么區(qū)別呢朽肥？

console.log(f1) // function f1()
function f1(){} // 函數(shù)聲明
console.log(f2) // undefined
var f2 = function(){} // 函數(shù)表達(dá)式

接下來我們通過一個(gè)例子來說明這個(gè)問題：

function test() {
  foo(); //Uncaught TypeError "foo is not a function"
  bar(); // "this will run!"
  var foo = function() {
    alert("this won't run !");
  }
  function bar(){// function declaration, given the name 'bar'
    alert("this will run!");
  }
}
test();

在上面的例子中，foo()調(diào)用的時(shí)候報(bào)錯(cuò)了持钉，而bar能夠正常調(diào)用衡招。

我們前面說過變量和函數(shù)都會(huì)上升，遇到函數(shù)表達(dá)式 var foo=function(){}時(shí)每强，首先會(huì)將 foo上升到函數(shù)體頂部始腾，然而此時(shí)的foo的值為undefined,所以執(zhí)行 foo()報(bào)錯(cuò)。
而對(duì)于函數(shù) bar(), 則是提升了整個(gè)函數(shù)空执，所以 bar()才能夠順利執(zhí)行浪箭。

有個(gè)細(xì)節(jié)必須注意：當(dāng)遇到函數(shù)和變量同名且都會(huì)被提升的情況，函數(shù)聲明優(yōu)先級(jí)比較高辨绊，因此變量聲明會(huì)被函數(shù)聲明所覆蓋奶栖，但是可以重新賦值。

alert(a); //輸出：function a(){ alert('我是函數(shù)') }
function a(){alert('我是函數(shù)')}
var a = '我是變量'
alert(a); // 輸出：‘我是變量’

function聲明的優(yōu)先級(jí)比var聲明高门坷，也就意味著當(dāng)兩個(gè)同名變量同時(shí)被function和var聲明時(shí)宣鄙，function聲明會(huì)覆蓋var聲明

這代碼等效于：

function a(){alert('我是函數(shù)')} 
var a;//hoisting
alert(a);  //輸出：function a(){ alert('我是函數(shù)') }
a = '我是變量';//賦值
alert(a);   //輸出：'我是變量'

這是因?yàn)楫?dāng)函數(shù)執(zhí)行的時(shí)候,首先會(huì)形成一個(gè)新的私有的作用域，然后依次按照如下的步驟執(zhí)行：

• 如果有形參默蚌，先給形參賦值
• 進(jìn)行私有作用域中的預(yù)解釋冻晤，函數(shù)聲明優(yōu)先級(jí)比變量聲明高，最后后者會(huì)被前者所覆蓋敏簿，但是可以重新賦值
• 私有作用域中的代碼從上到下執(zhí)行

3.確定this的指向

先搞明白一個(gè)很重要的概念 —— this的值是在執(zhí)行的時(shí)候才能確認(rèn)明也，定義的時(shí)候不能確認(rèn)！為什么呢 —— 因?yàn)閠his是執(zhí)行上下文環(huán)境的一部分惯裕，而執(zhí)行上下文需要在代碼執(zhí)行之前確定，而不是定義的時(shí)候绣硝◎呤疲看如下例子：

// 情況1
function foo() {
  console.log(this.a) //1
}
var a = 1
foo()
// 情況2
function fn(){
  console.log(this);
}
var obj={fn:fn};
obj.fn(); 
//this->obj

// 情況3
function CreateJsPerson(name,age){
    //this是當(dāng)前類的一個(gè)實(shí)例p1
    this.name=name;  //=>p1.name=name
    this.age=age; //=>p1.age=age
}
var p1 = new CreateJsPerson("尹華芝",48);

// 情況4
function add(c, d){  
    return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

// 情況5
<button id="btn1">箭頭函數(shù)this</button>
<script type="text/javascript">   
    
let btn1 = document.getElementById('btn1');
    
let obj = {        
    name: 'kobe',        
    age:39,        
    getName: function () {
      btn1.onclick = () => {
            console.log(this);//obj
       };
    }
    };
    obj.getName();
</script>

接下來我們逐一解釋上面幾種情況

• 對(duì)于直接調(diào)用 foo 來說，不管 foo 函數(shù)被放在了什么地方鹉胖，this 一定是 window
• 對(duì)于 obj.foo() 來說握玛，我們只需要記住，誰調(diào)用了函數(shù)甫菠，誰就是 this挠铲，所以在這個(gè)場景下 foo 函數(shù)中的 this 就是 obj 對(duì)象
• 在構(gòu)造函數(shù)模式中，類中(函數(shù)體中)出現(xiàn)的this.xxx=xxx中的this是當(dāng)前類的一個(gè)實(shí)例
• call寂诱、apply和bind：this 是第一個(gè)參數(shù)
• 箭頭函數(shù)this指向:箭頭函數(shù)沒有自己的this拂苹，看其外層的是否有函數(shù)，如果有痰洒，外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this瓢棒，如果沒有浴韭，則this是window。

四脯宿、執(zhí)行上下文棧

函數(shù)多了念颈，就有多個(gè)函數(shù)執(zhí)行上下文，每次調(diào)用函數(shù)創(chuàng)建一個(gè)新的執(zhí)行上下文连霉，那如何管理創(chuàng)建的那么多執(zhí)行上下文呢榴芳？
JavaScript 引擎創(chuàng)建了執(zhí)行上下文棧來管理執(zhí)行上下文。可以把執(zhí)行上下文棧認(rèn)為是一個(gè)存儲(chǔ)函數(shù)調(diào)用的棧結(jié)構(gòu)跺撼，遵循先進(jìn)后出的原則翠语。

image

• JavaScript執(zhí)行在單線程上财边，所有的代碼都是排隊(duì)執(zhí)行肌括。
• 一開始瀏覽器執(zhí)行全局的代碼時(shí)，首先創(chuàng)建全局的執(zhí)行上下文酣难，壓入執(zhí)行棧的頂部谍夭。
• 每當(dāng)進(jìn)入一個(gè)函數(shù)的執(zhí)行就會(huì)創(chuàng)建函數(shù)的執(zhí)行上下文，并且把它壓入執(zhí)行棧的頂部憨募。當(dāng)前函數(shù)執(zhí)行完成后紧索，當(dāng)前函數(shù)的執(zhí)行上下文出棧，并等待垃圾回收菜谣。
• 瀏覽器的JS執(zhí)行引擎總是訪問棧頂?shù)膱?zhí)行上下文珠漂。
• 全局上下文只有唯一的一個(gè)，它在瀏覽器關(guān)閉時(shí)出棧尾膊。
  我們?cè)賮砜磦€(gè)例子：

var color = 'blue';
function changeColor() {    
  var anotherColor = 'red';    
  function swapColors() {        
  var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }
    swapColors();
}
changeColor();

上述代碼運(yùn)行按照如下步驟：

• 當(dāng)上述代碼在瀏覽器中加載時(shí)媳危，JavaScript 引擎會(huì)創(chuàng)建一個(gè)全局執(zhí)行上下文并且將它推入當(dāng)前的執(zhí)行棧
• 調(diào)用 changeColor函數(shù)時(shí)，此時(shí)changeColor函數(shù)內(nèi)部代碼還未執(zhí)行冈敛，js執(zhí)行引擎立即創(chuàng)建一個(gè)changeColor的執(zhí)行上下文（簡稱EC）待笑，然后把這執(zhí)行上下文壓入到執(zhí)行棧（簡稱ECStack）中。
• 執(zhí)行changeColor函數(shù)過程中抓谴，調(diào)用swapColors函數(shù)暮蹂，同樣地，swapColors函數(shù)執(zhí)行之前也創(chuàng)建了一個(gè)swapColors的執(zhí)行上下文癌压，并壓入到執(zhí)行棧中仰泻。
• swapColors函數(shù)執(zhí)行完成，swapColors函數(shù)的執(zhí)行上下文出棧滩届，并且被銷毀集侯。

• changeColor函數(shù)執(zhí)行完成，changeColor函數(shù)的執(zhí)行上下文出棧，并且被銷毀
  image