JavaScript 之 預編譯 作用域,作用域鏈

来源:https://www.cnblogs.com/jiaobaba/archive/2019/02/22/10420531.html
-Advertisement-
Play Games

第一次寫博客,本來是學習jQuery遇到閉包問題,發現並沒有理解閉包,發現閉包牽扯的知識點太多。複習了一遍(發現自己該記住的全忘了)寫在博客里,自己也是小白,希望大神們指點迷津,必將感激不盡。 我們知道JavaScript有兩個特點:單線程,解釋型語(翻譯一行,解釋一行)。但其實翻譯一行,解釋一行是 ...


第一次寫博客,本來是學習jQuery遇到閉包問題,發現並沒有理解閉包,發現閉包牽扯的知識點太多。複習了一遍(發現自己該記住的全忘了)寫在博客里,自己也是小白,希望大神們指點迷津,必將感激不盡。 我們知道JavaScript有兩個特點單線程,解釋型語(翻譯一行,解釋一行)。但其實翻譯一行,解釋一行是最後一部才這樣做,在這之前會有一個語法分析:通篇掃描看有沒有語法錯誤,但不執行,通篇掃描之後,會進行 預編譯 然後 -->解釋一行,執行一行。這就是我們所說的js運行三部曲:語法分析     預編譯     解釋執行   沒錯,預編譯開始啦! test()                        //VM129:1 Uncaught ReferenceError: test is not defined   console.log(a)         // VM118:1 Uncaught ReferenceError: a is not defined  

test();     //456

function test(){

  console.log(456); };   console.log(a);      //undefined var a = 123; 上面四段代碼當我們執行前兩個的時候報錯,瀏覽器告訴我們 test 和 a 沒有被定義,而後兩段代碼並沒有報錯,這就是預編譯。 在學習預編譯的時候我們總是記住一句話:函數聲明整體提升,變數    聲明提升。也就是說預編譯會把整個函數放在最最前面。而變數 聲明提升是什麼意思呢? var a = 123;其實是變數聲明和賦值的兩個過程;1)var a;     2)a = 123;預編譯只把聲明提升在最前面   console.log(a); //undefined var a = 123; ---> var a; console.log(a); //undefined a = 123; -------------------------- test(); //456 function test(){ console.log(456); } ---> funciton test(){ console.log(456); } test(); // 456 但是光記住這兩句話並不能解決所有的問題。 看一下下麵的 console.log(a); function a(){ } var a = 123; 想一下列印的是什麼? 居然是 ƒ a(){

 

} 再看看下麵的更複雜的 console.log(a); function a(a){ var a = 234; var a = function(){

 

} a(); } var a = 123;

 

