這篇文章主要講解了“如何論證JS基礎(chǔ)”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“如何論證JS基礎(chǔ)”吧!
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名與空間、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、陸河網(wǎng)站維護(hù)、網(wǎng)站推廣。
code案例
var b = 10; (function b(){ b = 20; console.log(b); })();
這段代碼會(huì)輸出什么呢?
(ps:先別著急回答,好好思考一下)
乍一看,這段代碼很簡單,涉及到的內(nèi)容是var function IIFE,好像也沒什么問題。
這段代碼的在嚴(yán)格模式下輸出:TypeError: Assignment to constant variable
意思就是:類型錯(cuò)誤:對(duì)常量變量的賦值
而在非嚴(yán)格模式下輸出:
輸出分析
分析嚴(yán)格模式下的輸出如果由這個(gè)TypeError: Assignment to constant variable.做一個(gè)分析的話,那么意味著變量b是不可修改的!
那么現(xiàn)在的問題在于變量b是指外部用var聲明的變量b呢,還是立即執(zhí)行的具名函數(shù)b呢?
如果b是立即執(zhí)行的具名函數(shù)名稱,說實(shí)話我也不大確定它是否是可修改。
(ps:大多數(shù)的js書籍中都沒有明確指出立即執(zhí)行函數(shù)表達(dá)式是否能重新賦值的問題)
但是我一定可以確定的是,如果b是指外部用var聲明的,那么在此代碼中它一定是可修改的。我們都知道用var聲明的全局變量它在任何地方肯定是可以修改的,因?yàn)樵撟兞刻幱谧饔糜虻淖铐敹恕?/p>
所以在這里我想大膽做個(gè)假設(shè):變量b是指立即執(zhí)行的具名函數(shù)名稱b~
做完這個(gè)假設(shè),我想說:
那意味著全局變量b在立即執(zhí)行的具名函數(shù)b里訪問不到嗎?
其實(shí)不是的,全局變量b在立即執(zhí)行的具名函數(shù)b是可被訪問的,只不過因?yàn)榫呙瘮?shù)b的內(nèi)部作用域里也存在了一個(gè)用function聲明的變量b,所以在代碼執(zhí)行的時(shí)候js引擎首先找到用function聲明的變量b。正如書籍中講到的作用域查詢是通過從里到外向上查詢。
(ps:之前也順手寫了一篇關(guān)于作用域系列的文章:我是這樣理解JavaScript中作用域,望能幫助大家~)
當(dāng)然在非嚴(yán)格模式下,大家可以試著動(dòng)手在立即執(zhí)行的具名函數(shù)內(nèi)部函數(shù)打印一下window.b,也可論證全局變量b在立即執(zhí)行的具名函數(shù)b里可被訪問!代碼如下:
var b = 10; (function b(){ b = 20; console.log(window.b); })();
到這里,理清楚了立即執(zhí)行函數(shù)b的內(nèi)部作用域機(jī)制,我的疑問又萌生了:
為什么(function b(){}())這樣的函數(shù)表達(dá)式就不能修改呢?
后來,我查閱了資料,明白了IIFE函數(shù)的內(nèi)部機(jī)制~
我所理解的是:
當(dāng)遇到具名的函數(shù)表達(dá)式的時(shí),會(huì)創(chuàng)建一個(gè)輔助的特定對(duì)象,將函數(shù)表達(dá)式的名稱作為唯一的key,用來存儲(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ì)輸出什么呢?
無論在非嚴(yán)格模式還是在嚴(yán)格模式下,這段代碼都會(huì)輸出10,也就是全局變量b的值~
寫這段代碼的本意并不是為了猜測結(jié)果而想的,我想表達(dá)的是:為什么立即執(zhí)行具名函數(shù)b在外部是不可訪問的?難道所有的表達(dá)式在外部都不可訪問嗎?
為了解決我的疑問,我通過如下函數(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)行訪問——foo1()。所以打印是一個(gè)函數(shù)。
片段2
是一個(gè)函數(shù)表達(dá)式,但結(jié)果是Uncaught ReferenceError: foo2 is not defined。說明在外部是不可訪問的。
可見,立即執(zhí)行具名函數(shù)b是一個(gè)函數(shù)表達(dá)式,在外部是不可訪問的!(ps:意味著函數(shù)表達(dá)式既不可能通過名稱在函數(shù)聲明之前調(diào)用它,也不可能在聲明之后調(diào)用它)。
其實(shí),大多數(shù)書籍里介紹以及我之前所理解的片段1這樣的代碼就是一個(gè)函數(shù)表達(dá)式。但現(xiàn)在我的理解并不是這樣的~
foo1是一個(gè)變量,匿名函數(shù)表達(dá)式賦值給變量foo1了,所以foo1它可被訪問!
通過自己寫了2個(gè)代碼片段,將我的疑惑迎刃而解了~
思考其他案例
在閑暇之余,我將最原始的代碼塊再做了改造,運(yùn)用這些代碼來溫故并且思考了之前學(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è)過程中存在變量提升。
片段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è)過程就是將變量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語句之后,遇到了let b之前報(bào)錯(cuò)了。
感謝各位的閱讀,以上就是“如何論證JS基礎(chǔ)”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)如何論證JS基礎(chǔ)這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!