函数迈出三小步(二）

四、 变量的作用域

变量的作用域指的是，变量起作用的范围。也就是能访问到变量的有效范围。

JavaScript的变量依据作用域的范围可以分为：

• 全局变量
• 局部变量

4.1 全局变量

==定义在函数外部的变量都是全局变量。==

全局变量的作用域是==当前文档==，也就是当前文档所有的JavaScript脚本都可以访问到这个变量。

下面的代码是书写在同一个HTML文档中的2个JavaScript脚本:

<script type="text/javascript">
    //定义了一个全局变量。那么这个变量在当前html页面的任何的JS脚本部分都可以访问到。
    var v = 20; 
    alert(v); //弹出：20
</script>
<script type="text/javascript">
    //因为v是全局变量，所以这里仍然可以访问到。
    alert(v);  //弹出：20
</script>

再看下面一段代码 :

<script type="text/javascript">
    alert(a);
    var a = 20;
</script>

运行这段代码并不会报错， alert(a); 这行代码弹出：undefined。

为什么在声明 a 之前可以访问变量 a 呢? 能访问 a 为什么输出是undefined而不是20呢？

==声明提前！==

• 所有的全局变量的声明都会提前到JavaScript的前端声明。也就是所有的全局变量都是先声明的，并且早于其他一切代码。
• 但是变量的赋值的位置并不会变，仍然在原位置赋值。

所以上面的代码等效下面的代码：

<script type="text/javascript">
    var a; //声明提前
    alert(a);
    a = 20; //赋值仍然在原来的位置
</script>

4.2 局部变量

在函数内声明的变量，叫局部变量！表示形参的变量也是局部变量！

局部变量的作用域是局部变量所在的整个函数的内部。 在函数的外部不能访问局部变量。

<script type="text/javascript">
    function f(){
        alert(v);  //   弹出：undefined
        var v = "abc";  // 声明局部变量。局部变量也会声明提前到函数的最顶端。
        alert(v);   //  弹出：abc
    }
    alert(v);  //报错。因为变量v没有定义。 方法 f 的外部是不能访问方法内部的局部变量 v 的。
 </script>

4.3 全局变量和局部变量的一些细节

看下面一段代码:

<script type="text/javascript">
    var m = 10;
    function f(){
        var m = 20;
        alert("方法内部：" + m);  //代码1
    }
    f();
    alert("方法外部：" + m); //代码2
</script>

在方法内部访问m，访问到的是哪个m呢？局部变量的m还是全局变量的m？

4.3.1 全局变量和局部变量重名问题

1. 在上面的代码中，当局部变量与全局变量重名时，局部变量的作用域会覆盖全局变量的作用域。也就是说在函数内部访问重名变量时，访问的是局部变量。==所以 "代码1" 部分输出的是20。==

2. 当函数返回离开局部变量的作用域后，又回到全局变量的作用域。==所以代码2输出10。==

3. 如何在函数访问同名的全局变量呢？==通过：window.全局变量名==

   <script type="text/javascript">
   var m = 10;
   function f(){
   var m = 20;
   alert(window.m); //访问同名的全局变量。其实这个时候相当于在访问window这个对象的属性。
   }
   f();
   </script>

4.3.2 JavaScript中有没有块级作用域？

看下面一段代码:

<script type="text/javascript">
  var m = 5;
  if(m == 5){
    var n = 10;
  }
  alert(n); //代码1
</script>

代码1输出什么？ undefined还是10？还是报错？

==输出10！==

• JavaScript的作用域是按照函数来划分的
• ==JavaScript没有块级作用域==

在上面的代码中，变量 n 虽然是在 if 语句内声明的，但是它仍然是全局变量，而不是局部变量。

只有定义在方法内部的变量才是局部变量

注意：

• 即使我们把变量的声明放在 if、for等块级语句内，也会进行==声明提前==的操作！

五、匿名函数

5.1 声明匿名函数

匿名函数是指没有函数名的函数。

看下面一段代码：

<script type="text/javascript">
    /*
    //这里定义了一个函数，而且没有函数名。这样写语法是错误的,如果允许这样定义，那么根本就没有办法调用。
    //所以，我们可以用一个变量来存储一下
    function(){ 
      
    }
    */
  // 声明了一个匿名函数，并把匿名函数赋值给变量f。 注意这个时候这个匿名函数并没有执行。
  var f = function(){
    alert("哥们我是匿名函数内的代码");
  }
  //我们可以把变量 f 当做一个函数名来调用
  f();  //调用上面定义的匿名函数
</script>

说明：

1. 匿名函数除了没有函数名之外，其他与普通的函数没有任何区别。
2. 如果想在别的地方调用匿名函数，则应该声明一个变量，并把匿名函数赋值给这个变量
3. 可以把这个变量名做为函数名来调用。参数传递，方法返回值和普通的函数一样。

5.2 匿名函数的作用

1. 函数表达式可以存储在变量中，变量也可以作为一个函数使用。

2. 可以将匿名函数作为参数传递给其他函数

   <script type="text/javascript">
   //声明一个函数，参数接受一个函数
   function fun1 (fun) {
   if(typeof fun == "function"){ //如果传递的是function类型，则调用这个函数
   fun()
   }
   }
   // 调用函数fun1，并传入一个匿名函数实参
   fun1(function () {
   alert("这个是匿名函数的代码")
   });
   </script>

3. 可以通过匿名函数完成某些一次性的任务。

• 如果一个函数不需要重复执行，则可以定义一个匿名函数

5.3 匿名函数立即执行

有些场景，我们需要定义完函数之后立即执行，这个时候可以定义一个匿名函数来完成。

(function () {
    alert("匿名函数立即执行")
})();

说明

1. 需要把匿名函数用一对圆括号括起来，把匿名函数作为一个整体来对待
2. 最后再添加一对圆括号表示调用函数。这样定义的匿名函数就会立即执行
3. 当然，这个时候即使给这个函数加上方法名，也可以调用。不过这种情况为什么还要加方法名呢?