這個列印出來是什麼呢? ƒ a(a){ var a = 234; var a = function(){

 

} a(); } 這是為什麼呢? 下麵來講一下預編譯: imply global 暗示全局變數:即任何變數。如果變數未經申明就賦值,此變數就為全局對象(window)所有。 a = 123;如果 var a = b = 123;在函數里a就是函數內部變數,b則是全局變數。 一切聲明的全局變數,全是window的屬性(window 就是全局的域):var a = 123;-----> window.a = 123; 使用var聲明的變數會自動被添加到最接近的環境中。 預編譯發生在函數執行的前一刻。 預編譯四部曲: 1.創建AO對象/活動對象(activation object)(執行期上下文) 2.找形參和變數聲明,將變數和形參名作為AO屬性名,值為undefined 3.將實參值和形參統一 4.在函數體裡面找到函數聲明,值賦予函數體 由此我們便知道上面的那兩個例子列印的為什麼是那樣的。 下麵我們來看下更複雜的 function fun(a) {   console.log(a);   var a = 123;   console.log(a);   function a() { }   console.log(a);   var b = function () { }   console.log(b);   function d() { } } fun(1); --> 1.生成AO對象 AO{

 

} 2.找形參和變數聲明,將變數和形參名作為AO屬性名,值為undefined AO{   a: undefined;   b:undefined; } 3.將實參值和形參統一 AO{   a: 1;   b:undefined; } 4.在函數體裡面找到函數聲明,值賦予函數體 AO{   a: function a(){};   b:undefined;   d:function(){} } 預編譯結束 函數執行 AO就像一個創庫一樣,函數執行期間裡面的倉庫也會變化 AO{   a: function a(){};   b:undefined;   d:function(){} } function fun(a) {   console.log(a);      // ƒ a() { }   var a = 123;   console.log(a);      //123   function a() { }   console.log(a);      //123   var b = function () { }   console.log(b);      //ƒ () { }   function d() { } } -------------------------- function test(){   console.log(b);   if(a){     var b = 100;   }   console.log(b);   c = 234;   console.log(c); } var a; test(); a = 10; console.log(c);

 

預編譯 全局GO GO{ a:undefined; test:function test(){} } AO{ b:undefined; } ------------ 執行函數 GO{ a:undefined;--->10 test:function test(){} c:234 } AO{   b:undefined; } function test(){   console.log(b); //undefined   if(a){     var b = 100;   }   console.log(b); //undefined   c = 234;   console.log(c); //234 } var a; test(); a = 10; console.log(c); //234   作用域 作用域鏈 function test(){}; 我們知道一個函數就像一個房子一樣,這個房子形成單獨的域,裡面能看到外面的,外面的看不到裡面的,我們可以把函數生成的空間叫做作用域那這個作用域到底是什麼呢? 這個作用域是因函數產生而產生的,每個對象都有屬性和方法,函數(function)也是一種特殊的對象,函數可以有test.name test.prototype ...這些是可以訪問的 還有一些屬性是不可以訪問的隱式屬性僅供JavaScript引擎處理比如[[scope]]:指的就是我們所說的作用域鏈,其中存儲了執行期上下文的集合。 為什麼時集合呢?作用域鏈:是[[scope]]中所存儲的執行期上下文的集合,這個集合呈現鏈式連接,我們把這種連接叫做作用域鏈。 作用域鏈本質上是一個指向變數對象的指針列表,他只是引用,但不包含實際變數對象。 test.[[scope]]這裡面存的就是作用域。系統會根據內部的原理去定期調用scope。 上面提到了執行期上下文(前面作用域也提到的AO對象就是這個):當函數執行的前一刻的時候,會創建一個稱為執行期上下文的內部對象(AO activation object)。一個執行期上下文定義了一個函數執行時的環境 函數每次執行時對應的上下文都是獨一無二的 test(); test();一樣的函數但是執行期上下文並不相同,所以多次調用一個函數會導致創建多個執行上下文,當函數執行完畢,他所產生的執行上下文會銷毀。

 

看一下下麵的例子 function a(){} var glob = 100; a();   當a函數被定義 a.[[scope]]---> 0:GO{} 因為a函數在全局作用域里,所以他的第一位存的時GO 當a執行執行 a.[[scope]]---> 0:AO{} 1:GO{} ---------------------------------------------- function a(){   function b(){     function c(){}     c();   }   b(); } a(); a defined a.[[scope]]  ---> 0 : GO a doing a.[[scope]]   ---> 0 : a AO              1 : GO b defined b.[[scope]]  ---> 0 : a AO             1 : GO b doing b.[[scope]]   ---> 0 : b AO             1 : a AO             2 : GO c defined c.[[scope]]  ---> 0 : b AO             1 : a AO             2 : GO b doing c.[[scope]]   ---> 0 : c AO             1 : b AO             2 : a AO              3 : GO
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言: 在iOS開發中,或多或少的會嵌入一些H5頁面,有時候需要原生代碼和H5頁面進行交互。iOS8開始蘋果推出性能更強大的WKWebView,所以一下方法是關於WKWebView與JS的交互。 創建WKWebView: 遵守協議 <WKNavigationDelegate, WKUIDelegat ...
  • Tablayout的使用 屬性 |屬性名 | 說明| | | | |app:tabMod |設置Tab模式 | |app:tabTextColor |設置文本顏色 | |app:tabSelectedTextColor |設置選中文本顏色 | |app:tabIndicatorColor |設置下滑 ...
  • 資料參考: 組合測試設計PK正交設計總結:https://www.testwo.com/blog/6376 組合測試工具集:http://www.pairwise.org/tools.asp 組合測試方法-配對測試實踐:https://www.cnblogs.com/leeboke/p/503589 ...
  • 關於使用SQLiteOpenHelper的使用,對於小白的我,百度啦相當多的大神的介紹,均未能讓我這新手(零基礎)成功學會,參考了http://www.cnblogs.com/yaozhenfa/p/xamarin_android_sqliteopenhelper.html,我成功實驗出我的第一個登 ...
  • 在本節中,註意到三維底圖既加入了行政邊界的矢量要素圖層,也加入了場景要素 var countries = new FeatureLayer({ //各國矢量邊界 url:"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/service ...
  • Web前端JQuery面試題(三) 1.怎麼阻止冒泡過程? 2. 方法和 方法的區別? 方法要等頁面中全部元素載入到瀏覽器中才執行,如果頁面中存在大量圖片,要等這些內容載入完畢。 方法只要頁面的 模型載入完畢即可,就會觸發 。 3.請寫出 相同方法? 4. 方法綁定事件有瞭解嗎? 5.寫出一個映射方 ...
  • 基於 jquery 的插件 turn.js 學習筆記 簡介 turn.js是一個可以實現3d書籍展示效果的jq插件,使用html5和css3來執行效果。可以很好的適應於ios和安卓等觸摸設備。 ___ How it works? 下麵是官網展示的最簡單的一個應用實例 1.編寫html部分 2.編寫j ...
  • 大家最常用作圖標的元素是i標簽,為什麼呢? 綜合來看,從實用性上暫時沒看出有什麼缺陷,所以目前用不用 <i> 取決於你對於遵循規範有多潔癖。 具體如何在元素內容前後添加圖標呢?這就要用使用偽元素:before和after,語法: 1. 直接插入圖片 2. 使用特殊字元 2.1 語法 2.2 HTML ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...