快捷導(dǎo)航

JavaScript聲明變量的這四兄弟(var、let、function、const)

更新時間：2023年02月12日 21:45:25 作者：Cyan_Con

這篇文章主要介紹了JavaScript聲明變量的這四兄弟，主要就是介紹var、let、function、const區(qū)別,需要的朋友可以參考下

四兄弟的背景

在一個名為編程語言的村莊里，有不同姓氏的村民。例如Java、Python、Golang、JavaScript等姓氏，而接下來要介紹的就是JavaScript這個姓氏的一些故事。

我們先介紹這個姓氏里的四個兄弟： var兄、function兄、 let兄、 const兄。這四個兄弟能做的事情居然都有點相似，不知是否是村長的蓄意安排。不過讓人欣慰的是，村長安排的時候考慮的還是很周到的，他們又有各自的特(脾)長(氣)。都挺能裝的！各自擁有一個帶密碼鎖的背包，可以幫忙擔(dān)點東西，總體來說都挺能干的，畢竟剛剛說了，挺能裝~

四兄弟的特點

我們通過一個表格來看下他們各自的特點：

特征字符	英文名	中文名	特點
var	Var Javascript	雞娃	好顯擺，裝東西之后，某種情況下還要把密碼告訴房東： window，而且上鎖之后可以打開更改里面的內(nèi)容，也不知道這個鎖到底能起到什么作用
function	Function Javascript	雞法	裝的東西很不一般，一對()一對{}，而且只能裝這種。這東西就跟魔法一樣，可以做好些事情。爆個小料：只要雞娃在雞法的領(lǐng)域內(nèi)顯擺，都能安排的明明白白，專治雞娃的顯擺
let	Let Javascript	雞欄	雞欄比起前面兩位，年齡偏小。他不喜歡顯擺。而且裝了東西就好像一個圍欄，只在圍欄內(nèi)生效，好多JavaScript程序猿很喜歡他
const	Const Javascript	雞坑	和雞欄都出生于2015年，也有圍欄的效果，這貨裝東西，就像往坑里扔石頭，扔完就沒法再扔其他東西了，再扔就發(fā)脾氣

四兄弟故事

window.writeWhen  -> undefined
window.writeWho   -> undefined
window.writeWhere -> undefined
window.writeHow -> undefined
window說 '你在我這找啥？我這沒有你要的這些，滾一邊去'
var writeWhen = '2022-03-20 22:50:30';  -> '2022-03-20 22:50:30'
//【畫外音】 雞娃裝了個標(biāo)識為writeWhen的內(nèi)容，結(jié)果他顯擺的毛病又犯了，讓房東知道了

function writeHow() {
  // 發(fā)揮魔法的地方
}
//【畫外音】 雞法的背包裝了個魔法

let writeWhen = '2022-03-20' -> SyntaxError: writeWhen has been declared
雞欄說：'what? 誰已經(jīng)裝過這個writeWhen了？看來我得換一個了'

const writeHow = 'function' -> SyntaxError: writeHow has been declared
雞坑說：'哎喲！這都有人裝過了？欄哥，咱們可別再裝其他兄弟或者咱們已經(jīng)裝過的了'

雞欄說：'好嘞，雞娃、雞法，我和雞坑裝過的你們也不要裝了'

雞娃、雞法說： '了解，我們也不想看見SynctaxError，繼續(xù)工作'
//【畫外音】他們達(dá)成了一致，只要被雞欄和雞坑裝過的，兄弟四個都無法再次裝入(declare)，且過程不可逆

let writeWho = '簡言之' -> '簡言之'
//【畫外音】 雞欄這個圍欄已經(jīng)造好了

const writeWhere = 'juejin' -> 'juejin'
//【畫外音】 雞娃裝了個標(biāo)識為writeWhen的內(nèi)容，結(jié)果他顯擺的毛病又犯了，讓房東知道了

window.writeWhen -> '2022-03-20 22:50:30'
window.writeWho   -> undefined
window.writeWhere -> undefined
window.writeHow -> undefined
window說 '嘿嘿，雞娃愛顯擺，他那的情況我知道，其他三兄弟的我就無能為力咯'

function writeHow () {
    console.log(curTime, writeWho);
    var curTime = '2022-03-22 23:10';
    const writeWho = 'name'; 
    console.log(writeWho);
    return 'write with story';
}
//【畫外音】 我們重新定義了writeHow，并定制了魔法

writeHow(); -> log[undefined, '簡言之'] log('name') 'write with story'
//【畫外音】 雞法定義的這個writeHow施展了個魔法，就打印了2行結(jié)果并有了返回值，
// 這就是雞法的獨特之處
第一行： 打印curTime和writeWho，雞娃聲明的命名空間會在預(yù)檢階段有變量提升過程，
即使此時未賦值，也可以訪問到變量，并不會拋出異常。writeWho由于有作用域鏈的存在
在writeHow所在的區(qū)域內(nèi)找到了writeWho，返回了結(jié)果。所以打印了[undefined, '簡言之']

第二三行：以不同的方式定義了curTime和writeWho變量并賦值

第四行：打印writeWho，第三行重新定義了writeWho，由于const有“圍欄”的特點，所以此時的
writeWho成為了writeHow的私有變量，與外界同名變量再無關(guān)聯(lián)。所以打印了'name'

第五行： 函數(shù)返回值為'write with story'