JavaScript聲明變量的這四兄弟(var、let、function、const)
四兄弟的背景
在一個名為編程語言的村莊里,有不同姓氏的村民。例如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'
結(jié)語
- 都是定義變量的方式,
function只能定義函數(shù),而let、const和var可以定義函數(shù)和普通變量 - 被
const定義過的變量無法再次直接賦值,const只用來定義常量,值不會發(fā)生變化的量 var在全局下定義的變量會映射到window下var和function可以把已經(jīng)定義的同一變量反復(fù)定義賦值,但是只要被let和const聲明過,則無法再次定義
以上內(nèi)容均為非嚴(yán)格模式
到此這篇關(guān)于JavaScript聲明變量的這四兄弟(var、let、function、const)的文章就介紹到這了,更多相關(guān)JavaScript聲明變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Js中var,let,const的區(qū)別你知道嗎
- Javascript?中?var?和?let?、const?的區(qū)別及使用方法
- javascript中var與let、const的區(qū)別詳解
- JavaScript變量中var,let和const的區(qū)別
- 淺談JS中var,let和const的區(qū)別
- JavaScript變量聲明的var、let、const詳解
- javascript?變量聲明?var,let,const?的區(qū)別
- 面試官常問之說說js中var、let、const的區(qū)別
- JavaScript?ES6語法中l(wèi)et,const?,var?的區(qū)別
- javascript的var與let,const之間的區(qū)別詳解
- JavaScript中var let const的用法有哪些區(qū)別
- JavaScript es6中var、let以及const三者區(qū)別案例詳解
- 詳解javascript中var與ES6規(guī)范中l(wèi)et、const區(qū)別與用法
- 了解javascript中l(wèi)et和var及const關(guān)鍵字的區(qū)別
- 5分鐘快速掌握J(rèn)S中var、let和const的異同
- JavaScript中var、let、const區(qū)別淺析
- JavaScript變量聲明var,let.const及區(qū)別淺析
- JavaScript ES6中const、let與var的對比詳解
- JS變量中有var定義和無var定義的區(qū)別以及es6中l(wèi)et命令和const命令
- JavaScript中const、var和let區(qū)別淺析
相關(guān)文章
js使用html2canvas實現(xiàn)屏幕截取的示例代碼
這篇文章主要介紹了js使用html2canvas實現(xiàn)屏幕截取的示例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08
微信小程序?qū)崿F(xiàn)獲取用戶信息并存入數(shù)據(jù)庫操作示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)獲取用戶信息并存入數(shù)據(jù)庫操作,涉及微信小程序wx.request后臺數(shù)據(jù)交互及php數(shù)據(jù)存儲相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JavaScript中的null和undefined用法解析
這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09

