成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

前端基礎(chǔ)進(jìn)階（二）：執(zhí)行上下文詳細(xì)圖解

cjie / 852人閱讀

摘要：執(zhí)行上下文可以理解為當(dāng)前代碼的執(zhí)行環(huán)境，它會(huì)形成一個(gè)作用域。棧底永遠(yuǎn)都是全局上下文，而棧頂就是當(dāng)前正在執(zhí)行的上下文。我們用來(lái)表示處理執(zhí)行上下文組的堆棧。因此第三步是的執(zhí)行上下文入棧。前端基礎(chǔ)進(jìn)階系列目錄


我們?cè)贘S學(xué)習(xí)初期或者面試的時(shí)候常常會(huì)遇到考核變量提升的思考題。比如先來(lái)一個(gè)簡(jiǎn)單一點(diǎn)的。

console.log(a);   // 這里會(huì)打印出什么？
var a = 20;

暫時(shí)先不管這個(gè)例子，我們先引入一個(gè)JavaScript中最基礎(chǔ)，但同時(shí)也是最重要的一個(gè)概念執(zhí)行上下文（Execution Context）。

每次當(dāng)控制器轉(zhuǎn)到可執(zhí)行代碼的時(shí)候，就會(huì)進(jìn)入一個(gè)執(zhí)行上下文。執(zhí)行上下文可以理解為當(dāng)前代碼的執(zhí)行環(huán)境，它會(huì)形成一個(gè)作用域。JavaScript中的運(yùn)行環(huán)境大概包括三種情況。

全局環(huán)境：JavaScript代碼運(yùn)行起來(lái)會(huì)首先進(jìn)入該環(huán)境

函數(shù)環(huán)境：當(dāng)函數(shù)被調(diào)用執(zhí)行時(shí)，會(huì)進(jìn)入當(dāng)前函數(shù)中執(zhí)行代碼

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

因此在一個(gè)JavaScript程序中，必定會(huì)產(chǎn)生多個(gè)執(zhí)行上下文，在我的上一篇文章中也有提到，JavaScript引擎會(huì)以棧的方式來(lái)處理它們，這個(gè)棧，我們稱(chēng)其為函數(shù)調(diào)用棧(call stack)。棧底永遠(yuǎn)都是全局上下文，而棧頂就是當(dāng)前正在執(zhí)行的上下文。

當(dāng)代碼在執(zhí)行過(guò)程中，遇到以上三種情況，都會(huì)生成一個(gè)執(zhí)行上下文，放入棧中，而處于棧頂?shù)纳舷挛膱?zhí)行完畢之后，就會(huì)自動(dòng)出棧。為了更加清晰的理解這個(gè)過(guò)程，根據(jù)下面的例子，結(jié)合圖示給大家展示。

執(zhí)行上下文可以理解為函數(shù)執(zhí)行的環(huán)境，每一個(gè)函數(shù)執(zhí)行時(shí)，都會(huì)給對(duì)應(yīng)的函數(shù)創(chuàng)建這樣一個(gè)執(zhí)行環(huán)境。
var color = "blue";

function changeColor() {
    var anotherColor = "red";

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

我們用ECStack來(lái)表示處理執(zhí)行上下文組的堆棧。我們很容易知道，第一步，首先是全局上下文入棧。

全局上下文入棧之后，其中的可執(zhí)行代碼開(kāi)始執(zhí)行，直到遇到了changeColor() ，這一句激活函數(shù)changeColor創(chuàng)建它自己的執(zhí)行上下文，因此第二步就是changeColor的執(zhí)行上下文入棧。

changeColor的上下文入棧之后，控制器開(kāi)始執(zhí)行其中的可執(zhí)行代碼，遇到swapColors()之后又激活了一個(gè)執(zhí)行上下文。因此第三步是swapColors的執(zhí)行上下文入棧。

在swapColors的可執(zhí)行代碼中，再?zèng)]有遇到其他能生成執(zhí)行上下文的情況，因此這段代碼順利執(zhí)行完畢，swapColors的上下文從棧中彈出。

