通過這一段代碼，讓我們重新認識JavaScript

FrozenMap 發布于2019-08-19 18:12 / 3120人閱讀

摘要：問題請說明一下對這一段的理解，主要包括引擎編譯執行作用域異常這些要點。這個過程叫提升。兩個非常常見的異常是在什么情況下發生的。

問題

請說明一下對這一段JavaScript的理解，主要包括引擎、編譯、執行、作用域、異常這些要點。然后猜測下會輸出那些內容。

var hello = null;
var b = 2;
foo(3);
console.log(c);

function foo(a){
 try{
    console.log(c);
 }catch(error){
    console.log(error);
 }
 try{
    hello();
 }catch(error){
    console.log(error);
 }
 c = a*b;
 console.log(a+b);
}

理解編譯

/*
    1.編譯器遇到 var hello這個聲明語句，就在當前作用域中聲明變量hello（當前作用域沒有變量hello，這里當前作用域就是全局作用域）。
*/
var hello = null;
var b = 2;
foo(3);
console.log(c);
/*
    1.編譯器在當前作用域把foo聲明成一個函數，同上
    2.在函數的內部作用域聲明a變量
*/
function foo(a){
 try{
    console.log(c);
 }catch(error){
    console.log(error);
 }
 try{
    hello();
 }catch(error){
    console.log(error);
 }
 c = a*b;
 console.log(a+b);
}

編譯器會先找到所有的聲明(var xxx，function xxx這些才是聲明)，然后在對應的作用域中創建該變量/函數，如果該聲明不存在的話。這個過程叫‘提升’。

運行

/*
    1.運行時讀取到的是hello = null，首先在作用域鏈中查找hello，找到的話執行賦值操作
*/
var hello = null;
var b = 2;
/*
    1.在作用域鏈中找foo并且執行它，這里隱式地執行了a = 3，這里的a實際上是foo函數作用域里聲明的一個變量
    2.之后轉入函數內部執行
*/
foo(3);
/*
    0.在函數執行完畢后，執行到這兒
    1.在作用域中查找console這一變量，然后找到了，然后獲取它的log屬性，然后把它作函數執行
    2.隱式地執行了x = c，在當前作用域中查找c，能找得到嗎？
*/
console.log(c);

function foo(a){
 try{
    //嘗試在作用域鏈中找c，找到本函數作用域-->全局作用域都沒找到，于是拋出異常ReferenceError，這個異常就是在作用域鏈中找不到某變量但又需要知道它的值出現的，我們需要輸出c的值
    console.log(c);
 }catch(error){
    console.log(error);
 }
 try{
    //嘗試在作用域鏈中找hello，在全局作用域找到了，把它當函數執行，但它不是函數，于是拋出異常TypeError，這個異常就是找到了，但是使用方法不對
    hello();
 }catch(error){
    console.log(error);
 }
   //先計算a*b，在作用域鏈中找a和找b的值，然后執行c=6，又開始找c，想要給c賦值，找到頭也找不到，于是自動地在全局作用域下聲明了一個c，然后執行c=6，注意這里我們不關心c的值
 c = a*b;
 console.log(a+b);
}

js的作用域是詞法作用域，就是說變量處于哪個作用域是由代碼怎么寫決定的，在編譯期間確定。
作用域鏈就像個大樓，查找變量的時候從當前樓層查到頂樓（全局）為止

通過這段代碼可大致理解js引擎在編譯階段做了什么，在執行階段又怎么做，作用域在這兩個階段中起到什么作用（中間者，管家）。兩個非常常見的異常是在什么情況下發生的。
?゜??:.?..?.:?"(?▽?)"?:.?. .?.:?゜??

參考書籍《你不知道的JavaScript（上卷）》第一部分，亞馬遜電子書9.9元，強力推薦

GPU云服務器云服務器這一段讓我們一起 linux 讓端口通過防火墻一段手機html代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79306.html

悄悄掀起 WebAssembly 的神秘面紗

摘要：在拿到這塊內存后，是擁有完全操作的權利的。后面定義了一個函數，并導出為函數。首先，使用在棧內壓入一個位整型常數，然后使用在棧內壓入一個位整型常數，之后調用指令，這個指前端開發人員想必對現代瀏覽器都已經非常熟悉了吧？HTML5，CSS4，JavaScript ES6，這些已經在現代瀏覽器中慢慢普及的技術為前端開發帶來了極大的便利。得益于 JIT（Just-in-time）技術，Java...

qc1iu 2019-08-23 12:01 評論0 收藏0
重新認識定時器

摘要：重新認識三如果被推遲執行的回調函數是某個對象的方法，那么該方法中的關鍵字將指向全局環境，而不是定義時所在的那個對象。重新認識一一般，setTimeout函數接受兩個參數，第一個參數func|code是將要推遲執行的函數名或者一段代碼（引擎內部使用eval函數，將字符串轉為代碼），第二個參數delay是推遲執行的毫秒數。但是，setTimeout 還可以添加更多參數。第二個之后的參數...

paney129 2019-08-20 15:57 評論0 收藏0
JavaScript的計時器的工作原理

摘要：創建了一個簡單的計時器，在經過給定的時間后，回調函數將會被執行。接受一個計時器由之前兩種計時器返回并且停止計時器回調函數的執行。然而，我們可以注意到，當定時器再一次觸發在計時器回調函數正在執行的時候，這一次定時器回調函數被丟棄了。最近都在看一些JavaScript原理層面的文章，恰巧看到了jQuery的作者的一篇關于JavaScript計時器原理的解析，于是誠惶誠恐地決定把原文翻譯成...

geekzhou 2019-08-21 10:28 評論0 收藏0
通過分析這段代碼的進化歷程，或許能夠加深您對JavaScript的作用域的理解

摘要：前言這里我們不討論作用域鏈的問題，這些問題您可以看下我之前寫的東西，通過這一段代碼，讓我們重新認識。這回我們主要來分享一下，中作用域的創建方式。立即執行函數是個不錯的選擇，但具名的立即執行函數可以讓代碼本身更具有可讀性，是個最佳實踐。前言這里我們不討論作用域鏈的問題，這些問題您可以看下我之前寫的東西，通過這一段代碼，讓我們重新認識JavaScript。這回我們主要來分享一下，Jav...

goji 2019-08-19 18:13 評論0 收藏0
Web技術的前世今生（二）

摘要：前言我是，如果你還不認識我，不妨先看看技術的前世今生一平靜的生活已經有一段日子了。傳送門技術的前世今生一技術的前世今生三前言：我是JavaScript，如果你還不認識我，不妨先看看《Web技術的前世今生（一）》平靜的生活已經有一段日子了。這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？大哥，您這說的哪里話，我什么地方做的不對么？我一臉茫然地回答道。哼，...

Stardustsky 2019-08-30 15:55 評論0 收藏0