JavaScript声明变量的这四兄弟(var、let、function、const)

四兄弟的背景

在一个名为编程语言的村庄里，有不同姓氏的村民。例如Java、Python、Golang、JavaScript等姓氏，而接下来要介绍的就是JavaScript这个姓氏的一些故事。

我们先介绍这个姓氏里的四个兄弟： var兄、function兄、 let兄、 const兄。这四个兄弟能做的事情居然都有点相似，不知是否是村长的蓄意安排。不过让人欣慰的是，村长安排的时候考虑的还是很周到的，他们又有各自的特(脾)长(气)。都挺能装的！各自拥有一个带密码锁的背包，可以帮忙担点东西，总体来说都挺能干的，毕竟刚刚说了，挺能装~

四兄弟的特点

我们通过一个表格来看下他们各自的特点：

特征字符英文名中文名特点varVar Javascript鸡娃好显摆，装东西之后，某种情况下还要把密码告诉房东： window，而且上锁之后可以打开更改里面的内容，也不知道这个锁到底能起到什么作用functionFunction Javascript鸡法装的东西很不一般，一对()一对{}，而且只能装这种。这东西就跟魔法一样，可以做好些事情。爆个小料：只要鸡娃在鸡法的领域内显摆，都能安排的明明白白，专治鸡娃的显摆letLet Javascript鸡栏鸡栏比起前面两位，年龄偏小。他不喜欢显摆。而且装了东西就好像一个围栏，只在围栏内生效，好多JavaScript程序猿很喜欢他constConst Javascript鸡坑和鸡栏都出生于2015年，也有围栏的效果，这货装东西，就像往坑里扔石头，扔完就没法再扔其他东西了，再扔就发脾气

四兄弟故事

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'
//【画外音】 鸡娃装了个标识为writeWhen的内容，结果他显摆的毛病又犯了，让房东知道了

function writeHow() {
  // 发挥魔法的地方
}
//【画外音】 鸡法的背包装了个魔法

let writeWhen = '2022-03-20' -> SyntaxError: writeWhen has been declared
鸡栏说：'what? 谁已经装过这个writeWhen了？看来我得换一个了'

const writeHow = 'function' -> SyntaxError: writeHow has been declared
鸡坑说：'哎哟！这都有人装过了？栏哥，咱们可别再装其他兄弟或者咱们已经装过的了'

鸡栏说：'好嘞，鸡娃、鸡法，我和鸡坑装过的你们也不要装了'

鸡娃、鸡法说： '了解，我们也不想看见SynctaxError，继续工作'
//【画外音】他们达成了一致，只要被鸡栏和鸡坑装过的，兄弟四个都无法再次装入(declare)，且过程不可逆

let writeWho = '简言之' -> '简言之'
//【画外音】 鸡栏这个围栏已经造好了

const writeWhere = 'juejin' -> 'juejin'
//【画外音】 鸡娃装了个标识为writeWhen的内容，结果他显摆的毛病又犯了，让房东知道了

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行结果并有了返回值，
// 这就是鸡法的独特之处
第一行： 打印curTime和writeWho，鸡娃声明的命名空间会在预检阶段有变量提升过程，
即使此时未赋值，也可以访问到变量，并不会抛出异常。writeWho由于有作用域链的存在
在writeHow所在的区域内找到了writeWho，返回了结果。所以打印了[undefined, '简言之']

第二三行：以不同的方式定义了curTime和writeWho变量并赋值

第四行：打印writeWho，第三行重新定义了writeWho，由于const有“围栏”的特点，所以此时的
writeWho成为了writeHow的私有变量，与外界同名变量再无关联。所以打印了'name'

第五行： 函数返回值为'write with story'

结语

• 都是定义变量的方式，function只能定义函数，而let、const和var可以定义函数和普通变量
• 被const定义过的变量无法再次直接赋值，const只用来定义常量，值不会发生变化的量
• var在全局下定义的变量会映射到window下
• var和function可以把已经定义的同一变量反复定义赋值，但是只要被let和const声明过，则无法再次定义

以上内容均为非严格模式

到此这篇关于JavaScript声明变量的这四兄弟(var、let、function、const)的文章就介绍到这了,更多相关JavaScript声明变量内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！