JavaScript作用域及預編譯

来源:https://www.cnblogs.com/jiaobaba/archive/2019/07/20/11062280.html
-Advertisement-
Play Games

幾乎所有的編程語言都可以存儲,訪問,修改變數,那在JavaScript中這些變數放在那裡?程式如何找到他們? js被歸類於解釋執行語言,但事實上他也是一門編譯語言,因為他也要編譯,但於傳統的編譯語言不同,他不是提前編譯,編譯結果也不能在分散式系統中進行移植。但js引擎編譯的步驟和傳統的編譯語言非常相 ...


幾乎所有的編程語言都可以存儲,訪問,修改變數,那在JavaScript中這些變數放在那裡?程式如何找到他們?

js被歸類於解釋執行語言,但事實上他也是一門編譯語言,因為他也要編譯,但於傳統的編譯語言不同,他不是提前編譯,編譯結果也不能在分散式系統中進行移植。但js引擎編譯的步驟和傳統的編譯語言非常相似。

傳統的編譯會經歷3個步驟:

  1. 分詞:將組成的字元串分解成有意義的代碼塊(詞法單元)for instance:var a = 2;被分解成var,a,=,2,;。
  2. 語法分析:將詞法單元轉換成有元素逐級嵌套所組成的代表了程式語法結構的樹,這個樹叫抽象語法樹。
  3. 代碼生成:將抽象語法樹轉換成可執行的代碼的過程。簡單來說就是將抽象語法樹轉化為一組機器指令,用來創建一個叫作a的變數(包括分配記憶體等),並將值存儲到a中。

對於傳統的編譯過程,js引擎要複雜的多,js編譯發生在執行前的幾微秒,然後做好執行他的準備,並且通常馬上就會執行他。

說道這還是沒有說這些變數放在那裡?下麵介紹3位大佬:

  1. 引擎:從頭到尾負責整個js程式的變以及執行過程。
  2. 編譯器:負責語法分析和代碼生成等。
  3. 作用域:負責收集並維護由所有聲明的標識符(變數和函數)組成的一系列查詢,並實施一套非常嚴格的規則,確定當前執行的代碼對這些變數的訪問許可權。

這時候答案就浮出水面。啊,是這伙計--作用域.

作用域?大哥你哪來的啊?上面提到作用域像一個容器一樣收集並維護所有標識符(變數和函數)事實上他是一個對象,收集的東西掛在它的屬性上。作用域的出生是因為函數的產生而產生的。當函數執行的前一刻的時候,會創建一個作用域,這個作用域定義了這個函數執行時的環境,函數每次執行時的作用域都是獨一無二的,因為他是對象啊,就像出生的孩子長得都不太一樣。這個作用域小名特別多,什麼執行期上下文,AO(Activation Object)對象,活動對象。作用域這幫伙計們有個頭叫--全局作用域。裡面的作用域能看到外面的,哈哈,你在我面前就是個小透明,但外的作用域可看不到裡面的。

 

在js高程里解釋道作用域。

 作用域是因函數產生而產生的,每個對象都有屬性和方法,函數(function)也是一種特殊的對象,函數可以有test.name test.prototype ...這些是可以訪問的,還有一些屬性是不可以訪問的隱式屬性僅供JavaScript引擎處理。 比如[[scope]]:指的是作用域鏈,其中存儲了執行期上下文的集合。這個集合呈現鏈式連接,我們把這種連接叫做作用域鏈。作用域鏈本質上是一個指向變數對象的指針列表,他只是引用,但不包含實際變數對象。.[[scope]]這裡面存的就是作用域。系統會根據內部的原理去定期調用scope。當函數執行的前一刻的時候,會創建一個稱為執行期上下文的內部對象(AO activation object)。一個執行期上下文定義了一個函數執行時的環境。函數每次執行時對應的上下文都是獨一無二的,即使執行一樣的函數但是執行期上下文並不相同,所以多次調用一個函數會導致創建多個執行上下文,當函數執行完畢,他所產生的執行上下文會銷毀。

 

上面還提到了編譯,說道js編譯發生在執行前的幾微秒。也講到變數和函數會放到作用域的問題,事實上,是這樣的,在程式執行前不是要進行編譯的嗎,在引擎和編譯器兩位大哥的幫助下 ,在編譯時(函數執行前)會處理聲明的變數和函數,把他掛到作用域這個對象的屬性上。這個過程叫 -- 見下行。

預編譯

當你看見var a = 2;這段程式時,很可能認為這是一句聲明,事實上我們引擎這哥們認為有兩個完全不同的聲明,一個由編譯器在編譯時處理,另一個在引擎運行時處理。

