跳到主要內容

通過javascript 執行環境理解她


古往今來最難的學的武功(javascript)算其一。




欲練此功必先自宮，願少俠習的此功，笑傲江湖。



你將了解



  • 執行棧（Execution stack）

  • 執行上下文（Execution Context）

  • 作用域鏈（scope chains）

  • 變量提升（hoisting）

  • 閉包（closures）

  • this 綁定


執行棧


又叫調用棧，具有 LIFO（last in first out 後進先出）結構，用於存儲在代碼執行期間創建的所有執行上下文。


當 JavaScript 引擎首次讀取你的腳本時，它會創建一個全局執行上下文並將其推入當前的執行棧。每當發生一個函數調用，引擎都會為該函數創建一個新的執行上下文並將其推到當前執行棧的頂端。
引擎會運行執行上下文在執行棧頂端的函數，當此函數運行完成后，其對應的執行上下文將會從執行棧中彈出，上下文控制權將移到當前執行棧的下一個執行上下文。


我們通過下面的示例來說明一下


function one() {
   console.log('one')
   two()
 }
 function two() {
   console.log('two')
 }
 one()

當程序（代碼）開始執行時 javscript 引擎創建 GobalExecutionContext （全局執行上下文）推入當前的執行棧，此時 GobalExecutionContext 處於棧頂會立刻執行全局執行上下文 然後遇到 one() 引擎都會為該函數創建一個新的執行上下文 oneFunctionExecutionContext 並將其推到當前執行棧的頂端並執行，然後遇到two() twoFunctionExecutionContext 入棧並執行至出棧，回到 oneFunctionExecutionContext 繼續執行至出棧 ,最後剩餘一個 GobalExecutionContext 它會在程序關閉的時候出棧。


然後調用棧如下圖：


如果是這樣的代碼


function foo() {
   foo()
 }
 foo()

如下

當一個遞歸沒有結束點的時候就會出現棧溢出


什麼是執行上下文


了解 JavaScript 的執行上下文，有助於你理解更高級的內容比如變量提升、作用域鏈和閉包。既然如此，那到底什麼是"執行上下文"呢？


執行上下文是當前 JavaScript 代碼被解析和執行時所在環境的抽象概念。


Javascript 中代碼的執行上下文分為以下三種：



  1. 全局執行上下文（Global Execution Context）- 這個是默認的代碼運行環境，一旦代碼被載入，引擎最先進入的就是這個環境。

  2. 函數執行上下文（Function Execution Context） - 當執行一個函數時，運行函數體中的代碼。

  3. Eval - 在 Eval 函數內運行的代碼。


javascript 是一個單線程語言，這意味着在瀏覽器中同時只能做一件事情。當 javascript 解釋器初始執行代碼，它首先默認進入全局上下文。每次調用一個函數將會創建一個新的執行上下文。



javascript執行棧中不同執行上下文之間的詞法環境有一種關聯關係，從棧頂到棧底（從局部直到全局）,這種關係被叫做作用域鏈。



簡單的說，每次你試圖訪問函數執行上下文中的變量時，進程總是從自己上下文環境中開始查找。如果在自己的上下文中沒發現要查找的變量，繼續搜索下一層上下文。它將檢查執行棧中每一個執行上下文環境，尋找和變量名稱匹配的值，直到找到為止，如果到全局都沒有則拋出錯誤。


執行上下文的創建過程


我們現在已經知道，每當調用一個函數時，一個新的執行上下文就會被創建出來。然而，在 javascript 引擎內部，這個上下文的創建過程具體分為兩個階段:


創建階段 > 執行階段


創建階段


執行上下文在創建階段創建。在創建階段發生以下事情：



  1. LexicalEnvironment 組件已創建。

  2. VariableEnvironment 組件已創建。


因此，執行上下文可以在概念上表示如下：


ExecutionContext = {
   LexicalEnvironment = <詞法環境>，
   VariableEnvironment = <變量環境>，
 }

詞法環境（Lexical Environment）


文檔將詞法環境定義為：



詞法環境是一種規範類型，基於 ECMAScript 代碼的詞法嵌套結構來定義標識符與特定變量和函數的關聯關係。詞法環境由環境記錄（environment record）和可能為空引用（null）的外部詞法環境組成。



簡而言之，詞法環境是一個包含標識符變量映射的結構。（這裏的標識符表示變量/函數的名稱，變量是對實際對象【包括函數類型對象】或原始值的引用）


