如何論證JS基礎

這篇文章主要講解了“如何論證JS基礎”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何論證JS基礎”吧！

code案例

var b = 10; (function b(){     b = 20;     console.log(b);  })();

這段代碼會輸出什么呢?

(ps:先別著急回答，好好思考一下)

乍一看，這段代碼很簡單，涉及到的內容是var function IIFE，好像也沒什么問題。

這段代碼的在嚴格模式下輸出:TypeError: Assignment to constant variable

意思就是：類型錯誤:對常量變量的賦值

而在非嚴格模式下輸出:

輸出分析

分析嚴格模式下的輸出如果由這個TypeError: Assignment to constant  variable.做一個分析的話，那么意味著變量b是不可修改的!

那么現在的問題在于變量b是指外部用var聲明的變量b呢，還是立即執行的具名函數b呢?

如果b是立即執行的具名函數名稱，說實話我也不大確定它是否是可修改。

(ps:大多數的js書籍中都沒有明確指出立即執行函數表達式是否能重新賦值的問題)

但是我一定可以確定的是，如果b是指外部用var聲明的，那么在此代碼中它一定是可修改的。我們都知道用var聲明的全局變量它在任何地方肯定是可以修改的，因為該變量處于作用域的最頂端。

所以在這里我想大膽做個假設：變量b是指立即執行的具名函數名稱b~

做完這個假設，我想說：

那意味著全局變量b在立即執行的具名函數b里訪問不到嗎?

其實不是的，全局變量b在立即執行的具名函數b是可被訪問的，只不過因為具名函數b的內部作用域里也存在了一個用function聲明的變量b，所以在代碼執行的時候js引擎首先找到用function聲明的變量b。正如書籍中講到的作用域查詢是通過從里到外向上查詢。

(ps:之前也順手寫了一篇關于作用域系列的文章:我是這樣理解JavaScript中作用域，望能幫助大家~)

當然在非嚴格模式下，大家可以試著動手在立即執行的具名函數內部函數打印一下window.b,也可論證全局變量b在立即執行的具名函數b里可被訪問!代碼如下：

var b = 10; (function b(){     b = 20;     console.log(window.b);  })();

到這里，理清楚了立即執行函數b的內部作用域機制，我的疑問又萌生了:

為什么(function b(){}())這樣的函數表達式就不能修改呢?

后來，我查閱了資料,明白了IIFE函數的內部機制~

我所理解的是：

當遇到具名的函數表達式的時，會創建一個輔助的特定對象，將函數表達式的名稱作為唯一的key，用來存儲函數表達式的名稱，然后添加到函數的作用域鏈中，該值只讀，并且不可以被刪除，所以不能對該值進行操作。

所以，在嚴格模式下，一個不可修改的常量被修改之后就會報TypeError: Assignment to constant variable。

分析非嚴格模式的輸出 在非嚴格模式下會靜默失敗，所以不報錯。針對如上的分析之后，會輸出立即執行的具名函數b本身。

code擴展

我將代碼改寫成：

var b = 10; (function b(){  return 1; })(); console.log(b);

那這段又會輸出什么呢?

無論在非嚴格模式還是在嚴格模式下，這段代碼都會輸出10，也就是全局變量b的值~

寫這段代碼的本意并不是為了猜測結果而想的，我想表達的是：為什么立即執行具名函數b在外部是不可訪問的?難道所有的表達式在外部都不可訪問嗎?

為了解決我的疑問，我通過如下函數foo1和foo2進行分析：

///片段1 var foo1 = function () {}; console.log(foo1); //片段2 (function foo2(){}) console.log(foo2);

片段1

是讓一個匿名函數表達式賦值給變量foo1，然后該函數可以用foo1這個名稱進行訪問——foo1()。所以打印是一個函數。

片段2

是一個函數表達式，但結果是Uncaught ReferenceError: foo2 is not defined。說明在外部是不可訪問的。

可見，立即執行具名函數b是一個函數表達式，在外部是不可訪問的!(ps：意味著函數表達式既不可能通過名稱在函數聲明之前調用它，也不可能在聲明之后調用它)。

其實，大多數書籍里介紹以及我之前所理解的片段1這樣的代碼就是一個函數表達式。但現在我的理解并不是這樣的~

foo1是一個變量，匿名函數表達式賦值給變量foo1了，所以foo1它可被訪問!

通過自己寫了2個代碼片段，將我的疑惑迎刃而解了~

思考其他案例

在閑暇之余，我將最原始的代碼塊再做了改造，運用這些代碼來溫故并且思考了之前學習的理論基礎。

如下的代碼片段，我將結果也一并和大家揭曉，但我也會和大家分享一下我的心得~

///片段1 var b = 10; function b() {  console.log(12);  return 1; } console.log(b, b());  //10 TypeError: b is not a function

為什么會打印10呢，而不是函數b呢?

論據：函數聲明優先于變量聲明~

所以，相當于先利用function聲明了函數b,再利用var重寫了b。

//片段2 console.log(b, b()); //12 1 var b = 10; function b() {  console.log(12);  return 1; }

為什么會打印函數b的執行結果12和1呢，而不是全局變量b呢?

論據：函數聲明優先于變量聲明~并且在這個過程中存在變量提升。

片段3

var b = 10; b = function() {  b = 20;  console.log(b); //20 return 1; }; console.log(b, b()); //b函數,1

為什么會打印10呢，而不是函數b呢?

論據:這個過程就是將變量b進行重新賦值。

所以，打印的是10，而不是函數。

片段4

var b = 10; //  Duplicate declaration "b" let b = function() {  b = 20;  console.log(b);  return 1; };

論據：用var聲明變量可以可重復聲明，但是用let聲明變量不可重復聲明。

所以js引擎要執行完var b = 10語句之后，遇到了let b之前報錯了。

感謝各位的閱讀，以上就是“如何論證JS基礎”的內容了，經過本文的學習后，相信大家對如何論證JS基礎這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！