你猜它的输出是什么?

为何循环结束后,i的值仍然存在呢?js循环代码块内部变量的作用域怎么跑到外面来了?作为js小白的我,竟然会问这么傻的问题。答案是,js没有块级作用域,像for、if、switch等控制结构形成的代码块内部声明的变量其实都是全局变量。对于像c这种有块级作用域的语言,在for语句执行完毕后,循环变量会被销毁,下面是c语言的for循环:

1 #include "stdio.h"
3 int main() {
4     for (int i = 0; i < 3; i++) {
5         printf("%d\n", i);
8     printf("%d\n", i); // 这里编译时会报错 error: use of undeclared identifier 'i'

编译时报错如下:

而对于javascript这种没有块级作用域的语言,即使在for循环结束之后,循环变量i也是会存在于循环外部的“全局”当中,因为这个循环变量其实就是“全局变量”。这种描述不够准确,javascript当中一个重要的概念是执行环境(execution context),简称环境。每个环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。全局执行环境是最外围的一个执行环境,比如在浏览器中,全局执行环境就是window对象,所以,所有的全局变量都是作为window对象的属性和方法创建的。比如上面的循环变量i,应该可以访问window.i:

下面只写出js代码:

 1   for (var i = 0; i < 3; i++) {
 2     console.log(i);
 4   console.log('第一个for循环结束');
 5   console.log(i);
 6   console.log('访问window.i');
 7   console.log(window.i);
 9   console.log('第二个for循环开始');
11   for (; i > 0; i--) {
12     console.log(i);
13   }
14     console.log('第二个for循环结束');
15   console.log(i);
17   console.log('访问window.i');
18   console.log(window.i);

结果如下:

那么,javascript中的局部变量该怎么定义呢?(或者说如何定义一个变量,这个变量不会被影响到全局呢),答案是函数。js中除了全局执行环境外,还有一个执行环境:函数执行环境,也可以把它叫做局部执行环境。比如下面这段代码:

1   var j = 0;
2   function test() {
3     var j = 1;
4     return j;
7   console.log(j);

输出结果为0,证明函数内部的j没有污染到外部的j,函数内部的j只在函数的执行环境内被访问。

我又想到php跟js一样都是脚本语言,那么php是不是也没有块级作用域呢?看下面的代码:

 1 <?php
 3 if (true) {
 4     $i = 7;
 6 echo $i , PHP_EOL;
 8 for ($i = 0; $i < 3; $i++) {
 9     echo $i , PHP_EOL;
10 }
11 echo '第一个for循环结束' , PHP_EOL;
12 echo $i , PHP_EOL;
14 echo '第二个for循环开始' , PHP_EOL;
15 for (; $i > 0; $i--) {
16     echo $i , PHP_EOL;
17 }
18 echo '第二个for循环结束' , PHP_EOL;
20 echo $i , PHP_EOL;

输出结果如下:

嗯,没错,它也没有块级作用域。其实php手册中很“含蓄”的表达了这一点:“变量的范围即它定义的上下文背景(也就是它的生效范围)。大部分的 PHP 变量只有一个单独的范围。这个单独的范围跨度同样包含了 include 和 require 引入的文件。......在用户自定义函数中,一个局部函数范围将被引入。任何用于函数内部的变量按缺省情况将被限制在局部函数范围内。”

我又想到了php的for循环,我记得php手册中对于foreach循环的描述中有这么一段话“Warning:数组最后一个元素的 $value 引用在 foreach 循环之后仍会保留。建议使用 unset() 来将其销毁。”,这个恐怕也是因为它没有块级作用域的原因,但手册中for循环中没有提到这一点,这有些奇怪。看来,php的水也很深。

其实,javascript的ES6规范中已经引入了let(还有const)变量标识符,利用let可以让js的变量拥有块级作用域,看下面的代码:

1   for (let i = 0; i < 3; i++) {
2     console.log(i);
4   console.log('第一个for循环结束');
5   console.log(i);

输出结果如下:

看来js正在变得越来越规范。

ps:js的执行环境、php的局部变量和全局变量,以后还要仔细学习下。

1,javascript高级程序设计

2,php手册