詞法環境有兩種類型



  • 全局環境（在全局執行上下文中）是一個沒有外部環境的詞法環境。全局環境的外部環境引用為 null。它擁有一個全局對象（window 對象）及其關聯的方法和屬性（例如數組方法）以及任何用戶自定義的全局變量，this 的值指向這個全局對象。

  • 函數環境，用戶在函數中定義的變量被存儲在環境記錄中。對外部環境的引用可以是全局環境，也可以是包含內部函數的外部函數環境。


每個詞彙環境都有三個組成部分：


1）環境記錄（environment record）


2）對外部環境的引用(outer)


3） 綁定 this


環境記錄 同樣有兩種類型（如下所示）：



  • 聲明性環境記錄 存儲變量、函數和參數。一個函數環境包含聲明性環境記錄。

  • 對象環境記錄 用於定義在全局執行上下文中出現的變量和函數的關聯。全局環境包含對象環境記錄


抽象地說，詞法環境在偽代碼中看起來像這樣：



詞法環境和環境記錄值是純粹的規範機制，ECMAScript 程序不能直接訪問或操縱這些值。



GlobalExectionContext = {
   // 詞法環境
   LexicalEnvironment:{
     // 功能環境記錄
     EnvironmentRecord:{
       Type:"Object",
       // Identifier bindings go here
      }
     outer:<null>,
     this:<global object>
   }
 }
 FunctionExectionContext = {
   LexicalEnvironment:{
     EnvironmentRecord:{
       Type:"Declarative",
       // Identifier bindings go here
      }
     outer:<Global or outer function environment reference>,
     this:<取決於函數的調用方式>
   }
 }

變量環境:


它也是一個詞法環境，其 EnvironmentRecord 包含了由 VariableStatements 在此執行上下文創建的綁定。
如上所述，變量環境也是一個詞法環境，因此它具有上面定義的詞法環境的所有屬性。
在 ES6 中，LexicalEnvironment 組件和 VariableEnvironment 組件的區別在於前者用於存儲函數聲明和變量（ let 和 const ）綁定，而後者僅用於存儲變量（ var ）綁定。
讓我們結合一些代碼示例來理解上述概念：


let a = 20
 const b = 30
 var c
 
 function multiply(e, f) {
   var g = 20
   return e * f * g
 }
 
 c = multiply(20, 30)

執行上下文如下所示：


GlobalExectionContext = {
   LexicalEnvironment:{
     EnvironmentRecord:{
       Type:"Object",
       // Identifier bindings go here
       a:<uninitialized>,
       b:<uninitialized>,
       multiply:<func>
     },
     outer:<null>,
     ThisBinding:<Global Object>
   },
   VariableEnvironment:{
     EnvironmentRecord:{
       Type:"Object",
       // Identifier bindings go here
       c:undefined,
     }
     outer:<null>,
     ThisBinding:<Global Object>
   }
 }

在執行階段，完成變量賦值。因此，在執行階段，全局執行上下文將看起來像這樣。


// 執行
 GlobalExectionContext = {
 LexicalEnvironment: {
     EnvironmentRecord: {
       Type: "Object",
       // Identifier bindings go here
       a: 20,
       b: 30,
       multiply: < func >
     }
     outer: <null>,
     ThisBinding: <Global Object>
   },
 VariableEnvironment: {
     EnvironmentRecord: {
       Type: "Object",
       // Identifier bindings go here
       c: undefined,
     }
     outer: <null>,
     ThisBinding: <Global Object>
   }
 }

當 multiply(20, 30)遇到函數調用時，會創建一個新的函數執行上下文來執行函數代碼。因此，在創建階段，函數執行上下文將如下所示：


// multiply 創建
 FunctionExectionContext = {
 LexicalEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       Arguments: {0: 20, 1: 30, length: 2},
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>,
   },
 VariableEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       g: undefined
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>
   }
 }

在此之後，執行上下文將執行執行階段，這意味着完成了對函數內部變量的賦值。因此，在執行階段，函數執行上下文將如下所示：


// multiply 執行
 FunctionExectionContext = {
 LexicalEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       Arguments: {0: 20, 1: 30, length: 2},
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object>,
   },
 VariableEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       g: 20
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>
   }
 }

函數完成后，返回的值賦值給c。因此，全局詞法環境得到了更新。之後，全局代碼完成，程序結束。


注： 在執行階段，如果 Javascript 引擎在源代碼中聲明的實際位置找不到 let 變量的值，那麼將為其分配 undefined 值。


變量提升


