深入淺析Javascript中上下文的執行順序

這期內容當中小編將會給大家帶來有關深入淺析Javascript中上下文的執行順序，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

一 執行上下文

1什么是執行上下文

執行上下文就是當前的 JavaScript 代碼被解析和執行時所在環境的抽象概念， JavaScript 中運行任何的代碼都是在執行上下文中運行的.

2 執行上下文的類型

執行上下文分為三種類型:

全局執行上下文:只有一個,這是默認的,也是基礎的執行上下文.(不在任何函數中的代碼都是全局執行上下文)他有兩個作用,一個是創建了全局變量,也就是指向window下的變量,另一個是將this的指向全局.

函數執行上下文:有無數個,每個函數都擁有自己的執行上下文，但是只有在函數被調用的時候才會被創建,每次調用時,都會為該函數創建一個新的執行上下文…

Eval 函數執行上下文： 指的是運行在 eval 函數中的代碼，很少用而且不建議使用。

二 執行上下文的生命周期

1.創建階段

執行上下文的生命周期有三個階段:創建階段–執行階段—回收階段(主要說創建階段)

當函數被調用，但沒有執行任何其內部代碼之前，會先確定這三個步驟:

1) 創建變量對象：首先初始化函數的參數 arguments，提升函數聲明和變量聲明
2) 創建作用域鏈：在執行期上下文的創建階段，作用域鏈是在變量對象之后創建的.作用域鏈本身包含變量對象。
作用域鏈用于解析變量。當被要求解析變量時，JavaScript 始終從代碼嵌套的最內層開始，如果最內層沒有
找到變量，就會跳轉到上一層父作用域中查找，直到找到該變量。
3) 確定 this 指向：有多種情況.

2. 執行階段

執行變量賦值、代碼執行

3. 回收階段

執行上下文出棧等待虛擬機回收執行上下文

三. 變量提升和this的指向

1.變量聲明提升:

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

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

上述代碼正常輸出undefined而不是報錯Uncaught ReferenceError: a is not defined,這是因為聲明提升.
相當于:

var a; //聲明 默認值是undefined “準備工作”
console.log(a);
a = 10; //賦值

2. 函數聲明提升

創建函數的方法有兩種，一種是通過函數聲明function aa(){}

另一種是通過函數表達式var aa = function(){} ,那這兩種在函數提升有什么區別呢？

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

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

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

在上面的例子中，aa()調用的時候報錯了，而 bar 能夠正常調用。

我們前面說過變量和函數都會上升，遇到函數表達式 var aa = function(){}時，首先會將var aa上升到函數體頂部，然而此時的 aa 的值為 undefined,所以執行aa()報錯。

而對于函數bar(), 則是提升了整個函數，所以bar()才能夠順利執行。

細節必須注意：當遇到函數和變量同名且都會被提升的情況，函數聲明優先級比較高，因此變量聲明會被函數聲明所覆蓋，但是可以重新賦值。

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

function 聲明的優先級比 var 聲明高，也就意味著當兩個同名變量同時被 function 和 var 聲明時，function 聲明會覆蓋 var 聲明
這代碼等效于：

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

3. 確定this指向

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

// 情況3
function CreateJsPerson(name,age){
//this是當前類的一個實例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">箭頭函數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>

結果:

1 this指向window;

2誰調用了函數，誰就是 this，所以在這個場景下 foo 函數中的 this 就是 obj 對象

3 在構造函數中,this 是當前類的一個實例

4call、apply 和 bind：this 是第一個參數

5箭頭函數 this 指向:箭頭函數沒有自己的 this，看其外層的是否有函數，如果有，外層函數的 this 就是內部箭頭函數的 this，如果沒有，則 this 是 window。

上述就是小編為大家分享的深入淺析Javascript中上下文的執行順序了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。