代碼執行前會對其進行編譯,首先編譯器會分詞,然後解析成語法樹,最後進行代碼生成,別忘了代碼生成就是將語法樹轉化為一組機器指令。

  1. 生成代碼前編譯器會詢問作用域是否有該名稱的變數,如果有,忽略該聲明,如果沒有,會要求作用域在當前作用域的集合中聲明一個新變數,並命名為a。
  2. 接下來為引擎生成運行時所需要的代碼,這些代碼用來處理a = 2這個賦值操作,運行時引擎首先會問作用域,在當前作用域集合中是否有一個叫作a的變數,如果找到就會對他賦值,否則就會拋出異常。

也就是說變數和函數在內的所有聲明都會在任何代碼被執行前首先被處理。--先編譯,在執行。

console.log(a);  //undefinde
var a = 2; 
console.log(a);  //2

這也解釋了為什麼第一行沒有報錯的原因。

首先代碼執行前一刻進行編譯,var a; console.log(a); a = 2; console.log(a);類似這樣的執行順序(就好像變數和函數從他們的代碼中出現的位置被移動到了最上面)。 編譯器看到var a會查看當前作用域是否有變數a,沒有聲明一個變數a,開始執行代碼(js是順序執行)。

  1. console.log(a)查看作用域是否有變數a,有,但沒有值,a為undefined。
  2. var a = 2;查看作用域是否有變數a,有,對a賦值a = 2。
  3. console.log(a)查看作用域是否有變數a,有,值為2。

    當函數和變數同名時,函數會覆蓋變數

  由此預編譯過程可以總結成一下過程

  預編譯四部曲:

  • 1.創建AO對象/活動對象(activation object)(執行期上下文)
  • 2.找形參和變數聲明,將變數和形參名作為AO屬性名,值為undefined
  • 3.將實參值和形參統一
  • 4.在函數體裡面找到函數聲明,值賦予函數體

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 呈現效果如下:![07003] 實現代碼如下: 實現原理其實也很簡單,相當於通過 表單向百度伺服器發送了一個 請求。參數解釋如下: 即 Word,查詢關鍵詞。必須參數。 即 Input Encoding,查詢關鍵詞的編碼。有預設值,非必須參數。 表示提交搜索請求的來源站點。有預設值,非必須參數。 [ ...
  • 本文是對函數式編程範式的系列文章從而拉開了與以下延續一個。 介紹 在JavaScript中,函數只是對象。因此,可以構造函數,作為參數傳遞,從函數返回或分配給變數。因此,JavaScript具有一流的功能。更準確地說,JavaScript支持以下內容: 高階函數參數 產生高階函數 嵌套函數 匿名功能 ...
  • nuxt的項目部署到線上環境,有多種方法,這裡分享我使用的方法,一步步照著配置,就可以配置成功~ (1)項目先執行npm run build 打包好 (2)伺服器安裝node 和pm2依賴 伺服器:切換到希望安裝這兩個依賴的目錄下,依賴可以用於多個node項目,這裡我新建了node_project文 ...
  • react-native 0.60以上版本安裝第三方庫的時候會autolink 出現這個問題是 我安裝 react-native-webview 之後運行 ios出現的,這是因為ios 沒有自動安裝依賴庫 此時: 1. cd ios 2. pod install 就會安裝ios所需要的庫 類似的報錯 ...
  • 以下是彈性佈局的一些知識點,很簡單,易懂! 語法:屬性:display 取值: flex:當前元素充當彈性佈局的容器,並且本身以塊級元素顯示。 inline-flex:當前元素充當彈性佈局的容器,並且本身以行內元素顯示。 概念: 容器:容納彈性佈局中子元素的父元素。 項目:容器中的子元素 註意:元素 ...
  • 【 題外話 】:本博主作為一名準畢業生,即將面臨畢業就業問題,即將到大四了,不准備考研的我,那麼該去幹嘛呢?毫無疑問,那就是實習,那麼即使是實習,那麼在要想進入自己心儀的企業之前,筆試這一關終究是無法避免的!特此,刷刷題也是有必要的哈! 【 第一題 】 答案:彈出 number 解析: parseI ...
  • 1.slice() 可以為負數,如果起始位置為負數,則從字元串最後一位向前找對應位數並且向後取結束位置,如果為正整數則從前往後取起始位置到結束位置。 2.substring() 只能非負整數,截取起始結束位置同slice()函數一致。 3.substr() 與第一、第二種函數不同,從起始位置開始截取 ...
  • 當需要做一個翻轉卡片式的div時候,需要兩個div的大小等大例如: 畫出兩個等大的div後,將他們重疊 圖中的兩個div做了重疊,做重疊時候用的屬性是 並且需要將第一頁的css裡加上z-index 可以使的第一頁在第二頁上 main的css需要添加 課使旋轉中心在div的中點 再做完重疊後需要用 這 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...