在網上一直看到這樣的總結： 在函數中聲明的變量以及函數，其作用域提升到函數頂部，換句話說，就是一進入函數體，就可以訪問到其中聲明的變量以及函數。這是對的，但是知道其中的緣由嗎？相信你通過上述的解釋應該也有所明白了。不過在這邊再分析一下。


你可能已經注意到了在創建階段 let 和 const 定義的變量沒有任何與之關聯的值，但 var 定義的變量設置為 undefined。
這是因為在創建階段，代碼會被掃描並解析變量和函數聲明，其中函數聲明存儲在環境中，而變量會被設置為 undefined（在 var 聲明變量的情況下）或保持未初始化（在 let 和const 聲明變量的情況下）。
這就是為什麼你可以在聲明之前訪問var 定義的變量（儘管是 undefined ），但如果在聲明之前訪問let 和const 定義的變量就會提示引用錯誤的原因。
這就是我們所謂的變量提升。



思考題：



console.log('step1:',a)
 var a = 'artiely'
 console.log('step2:',a)
 function bar (a){
   console.log('step3:',a)
   a = 'TJ'
   console.log('step4:',a)
   function a(){
   }
 }
 bar(a)
 console.log('step5:',a)

對外部環境的引用


上面代碼如果我們改用調用方式如下：


let a = 20
 const b = 30
 var c
 
 function multiply() {
   var g = 20
   return a * b * g
 }
 
 c = multiply()

其實你會發現結果是一樣的
但是 multiply 的執行上下文卻發生一些變化


// 創建
 FunctionExectionContext = {
 LexicalEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       Arguments: { length: 0},
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>,
   },
 VariableEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       // Identifier bindings go here
       g: undefined
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>
   }
 }
 

// 執行
 FunctionExectionContext = {
 LexicalEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       Arguments: { length: 0},
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>,
   },
 VariableEnvironment: {
     EnvironmentRecord: {
       Type: "Declarative",
       // Identifier bindings go here
       g: 20
     },
     outer: <GlobalLexicalEnvironment>,
     ThisBinding: <Global Object or undefined>
   }
 }

multiply() 執行的時候會直接在 outer: <GlobalLexicalEnvironment>,中查找a,b


對外部環境的引用意味着它可以訪問其外部詞法環境。這意味着如果在當前詞法環境中找不到它們，JavaScript 引擎可以在外部環境中查找變量。這就是之前說的 作用域鏈


閉包



MDN 解釋 閉包是由函數以及創建該函數的詞法環境組合而成。這個環境包含了這個閉包創建時所能訪問的所有局部變量



這是我認為對閉包最合理的解釋了，就看你怎麼理解閉包的機制了。
其實閉包與作用域鏈有着密切的關係。


首先我們來看看什麼樣的代碼會產生閉包。


function foo() {
   var name = 'artiely'
   function bar() {
     console.log(`hello `)
   }
   bar()
 }
 foo()

以上代碼是有閉包嗎？沒有~


function foo() {
   var name = 'artiely'
   function bar() {
     console.log(`hello ${name}`)
   }
   bar()
 }
 foo()

我們只做了微小的調整，現在就有閉包了,我們只是在bar中加入了name得引用
上面的代碼還可以寫成這樣


// 或者
 function foo() {
   var name = 'artiely'
   return function bar() {
     console.log(`hello ${name}`)
   }
 }
 foo()()

對於閉包的形成我進行了如下的幾點歸納



  1. A 函數內必須有 B 函數的聲明；

  2. B 函數必須引用 A 函數的變量；

  3. B 函數被調用（當然前提是 A 函數被調用）


以上 3 點缺一不可


我們來分析一下上面代碼的執行上下文


// 創建
 fooFunctionExectionContext = {
 LexicalEnvironment: {
   EnvironmentRecord: {
     Type: "Declarative",
     Arguments: { length: 0},
     bar: < func >,
   },
   outer: <GlobalLexicalEnvironment>,
   ThisBinding: <Global Object or undefined>,
 },
 VariableEnvironment: {
   EnvironmentRecord: {
     Type: "Declarative",
     name: undefined
   },
   outer: <GlobalLexicalEnvironment>,
   ThisBinding: <Global Object or undefined>
   }
 }
 // 執行 略

// 創建
 barFunctionExectionContext = {
 LexicalEnvironment: {
   EnvironmentRecord: {
     Type: "Declarative",
     Arguments: { length: 0},
   },
   outer: <fooLexicalEnvironment>,
   ThisBinding: <Global Object or undefined>,
 },
 VariableEnvironment: {
   EnvironmentRecord: {
     Type: "Declarative",
   },
   outer: <fooLexicalEnvironment>,
   ThisBinding: <Global Object or undefined>
   }
 }
 // 執行 略

