JavaScript把局部变量变成全局变量

妖狐艹你老母 2023-01-14 01:41 227阅读 0赞

### 文章目录 ###

*   *  函数的自调用——自调用函数
     *  使用形式
     *   *  注意
         *  那么如何把局部变量变成全局变量?
     *  应用案例1——将随机数对象赋给window
     *  应用案例2——产生随机位置小方块

首先我们要知道函数的自调用

## 函数的自调用——自调用函数 ##

一次性的函数——声明的同时，直接调用了  
例如：

(function () { 
      console.log("函数");
    
    })();

我们会看到浏览器直接打印 `函数` 两个字

页面加载后.这个自调用函数的代码就执行完了

## 使用形式 ##

(function (形参) { 
      
    })(实参);

### 注意 ###

*  自调用构造函数的方式,分号一定要加上

### 那么如何把局部变量变成全局变量? ###

把局部变量给window就可以了

(function (win) { 
      var num=10;//局部变量
      //js是一门动态类型的语言,对象没有属性,点了就有了
      win.num=num;
    })(window);
    console.log(num);

页面打印出num了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]

## 应用案例1——将随机数对象赋给window ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
         //通过自调用函数产生一个随机数对象,在自调用函数外面,调用该随机数对象方法产生随机数
         (function (window) { 
           //产生随机数的构造函数
           function Random() { 
           }
           //在原型对象中添加方法
           Random.prototype.getRandom = function (min,max) { 
             return Math.floor(Math.random()*(max-min)+min);
           };
           //把Random对象暴露给顶级对象window--->外部可以直接使用这个对象
           window.Random=Random;
         })(window);
         //实例化随机数对象
         var rm=new Random();
         //调用方法产生随机数
         console.log(rm.getRandom(0,5));
    
    
    
        //全局变量
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

## 应用案例2——产生随机位置小方块 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta >
      <title>title</title>
      <style>
        .map{ 
          width: 800px;
          height: 600px;
          background-color: #CCC;
          position: relative;
        }
      </style>
    </head>
    <body>
    <div class="map"></div>
    <script src="common.js"></script>
    <script>
      //产生随机数对象的
      (function (window) { 
        function Random() { 
        }
        Random.prototype.getRandom=function (min,max) { 
          return Math.floor(Math.random()*(max-min)+min);
        };
        //把局部对象暴露给window顶级对象,就成了全局的对象
        window.Random=new Random();
      })(window);//自调用构造函数的方式,分号一定要加上
    
    
      //产生小方块对象
      (function (window) { 
        //console.log(Random.getRandom(0,5));
        //选择器的方式来获取元素对象
        var map=document.querySelector(".map");
    
        //食物的构造函数
        function Food(width,height,color) { 
          this.width=width||20;//默认的小方块的宽
          this.height=height||20;//默认的小方块的高
          //横坐标,纵坐标
          this.x=0;//横坐标随机产生的
          this.y=0;//纵坐标随机产生的
          this.color=color;//小方块的背景颜色
          this.element=document.createElement("div");//小方块的元素
        }
        //初始化小方块的显示的效果及位置---显示地图上
        Food.prototype.init=function (map) { 
          //设置小方块的样式
          var div=this.element;
          div.style.position="absolute";//脱离文档流
          div.style.width=this.width+"px";
          div.style.height=this.height+"px";
          div.style.backgroundColor=this.color;
          //把小方块加到map地图中
          map.appendChild(div);
          this.render(map);
        };
        //产生随机位置
        Food.prototype.render=function (map) { 
          //随机产生横纵坐标
          var x=Random.getRandom(0,map.offsetWidth/this.width)*this.width;
          var y=Random.getRandom(0,map.offsetHeight/this.height)*this.height;
          this.x=x;
          this.y=y;
          var div=this.element;
          div.style.left=this.x+"px";
          div.style.top=this.y+"px";
        };
    
        //实例化对象
        var fd=new Food(20,20,"green");
        fd.init(map);
        console.log(fd.x+"===="+fd.y);
    
        
      })(window);
    
    
      // function refresh(){ 
      // window.location.reload();
      // }
      // setTimeout(refresh(), 1000);
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221022/b811fd943ba345fea6ea1c5f6089b032.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]: /images/20221022/187e7f31bcd445c5b0f3d9714ac7f2c8.png