JS的var与let：谁红杏出墙？

马黑黑 · 发表于 2022-3-28 13:05

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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声明的跑出去了。

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的版本号。任何语言的版本迭代都是为了不断完善自己，而完善的依据是应用，就是我们通常所说的实践。