這裏因為bar的創建存在着對fooLexicalEnvironment里變量的引用，雖然foo可能執行已結束但變量不會被回收。這種機制被叫做閉包



閉包是由函數以及創建該函數的詞法環境組合而成。這個環境包含了這個閉包創建時所能訪問的所有局部變量



我們結合上面例子重新分解一下這句話


閉包是由函數bar以及創建該函數foo的詞法環境組合而成。這個環境包含了這個閉包創建時所能訪問的所有局部變量name


但是從chrome的理解，閉包並沒有包含所能訪問的所有局部變量，僅僅包含所被引用的變量。


this 綁定


在全局執行上下文中，值是 this 指全局對象。（在瀏覽器中，this 指的是 Window 對象）。


在函數執行上下文中，值 this 取決於函數的調用方式。如果它由對象引用調用，則將值 this 設置為該對象，否則，將值 this 設置為全局對象或 undefined（在嚴格模式下）。例如：


let person = {
   name: 'peter',
   birthYear: 1994,
   calcAge: function() {
     console.log(2018 - this.birthYear)
   }
 }
 
 person.calcAge()
 // 'this' 指向 'person', 因為 'calcAge' 是被 'person' 對象引用調用的。
 
 let calculateAge = person.calcAge
 calculateAge()
 // 'this' 指向全局 window 對象,因為沒有給出任何對象引用

注意所有的()()自調用的函數 this 都是指向Global Object的既瀏覽器中的window


最後


如果本文對你有幫助或覺得不錯請幫忙點贊，如有疑問請留言。


其他參考：



本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※帶您來了解什麼是 USB CONNECTOR  ?



※自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象



※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!



※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化



※廣告預算用在刀口上，網站設計公司幫您達到更多曝光效益



※試算大陸海運運費!



Orignal From: 通過javascript 執行環境理解她

留言

張貼留言

這個網誌中的熱門文章

Python 併發總結，多線程，多進程，異步IO

1 測量函數運行時間 import time def profile(func): def wrapper(*args, ** kwargs): import time start = time.time() func( *args, ** kwargs) end = time.time() print ' COST: {} ' .format(end - start) return wrapper @profile def fib(n): if n<= 2 : return 1 return fib(n-1) + fib(n-2 ) fib( 35 )   2 啟動多個線程，並等待完成   2.1 使用threading.enumerate() import threading for i in range(2 ): t = threading.Thread(target=fib, args=(35 ,)) t.start() main_thread = threading.currentThread() for t in threading.enumerate(): if t is main_thread: continue t.join()   2.2 先保存啟動的線程 threads = [] for i in range(5 ): t = Thread(target=foo, args= (i,)) threads.append(t) t.start() for t in threads: t.join()   3 使用信號量，限制同時能有幾個線程訪問臨界區 from threading import Semaphore import time sema = Semaphor...
張貼留言
閱讀完整內容

高雄十大包子名店出爐

