JS的var与let：谁红杏出墙？
本帖最后由 马黑黑 于 2022-3-28 18:16 编辑先看如下JavaScript代码：
for(var i=0; i<5; i++){
// 做点什么或不做这里都会循环，i 的值都会变
}
if(typeof(i) != 'undefined') {
console.log('i的值: ', i);
} else {
console.log(typeof(i));
}
以上代码是为了测试步进变量 i 在循环体以外是否还有效，如有，这叫红杏出墙，如没有，这叫三八红旗手。
在循环体里面定义的变量，对这个变量的预期是，它仅仅作用于循环体之内，在循环体以外，它是不应有名分的——亦即它在循环体以外的代码块里是没有定义过的。
我们上面给出的例子，用 var 在循环体内定义了步进变量 i，然后在循环体以外检测它，检测用了一个 if 语句：
typeof(变量名称) 是 JS 检查变量的方法，我们的 if 语句是，如果 typeof(i) 不等于未定义（undefined），则把变量 i 的值打印出来，否则，打印 i 的变量类型即 typeof(i) 。运行结果如下：
看得出来了吗？var 声明的变量能冲出块状级别的作用域，出墙了。循环体，函数体，都是块状级别的域，在其内部声明的变量不应跑到外部去，结果var声明的跑出去了。
var 是 ES5 时代的产物，它有严重缺陷，使用时需要特别留意，否则变量干扰的问题会导致JS脚本运行不正常甚至不能运行。但是，ES5一直使用着，var也一直用着而且现在也还在使用，这又是为什么？理由其实好理解，存在即合理（虽然事实上未必合理）。想一想航海史，地心原理与日心原理都用过，也都能正常航行，var虽有问题，有意识地去规避其出墙的坑，它不是不能使用，而且很好用。比方讲，在上面for循环的基础上，我们接着又有一个循环：
for(var i=5; i>0; i--){
//做点什么
}
我们在第二个循环体再一次声明了变量 i，并且重新给了它新的值，这样，出过墙的 i 也还是好老婆，在循环体内工作正常。其实，第二个for循环语句，不用 var 也可，第一句的也行，反正变量 i 在循环体内都（重新）赋值，就像（重新）结婚成个家时一样，老婆出不出墙不是当下的事情，蜜月期正常过吧。
let 是新生事物，随 ES6 而来，于2015年6月面世。用 let 替换第一个循环语句，控制台打印出来的变量 i 是未定义类型，说明没有出墙，在 let 的调教下，i 是相夫教子的好老婆，在外面没出啥事。
ES5、ES6可以理解为是JavaScript的版本号。任何语言的版本迭代都是为了不断完善自己，而完善的依据是应用，就是我们通常所说的实践。
这个得好好学习一下了。谢谢老黑，辛苦了！{:4_190:} 没看懂，设置的循环语句本来就是让i从0到4的循环，为什么还会出现5呢？ “看得出来了吗？var 声明的变量能冲出块状级别的作用域。”
这句完全没懂。 黑黑的语句一如既往的幽默，用婚姻来比喻块状作用域和其中的变量的问题，很形象{:4_187:} 红影 发表于 2022-3-28 14:58
黑黑的语句一如既往的幽默，用婚姻来比喻块状作用域和其中的变量的问题，很形象
这样读起来会轻松一些，印象也会深刻 红影 发表于 2022-3-28 14:54
没看懂，设置的循环语句本来就是让i从0到4的循环，为什么还会出现5呢？
循环中，设定的 i<5 不是限定 i 自身，是限定循环过程做什么的条件，i是自然俺预设（i++)步进的，它的值循环中不断变大（或变小）。本帖首例中，如果 i 不能等于 5，则 i<5 就得不出结果，也就是说，按照加 1 步进 的 i 只有步进到 5 的时候，i<5 的设定才会成立，从而可以结束循环。 红影 发表于 2022-3-28 14:55
“看得出来了吗？var 声明的变量能冲出块状级别的作用域。”
这句完全没懂。
这个你要看图，图上的运行结果是显示循环体以外的 if 语句打印出来的，i 的变量跨域了，出墙了 马黑黑 发表于 2022-3-28 18:12
这样读起来会轻松一些，印象也会深刻
不过有点大男子主义呢，男人也可能出轨的呀，不全是女人出墙{:4_173:} 马黑黑 发表于 2022-3-28 18:22
循环中，设定的 i
嗯，这个是循环到达的边界，碰到边界就循环结束了。 红影 发表于 2022-3-28 20:22
不过有点大男子主义呢，男人也可能出轨的呀，不全是女人出墙
男人出轨叫出轨，不叫出墙。没有分别对待的。 红影 发表于 2022-3-28 20:24
嗯，这个是循环到达的边界，碰到边界就循环结束了。
所以……理解了 马黑黑 发表于 2022-3-28 18:24
这个你要看图，图上的运行结果是显示循环体以外的 if 语句打印出来的，i 的变量跨域了，出墙了
还是不太明白，我慢慢去理解吧。谢谢黑黑耐心解答{:4_187:} 红影 发表于 2022-3-28 20:25
还是不太明白，我慢慢去理解吧。谢谢黑黑耐心解答
循环的工作机制就是酱紫的，结果只是为了验证 马黑黑 发表于 2022-3-28 20:24
男人出轨叫出轨，不叫出墙。没有分别对待的。
不讨论这个了，反正这个帖子的语句又是很有趣的{:4_173:} 马黑黑 发表于 2022-3-28 20:25
所以……理解了
嗯嗯，这点理解了。 马黑黑 发表于 2022-3-28 20:26
循环的工作机制就是酱紫的，结果只是为了验证
嗯嗯，知道了{:4_204:} 红影 发表于 2022-3-28 21:28
嗯嗯，知道了
思考就会有收获 红影 发表于 2022-3-28 21:26
嗯嗯，这点理解了。
{:5_162:} 红影 发表于 2022-3-28 21:26
不讨论这个了，反正这个帖子的语句又是很有趣的
偶尔有趣
页:
[1]
2