如何論證JS基礎(chǔ)

這篇文章主要講解了“如何論證JS基礎(chǔ)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何論證JS基礎(chǔ)”吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、陸河網(wǎng)站維護(hù)、網(wǎng)站推廣。

code案例

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

這段代碼會(huì)輸出什么呢?

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

乍一看，這段代碼很簡(jiǎn)單，涉及到的內(nèi)容是var function IIFE，好像也沒(méi)什么問(wèn)題。

這段代碼的在嚴(yán)格模式下輸出:TypeError: Assignment to constant variable

意思就是：類型錯(cuò)誤:對(duì)常量變量的賦值

而在非嚴(yán)格模式下輸出:

輸出分析

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

那么現(xiàn)在的問(wèn)題在于變量b是指外部用var聲明的變量b呢，還是立即執(zhí)行的具名函數(shù)b呢?

如果b是立即執(zhí)行的具名函數(shù)名稱，說(shuō)實(shí)話我也不大確定它是否是可修改。

(ps:大多數(shù)的js書籍中都沒(méi)有明確指出立即執(zhí)行函數(shù)表達(dá)式是否能重新賦值的問(wèn)題)

但是我一定可以確定的是，如果b是指外部用var聲明的，那么在此代碼中它一定是可修改的。我們都知道用var聲明的全局變量它在任何地方肯定是可以修改的，因?yàn)樵撟兞刻幱谧饔糜虻淖铐敹恕?/p>

所以在這里我想大膽做個(gè)假設(shè)：變量b是指立即執(zhí)行的具名函數(shù)名稱b~

做完這個(gè)假設(shè)，我想說(shuō)：

那意味著全局變量b在立即執(zhí)行的具名函數(shù)b里訪問(wèn)不到嗎?

其實(shí)不是的，全局變量b在立即執(zhí)行的具名函數(shù)b是可被訪問(wèn)的，只不過(guò)因?yàn)榫呙瘮?shù)b的內(nèi)部作用域里也存在了一個(gè)用function聲明的變量b，所以在代碼執(zhí)行的時(shí)候js引擎首先找到用function聲明的變量b。正如書籍中講到的作用域查詢是通過(guò)從里到外向上查詢。

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

當(dāng)然在非嚴(yán)格模式下，大家可以試著動(dòng)手在立即執(zhí)行的具名函數(shù)內(nèi)部函數(shù)打印一下window.b,也可論證全局變量b在立即執(zhí)行的具名函數(shù)b里可被訪問(wèn)!代碼如下：

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

到這里，理清楚了立即執(zhí)行函數(shù)b的內(nèi)部作用域機(jī)制，我的疑問(wèn)又萌生了:

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

后來(lái)，我查閱了資料,明白了IIFE函數(shù)的內(nèi)部機(jī)制~

我所理解的是：

當(dāng)遇到具名的函數(shù)表達(dá)式的時(shí)，會(huì)創(chuàng)建一個(gè)輔助的特定對(duì)象，將函數(shù)表達(dá)式的名稱作為唯一的key，用來(lái)存儲(chǔ)函數(shù)表達(dá)式的名稱，然后添加到函數(shù)的作用域鏈中，該值只讀，并且不可以被刪除，所以不能對(duì)該值進(jìn)行操作。

所以，在嚴(yán)格模式下，一個(gè)不可修改的常量被修改之后就會(huì)報(bào)TypeError: Assignment to constant variable。

分析非嚴(yán)格模式的輸出 在非嚴(yán)格模式下會(huì)靜默失敗，所以不報(bào)錯(cuò)。針對(duì)如上的分析之后，會(huì)輸出立即執(zhí)行的具名函數(shù)b本身。

code擴(kuò)展

我將代碼改寫成：

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

那這段又會(huì)輸出什么呢?

無(wú)論在非嚴(yán)格模式還是在嚴(yán)格模式下，這段代碼都會(huì)輸出10，也就是全局變量b的值~

寫這段代碼的本意并不是為了猜測(cè)結(jié)果而想的，我想表達(dá)的是：為什么立即執(zhí)行具名函數(shù)b在外部是不可訪問(wèn)的?難道所有的表達(dá)式在外部都不可訪問(wèn)嗎?

為了解決我的疑問(wèn)，我通過(guò)如下函數(shù)foo1和foo2進(jìn)行分析：

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

片段1

是讓一個(gè)匿名函數(shù)表達(dá)式賦值給變量foo1，然后該函數(shù)可以用foo1這個(gè)名稱進(jìn)行訪問(wèn)——foo1()。所以打印是一個(gè)函數(shù)。

片段2

是一個(gè)函數(shù)表達(dá)式，但結(jié)果是Uncaught ReferenceError: foo2 is not defined。說(shuō)明在外部是不可訪問(wèn)的。

可見(jiàn)，立即執(zhí)行具名函數(shù)b是一個(gè)函數(shù)表達(dá)式，在外部是不可訪問(wèn)的!(ps：意味著函數(shù)表達(dá)式既不可能通過(guò)名稱在函數(shù)聲明之前調(diào)用它，也不可能在聲明之后調(diào)用它)。

其實(shí)，大多數(shù)書籍里介紹以及我之前所理解的片段1這樣的代碼就是一個(gè)函數(shù)表達(dá)式。但現(xiàn)在我的理解并不是這樣的~

foo1是一個(gè)變量，匿名函數(shù)表達(dá)式賦值給變量foo1了，所以foo1它可被訪問(wèn)!

通過(guò)自己寫了2個(gè)代碼片段，將我的疑惑迎刃而解了~

思考其他案例

在閑暇之余，我將最原始的代碼塊再做了改造，運(yùn)用這些代碼來(lái)溫故并且思考了之前學(xué)習(xí)的理論基礎(chǔ)。

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

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

為什么會(huì)打印10呢，而不是函數(shù)b呢?

論據(jù)：函數(shù)聲明優(yōu)先于變量聲明~

所以，相當(dāng)于先利用function聲明了函數(shù)b,再利用var重寫了b。

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

為什么會(huì)打印函數(shù)b的執(zhí)行結(jié)果12和1呢，而不是全局變量b呢?

論據(jù)：函數(shù)聲明優(yōu)先于變量聲明~并且在這個(gè)過(guò)程中存在變量提升。

片段3

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

為什么會(huì)打印10呢，而不是函數(shù)b呢?

論據(jù):這個(gè)過(guò)程就是將變量b進(jìn)行重新賦值。

所以，打印的是10，而不是函數(shù)。

片段4

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

論據(jù)：用var聲明變量可以可重復(fù)聲明，但是用let聲明變量不可重復(fù)聲明。

所以js引擎要執(zhí)行完var b = 10語(yǔ)句之后，遇到了let b之前報(bào)錯(cuò)了。

感謝各位的閱讀，以上就是“如何論證JS基礎(chǔ)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何論證JS基礎(chǔ)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前文章：如何論證JS基礎(chǔ)
當(dāng)前URL：http://www.jbt999.com/article26/gsedcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、全網(wǎng)營(yíng)銷推廣、品牌網(wǎng)站制作、App開發(fā)、微信小程序、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)