swapColors的執(zhí)行上下文彈出之后，繼續(xù)執(zhí)行changeColor的可執(zhí)行代碼，也沒(méi)有再遇到其他執(zhí)行上下文，順利執(zhí)行完畢之后彈出。這樣，ECStack中就只身下全局上下文了。

全局上下文在瀏覽器窗口關(guān)閉后出棧。

注意：函數(shù)中，遇到return能直接終止可執(zhí)行代碼的執(zhí)行，因此會(huì)直接將當(dāng)前上下文彈出棧。

詳細(xì)了解了這個(gè)過(guò)程之后，我們就可以對(duì)執(zhí)行上下文總結(jié)一些結(jié)論了。

單線程

同步執(zhí)行，只有棧頂?shù)纳舷挛奶幱趫?zhí)行中，其他上下文需要等待

全局上下文只有唯一的一個(gè)，它在瀏覽器關(guān)閉時(shí)出棧

函數(shù)的執(zhí)行上下文的個(gè)數(shù)沒(méi)有限制

每次某個(gè)函數(shù)被調(diào)用，就會(huì)有個(gè)新的執(zhí)行上下文為其創(chuàng)建，即使是調(diào)用的自身函數(shù)，也是如此。

為了鞏固一下執(zhí)行上下文的理解，我們?cè)賮?lái)繪制一個(gè)例子的演變過(guò)程，這是一個(gè)簡(jiǎn)單的閉包例子。

function f1(){
    var n=999;
    function f2(){
        alert(n);
    }
    return f2;
}
var result=f1();
result(); // 999

因?yàn)閒1中的函數(shù)f2在f1的可執(zhí)行代碼中，并沒(méi)有被調(diào)用執(zhí)行，因此執(zhí)行f1時(shí)，f2不會(huì)創(chuàng)建新的上下文，而直到result執(zhí)行時(shí)，才創(chuàng)建了一個(gè)新的。具體演變過(guò)程如下。

如果你在某公眾號(hào)看到我的文章，然后發(fā)現(xiàn)下面的評(píng)論說(shuō)最后一個(gè)例子錯(cuò)了，請(qǐng)不要管他們，他們把函數(shù)調(diào)用棧和作用域鏈沒(méi)有分清楚就跑出來(lái)質(zhì)疑，真的很有問(wèn)題。建議大家讀一讀這系列的第六篇文章，教你如何自己擁有判斷對(duì)錯(cuò)的能力。

最后留一個(gè)簡(jiǎn)單的例子，大家可以自己腦補(bǔ)一下這個(gè)例子在執(zhí)行過(guò)程中執(zhí)行上下文的變化情況。

var name = "window";

var p = {
  name: "Perter",
  getName: function() {

    // 利用變量保存的方式保證其訪問(wèn)的是p對(duì)象
    var self = this;
    return function() {
      return self.name;
    }
  }
}

var getName = p.getName();
var _name = getName();
console.log(_name);

下一篇文章繼續(xù)總結(jié)執(zhí)行上下文的創(chuàng)建過(guò)程與變量對(duì)象，求持續(xù)關(guān)注與點(diǎn)贊，謝謝大家。

前端基礎(chǔ)進(jìn)階系列目錄

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90523.html

