[[357950]]

前言

JS基礎(chǔ)對(duì)于我們前端開發(fā)的重要性不言而知~于是，我們都會(huì)選擇去閱讀一些書籍來充實(shí)自己。那當(dāng)我們讀完那些理論基礎(chǔ)之后，你是否依舊迷茫，還是豁然開朗?

透過現(xiàn)象看本質(zhì)!

我想：有了理論基礎(chǔ)作為根據(jù)的時(shí)候，應(yīng)該多去思考一些代碼的結(jié)果來實(shí)踐這些理論。

就比如解決bug一樣，你總得先知道出現(xiàn)bug的原因，再根據(jù)原因去解決問題是一樣的道理。

code案例

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

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

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

乍一看，這段代碼很簡(jiǎn)單，涉及到的內(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的值~

寫這段代碼的本意并不是為了猜測(cè)結(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ò)了。

總結(jié)

在寫業(yè)務(wù)代碼的時(shí)候，要盡量去避免聲明變量命名沖突的情況，因?yàn)橐陨习咐牡膶懛ㄊ遣缓侠淼模苋菀壮霈F(xiàn)意想不到的結(jié)果。

為何不規(guī)范要求自己而避開不必要的麻煩呢?

當(dāng)然，我覺得在學(xué)習(xí)乏味難啃的理論基礎(chǔ)知識(shí)時(shí)，我覺得應(yīng)該創(chuàng)造自己的想象力，多去實(shí)踐多去思考為什么會(huì)有這樣的結(jié)果呢?

根據(jù)理論證實(shí)結(jié)果!

這樣才會(huì)使得讓自己更加理解理論基礎(chǔ)，并且更好的運(yùn)用它們，而不僅僅是背/記。

原文：juejin.cn/user/2189882895108616

本文轉(zhuǎn)載自微信公眾號(hào)「前端人」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端人公眾號(hào)。