, 圖文：吳恩文 高雄包子大賽落幕了，我只能就我個人意見， 介紹一下前十名這些包子，但是不能代表其他四位評審的意見，雖然身為評審長，我通常不會第一個表示意見，以免影響其他評審， 我主要工作是負責發問。   這次參賽的素包子很少，而且都不夠細致，又偏油，我不愛， 但是第一名的甜芝麻包－熔岩黑金包，竟然是素食得名－ 漢來蔬食巨蛋店。   這包子賣相太好，竹炭粉的黑色外皮刷上金粉，一上桌，眾人驚呼， 搶拍照，內餡是芝麻餡，混一點花生醬增稠，加入白糖芝麻油， 熔岩爆漿的程度剛剛好，我一直以為芝麻要配豬油才行、 但是選到好的黑芝麻油一樣不減香醇， 當下有二位評審就想宅配回家。   尤其特別的是，黑芝麻餡室溫易化，師傅必須要輪班躲在冷藏室內， 穿著大外套才能包，一天包不了多少，我笑說，漢來美食，集團餐廳那麼多，實力雄厚，根本是「 奧運選手報名參加村裡運動會」嘛，其他都是小包子店啊， 但是沒辦法，顯然大家都覺得它好看又好吃， 目前限定漢來蔬食高雄巨蛋店，二顆88元，可以冷凍宅配， 但是要排一陣子，因為供不應求，聽說，四月份， 台北sogo店開始會賣。   第二名的包子，左營寬來順早餐店，顯然平易近人的多，一顆肉包， 十塊錢，是所有參賽者中最便宜的，當然，個頭也小， 它的包子皮明顯和其他不同，灰灰的老麵，薄但紮實有嚼勁， 肉餡新鮮帶汁，因為打了些水，味道極其簡單，就是蔥薑，塩， 香油，薑味尤其明顯，是老眷村的味道， 而特別的是老闆娘是台灣本省人， 當年完全是依據眷村老兵的口味一步一步調整而來，沒有加什麼糖、 五香粉，胡椒粉，油蔥酥。就是蔥薑豬肉和老麵香，能得名， 應該是它的平實無華，鮮美簡單，打動人心。   這是標準的心靈美食，可以撫慰人心，得名之前，寛來順已經天天排隊，現在，恐怕要排更久了， 建議大家六七點早點上門。   第三名，「專十一」很神奇，我記得比賽最後， 大家連吃了幾家不能引起共鳴的包子，有些累，到了專十一， 就坐著等包子，其他評審一吃，就催我趕快試，我一吃， 也醒了大半。   它的包子皮厚薄適中，但是高筋麵粉高些，老麵加一點點酵母， 我心中，它的皮屬一屬二，至於餡又多又好吃，蛋黃還是切丁拌入， 不是整顆放，吃起來「美味、均衡、飽滿」。一顆二十元。   老闆是陸軍專科十一期畢業取名專十一，...
張貼留言
閱讀完整內容

韋伯連續劇終於更新 期待第一季順利完結

　　地球天文學界的跳票大王詹姆斯·韋伯空間望遠鏡 (James Webb Space Telescope，縮寫為 JWST)自 1996 年以來斷斷續續不按劇本演出的連續劇終於讓焦慮的觀眾們又等到了一次更新：五層遮陽罩測試順利完成。 裝配完成的韋伯望遠鏡與好夥伴遮陽罩同框啦。Credit: NASA 　　嚴格的測試是任何空間任務順利成功的重中之重。遮陽罩，這個韋伯望遠鏡異常重要的親密夥伴，要是無法正常運轉的話，韋伯的這一季天文界連續劇說不準就要一直拖更了。 　　詹姆斯·韋伯空間望遠鏡是歷史上造出的最先進的空間望遠鏡。它不僅是一架紅外望遠鏡，還具有特別高的靈敏度。但想要達到辣么高的靈敏度來研究系外行星和遙遠的宇宙童年，韋伯童鞋必須非常"冷靜"，體溫升高的話，靈敏度會大大折損。這個時候，遮陽罩就要大顯身手啦。 　　遮陽罩在韋伯的設計中至關重要。韋伯望遠鏡會被發射到拉格朗日 L2 點，運行軌道很高，遠離太陽、地球與月球。太陽是韋伯的主要熱量干擾的來源，其次是地球與月球。遮陽罩會有效阻斷來自這三大熱源的能量並保護韋伯維持在工作溫度正常運轉。這個工作溫度指的是零下 220 攝氏度(-370 華氏度；50 開爾文)。 上圖中我們可以看出，韋伯望遠鏡的配置大致可分為兩部分：紅色較熱的一面溫度為 85 攝氏度，藍色較冷的一面溫度達到零下 233 攝氏度。紅色的這部分中，儀器包括太陽能板、通信設備、計算機、以及轉向裝置。藍色部分的主要裝置包括鏡面、探測器、濾光片等。Credit: STSci. 　　遮陽罩的那一部分和望遠鏡的鏡面這部分可以產生非常極端的溫差。遮陽的這面溫度可以達到 110 攝氏度，足以煮熟雞蛋，而背陰處的部分溫度極低，足以凍結氧氣。 　　工程師們剛剛完成了五層遮陽罩的測試，按照韋伯在 L2 時的運行狀態安裝了遮陽罩。L2 距離地球約 160 萬公里。NASA 表示這些測試使用了航天器的自帶系統來展開遮陽罩，測試目前都已成功完成。韋伯望遠鏡遮陽罩負責人 James Cooper 介紹說這是遮陽罩"第一次在望遠鏡系統的电子設備的控制下展開。儘管這個任務非常艱巨，難度高，但測試順利完成，遮陽罩展開時的狀態非常驚艷"。 　　遮陽罩由五層 Kapton 製成。Kapton 是一種聚酰亞胺薄膜材料， 耐高溫絕...
張貼留言
閱讀完整內容