相關(guān)文章

  • 前端基礎(chǔ)進(jìn)階目錄

    摘要：不過(guò)其實(shí)簡(jiǎn)書(shū)文章評(píng)論里有很多大家的問(wèn)題以及解答，對(duì)于進(jìn)一步理解文中知識(shí)幫助很大的，算是有點(diǎn)可惜吧。不過(guò)也希望能夠?qū)φ趯W(xué)習(xí)前端的你有一些小幫助。如果在閱讀中發(fā)現(xiàn)了一些錯(cuò)誤，請(qǐng)?jiān)谠u(píng)論里告訴我，我會(huì)及時(shí)更改。 前端基礎(chǔ)進(jìn)階（一）：內(nèi)存空間詳細(xì)圖解 前端基礎(chǔ)進(jìn)階（二）：執(zhí)行上下文詳細(xì)圖解 前端基礎(chǔ)進(jìn)階（三）：變量對(duì)象詳解 前端基礎(chǔ)進(jìn)階（四）：詳細(xì)圖解作用域鏈與閉包 前端基礎(chǔ)進(jìn)階（五）：全方位...

    mo0n1andin 評(píng)論0 收藏0

  • 文章分享（持續(xù)更新）

    摘要：文章分享持續(xù)更新更多資源請(qǐng)文章轉(zhuǎn)自一前端文章基礎(chǔ)篇，，前端基礎(chǔ)進(jìn)階一內(nèi)存空間詳細(xì)圖解前端基礎(chǔ)進(jìn)階二執(zhí)行上下文詳細(xì)圖解前端基礎(chǔ)進(jìn)階三變量對(duì)象詳解前端基礎(chǔ)進(jìn)階四詳細(xì)圖解作用域鏈與閉包前端基礎(chǔ)進(jìn)階五全方位解讀前端基礎(chǔ)進(jìn)階六在開(kāi)發(fā)者工具中觀察函數(shù)調(diào) 文章分享（持續(xù)更新） 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://gith...

    whlong 評(píng)論0 收藏0

  • 前端基礎(chǔ)進(jìn)階（一）：內(nèi)存空間詳細(xì)圖解

    摘要：一棧數(shù)據(jù)結(jié)構(gòu)與不同，中并沒(méi)有嚴(yán)格意義上區(qū)分棧內(nèi)存與堆內(nèi)存。引用數(shù)據(jù)類(lèi)型的值是保存在堆內(nèi)存中的對(duì)象。不允許直接訪問(wèn)堆內(nèi)存中的位置，因此我們不能直接操作對(duì)象的堆內(nèi)存空間。為了更好的搞懂變量對(duì)象與堆內(nèi)存，我們可以結(jié)合以下例子與圖解進(jìn)行理解。 showImg(https://segmentfault.com/img/remote/1460000009784102?w=1240&h=683); ...

    _Suqin 評(píng)論0 收藏0

  • 【進(jìn)階1-3期】JavaScript深入之內(nèi)存空間詳細(xì)圖解

    摘要：進(jìn)階期理解中的執(zhí)行上下文和執(zhí)行棧進(jìn)階期深入之執(zhí)行上下文棧和變量對(duì)象但是今天補(bǔ)充一個(gè)知識(shí)點(diǎn)某些情況下，調(diào)用堆棧中函數(shù)調(diào)用的數(shù)量超出了調(diào)用堆棧的實(shí)際大小，瀏覽器會(huì)拋出一個(gè)錯(cuò)誤終止運(yùn)行。 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)） 本周正式開(kāi)始前端進(jìn)階的第一期，本周的主題是調(diào)用堆棧，今天是第3天。 本計(jì)劃一共28期，每期重點(diǎn)攻...

    coordinate35 評(píng)論0 收藏0

  • 前端基礎(chǔ)進(jìn)階（四）：詳細(xì)圖解作用域鏈與閉包

    摘要：之前一篇文章我們?cè)敿?xì)說(shuō)明了變量對(duì)象，而這里，我們將詳細(xì)說(shuō)明作用域鏈。而的作用域鏈，則同時(shí)包含了這三個(gè)變量對(duì)象，所以的執(zhí)行上下文可如下表示。下圖展示了閉包的作用域鏈。其中為當(dāng)前的函數(shù)調(diào)用棧，為當(dāng)前正在被執(zhí)行的函數(shù)的作用域鏈，為當(dāng)前的局部變量。 showImg(https://segmentfault.com/img/remote/1460000008329355);初學(xué)JavaScrip...

    aikin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<