深入淺析Javascript中上下文的執(zhí)行順序

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)深入淺析Javascript中上下文的執(zhí)行順序，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

一 執(zhí)行上下文

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

執(zhí)行上下文就是當(dāng)前的 JavaScript 代碼被解析和執(zhí)行時所在環(huán)境的抽象概念， JavaScript 中運行任何的代碼都是在執(zhí)行上下文中運行的.

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

執(zhí)行上下文分為三種類型:

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

函數(shù)執(zhí)行上下文:有無數(shù)個,每個函數(shù)都擁有自己的執(zhí)行上下文，但是只有在函數(shù)被調(diào)用的時候才會被創(chuàng)建,每次調(diào)用時,都會為該函數(shù)創(chuàng)建一個新的執(zhí)行上下文…

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

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

1.創(chuàng)建階段

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

當(dāng)函數(shù)被調(diào)用，但沒有執(zhí)行任何其內(nèi)部代碼之前，會先確定這三個步驟:

1) 創(chuàng)建變量對象：首先初始化函數(shù)的參數(shù) arguments，提升函數(shù)聲明和變量聲明
2) 創(chuàng)建作用域鏈：在執(zhí)行期上下文的創(chuàng)建階段，作用域鏈?zhǔn)窃谧兞繉ο笾髣?chuàng)建的.作用域鏈本身包含變量對象。
作用域鏈用于解析變量。當(dāng)被要求解析變量時，JavaScript 始終從代碼嵌套的最內(nèi)層開始，如果最內(nèi)層沒有
找到變量，就會跳轉(zhuǎn)到上一層父作用域中查找，直到找到該變量。
3) 確定 this 指向：有多種情況.

2. 執(zhí)行階段

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

3. 回收階段

執(zhí)行上下文出棧等待虛擬機回收執(zhí)行上下文

三. 變量提升和this的指向

1.變量聲明提升:

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

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

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

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

2. 函數(shù)聲明提升

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

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

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

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

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()調(diào)用的時候報錯了，而 bar 能夠正常調(diào)用。

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

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

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

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

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

function a() {
 alert("我是函數(shù)");
}
var a; //hoisting
alert(a); //輸出：function a(){ alert('我是函數(shù)') }
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是當(dāng)前類的一個實例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>

結(jié)果:

1 this指向window;

2誰調(diào)用了函數(shù)，誰就是 this，所以在這個場景下 foo 函數(shù)中的 this 就是 obj 對象

3 在構(gòu)造函數(shù)中,this 是當(dāng)前類的一個實例

4call、apply 和 bind：this 是第一個參數(shù)

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

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