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

   2023-03-08 学习力0
核心提示:四兄弟的背景在一个名为编程语言的村庄里,有不同姓氏的村民。例如Java、Python、Golang、JavaScript等姓氏,而接下来要介绍的就是JavaScript这个姓氏的一些故事。我们先介绍这个姓氏里的四个兄弟: var兄、function兄、 let兄、 const兄。这四个兄弟能做

四兄弟的背景

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

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

四兄弟的特点

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

特征字符 英文名 中文名 特点
var Var Javascript 鸡娃 好显摆,装东西之后,某种情况下还要把密码告诉房东: window,而且上锁之后可以打开更改里面的内容,也不知道这个锁到底能起到什么作用
function Function Javascript 鸡法 装的东西很不一般,一对()一对{},而且只能装这种。这东西就跟魔法一样,可以做好些事情。爆个小料:只要鸡娃在鸡法的领域内显摆,都能安排的明明白白,专治鸡娃的显摆
let Let Javascript 鸡栏 鸡栏比起前面两位,年龄偏小。他不喜欢显摆。而且装了东西就好像一个围栏,只在围栏内生效,好多JavaScript程序猿很喜欢他
const Const 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只能定义函数,而letconstvar可以定义函数和普通变量
  • const定义过的变量无法再次直接赋值const只用来定义常量,值不会发生变化的量
  • var在全局下定义的变量会映射到window
  • varfunction可以把已经定义的同一变量反复定义赋值,但是只要被letconst声明过,则无法再次定义

以上内容均为非严格模式

原文地址:https://www.cnblogs.com/cyancoco/p/16094133.html
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • JavaScript翻转字符串方法 js翻转一个字符串
    先把字符串转化成数组String.prototype.split(),再借助数组的reverse方法翻转数组顺序(Array.prototype.reverse()),然后把数组转化成字符串。使用的API方法:String.prototype.split(' ')使用指定的分隔符字符串将一个String对象分割成字符串数组Array.prot
    03-08
  • javascript常见面试题之一:将字符串'get-
    var str='get-element-by-id'; function strToupper(str) { //利用split将字符串分割成数组var arr= str.split('-');for (var i = 1; iarr.length; i++) {      //1.利用for循环获取数组的每个元素,2.用charAt(0)获取每个元素的第一个字符;3.用substr
    03-08
  • JavaScript清除空格、换行,把双引号转换成单引号
    JavaScript清除空格、换行,把双引号转换成单引
    1、页面   2、源码 1 !DOCTYPE2 html3 head4meta charset="utf-8"5 title清除字符串的空格和双引号/title6 style type="text/css"7 textarea{8 padding:10px;9 font-size:18px; 10 width:100%; 11 resize:none; 12 } 13 .main{ 14 padding:40px 10px; 15
    03-08
  • javaScript的Date函数 javascript date(
    1、获取当前时间  Date()获取到的时间是当前设备的显示的时间,开发中要考虑到用户的设备时间是否正确let nowTime = new Date(); // 获取当前时间  把data时间转换成常规格式scriptlet getTimeNow = () = {let nowTime = new Date(); // 获取当前时间——
    03-08
  • JavaScript中什么是闭包
    JavaScript中什么是闭包
    概念:当一个内部函数被调用,就会形成闭包,闭包就是能够读取其他函数内部变量的函数  就是一个函数去访问了另外一个函数的中的变量的函数例子:!DOCTYPE htmlhtmlheadmeta charset="UTF-8"title闭包/title/headbodyscript type="text/javascript"//允许函
    03-08
  • 关于Javascript中通过实例对象修改原型对象属性
    Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值。基本类型的数据值有5种:null、undefined、number、boolean和string。引用类型的数据值往大的说就1种,即Object类型。往细的说有:Object类型、Array类型、Date类型、Regexp类型、Functio
    03-08
  • javascript中defer的作用(转)
    script src=".js.js" defer/scriptdefer的作用就是作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题 加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活! defer是脚本程序强大功能中的一个“无名英
    03-08
  • JavaScript Array map() 方法
    JavaScript Array map() 方法
    一、定义map() 方法返回一个新数组,不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值,并按照原始数组元素顺序依次处理元素。注意:map() 不会对空数组进行检测。二、语法array.map(function(currentValue,index,arr), thisValue)四、
    03-08
  • JavaScript中的arguments,callee,caller(转)
    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsArguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的 Function 对象的名字。 n :选项。要传递给 Function 对象的从
    03-08
  • 前台javascript排序 js排序的几种方式
     script type="text/javascript"$(function () {$('.Sorthead-ShowUp').click(function () { var filed = $(this).attr("name"); $(".issorting").removeClass("issorting"); $(this).addClass("issorting"); D
    03-08
点击排行