詳細講述JavaScript執行上下文

 這篇文章講述了JavaScript如何執行上下文，大家對JavaScript執行上下文不了解的話或者對JavaScript執行上下文感興趣的話那麼我們就一起來看看這篇文章吧， 好了廢話少說進入正題吧

背景：在面試中經常會遇到函數和變數提升，作用域等問題，如果想深入理解其原理，那麼首先要弄清楚函數執行上下文和執行上下文堆疊這兩個概念。

再次之前先介紹下堆疊的資料結構：

總結起來一句話：新的資料從堆疊頂部壓入，彈出資料也是從堆疊頂端彈出，也就是我們所說的彈夾原理。

1.執行上下文(Excution Context)

#執行上下文可以理解為當前程式碼的執行環境，它會形成一個作用域。 JavaScript中的運作環境大概包含三種情況。

全域環境：JavaScript程式碼運作起來會先進入該環境

函數環境：當函數被呼叫執行時，會進入目前函數中執行程式碼

eval（不建議使用，可忽略）

2.執行環境堆疊(執行上下文堆疊Excution Context Stack)

JavaScript執行在單執行緒上,所以的程式碼都是排隊執行.棧底永遠都是全域上下文，而棧頂就是目前正在執行的上下文。當一開始瀏覽

器執行全域的程式碼,首先建立唯一的一個全域的執行上下文,並將其壓入執行棧的頂部(在瀏覽器關閉的時候出堆疊).當沒進入一個函數

的執行就會創建新的函數執行上下文,並相應的壓入執行棧的頂部.當前函數完成之後,當前函數的執行上下文從堆疊頂出棧,等待垃圾回來

收。

3.執行上下文的生命週期

總的生命週期：建立-->執行-->出棧等待銷毀

建立階段：

#A 建立變數物件:首先初始化函數的參數arguments,初始化函數宣告,初始化變數(undefined)。 函數的優先權要高於變量，如果變

量和函數名重名，變數會被忽略。

a# 建立arguments物件,檢查上下文,初始化參數名稱和值並建立引用的複製。

b 掃描上下文的函數宣告(而非函數表達式)

1.每找到一個函數,在變數物件variableObject上建立一個屬性-----切確的說是函數的名字---屬性值就是指向該函數在記憶體中的位址的一個引用。

2.如果上述函數名稱已經存在於variableObject下，那麼對應的屬性值會被新的參考所覆寫。

c  掃描上下文的變數宣告

##1.每找到一個變數宣告,就會在變數物件上建立一個屬性---就是變數名稱字,並且將變數的值初始化為undefined

d.確定上下文內部this的指向

B 建立作用域鏈

執行階段:

#        執行變數賦值,程式碼執行

回收階段:

         執行情境堆疊等待垃圾回收機制回收情境

案例：下列程式碼用來說明執行情境堆疊的運作方式)

#

	//变量声明
	var a1 = 9,
	a2 = 8,
	a3 = "sss",
	b1 = {name:"xixi"};

	//函数调用
	a1 = f1(a1,a2);
	
	//函数声明
	function f1(a,b){
		//f1函数的执行上下文
		/*
			1.扫描参数: a = 9 b = 8
			2.扫描函数声明 f2 = function(){}
			3.扫描变量声明 t = undefined , m = undefined , i = undefined
		*/
		var t = 0,
		m = 10;

		for(var i=0;i<a;i++){
			console.log(i);
		}

		function f2(){
			console.log("f2");
		}

		return a+b;
	}

環境堆疊示意圖：

#大家如果還不太了解的話，可以自己多實現兩邊就很容易掌握了哦！
相關推薦：

#前端進階（二）：執行上下文圖解

#JavaScript變數物件二：VO在不同的執行上下文中

前端基礎進階（二）：執行上下文詳細圖解

###########################

以上是詳細講述JavaScript執行上下文的詳細內容。更多資訊請關注PHP中文網其他相關文章！