快捷導(dǎo)航

JavaScript把局部變量變成全局變量的方法

更新時間：2021年05月07日 10:44:33 作者：流楚丶格念

這篇文章主要介紹了JavaScript把局部變量變成全局變量的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

首先我們要知道函數(shù)的自調(diào)用

函數(shù)的自調(diào)用——自調(diào)用函數(shù)

一次性的函數(shù)——聲明的同時，直接調(diào)用了
例如：

(function () {
  console.log("函數(shù)");

})();

我們會看到瀏覽器直接打印 函數(shù) 兩個字

頁面加載后.這個自調(diào)用函數(shù)的代碼就執(zhí)行完了

使用形式

(function (形參) {
  
})(實參);

注意

自調(diào)用構(gòu)造函數(shù)的方式,分號一定要加上

那么如何把局部變量變成全局變量?

把局部變量給window就可以了

(function (win) {
  var num=10;//局部變量
  //js是一門動態(tài)類型的語言,對象沒有屬性,點了就有了
  win.num=num;
})(window);
console.log(num);

頁面打印出num了

在這里插入圖片描述

應(yīng)用案例1——將隨機數(shù)對象賦給window

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

     //通過自調(diào)用函數(shù)產(chǎn)生一個隨機數(shù)對象,在自調(diào)用函數(shù)外面,調(diào)用該隨機數(shù)對象方法產(chǎn)生隨機數(shù)
     (function (window) {
       //產(chǎn)生隨機數(shù)的構(gòu)造函數(shù)
       function Random() {
       }
       //在原型對象中添加方法
       Random.prototype.getRandom = function (min,max) {
         return Math.floor(Math.random()*(max-min)+min);
       };
       //把Random對象暴露給頂級對象window--->外部可以直接使用這個對象
       window.Random=Random;
     })(window);
     //實例化隨機數(shù)對象
     var rm=new Random();
     //調(diào)用方法產(chǎn)生隨機數(shù)
     console.log(rm.getRandom(0,5));



    //全局變量
  </script>
</head>
<body>


</body>
</html>

應(yīng)用案例2——產(chǎn)生隨機位置小方塊

<!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>
  //產(chǎn)生隨機數(shù)對象的
  (function (window) {
    function Random() {
    }
    Random.prototype.getRandom=function (min,max) {
      return Math.floor(Math.random()*(max-min)+min);
    };
    //把局部對象暴露給window頂級對象,就成了全局的對象
    window.Random=new Random();
  })(window);//自調(diào)用構(gòu)造函數(shù)的方式,分號一定要加上


  //產(chǎn)生小方塊對象
  (function (window) {
    //console.log(Random.getRandom(0,5));
    //選擇器的方式來獲取元素對象
    var map=document.querySelector(".map");

    //食物的構(gòu)造函數(shù)
    function Food(width,height,color) {
      this.width=width||20;//默認的小方塊的寬
      this.height=height||20;//默認的小方塊的高
      //橫坐標,縱坐標
      this.x=0;//橫坐標隨機產(chǎn)生的
      this.y=0;//縱坐標隨機產(chǎn)生的
      this.color=color;//小方塊的背景顏色
      this.element=document.createElement("div");//小方塊的元素
    }
    //初始化小方塊的顯示的效果及位置---顯示地圖上
    Food.prototype.init=function (map) {
      //設(shè)置小方塊的樣式
      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);
    };
    //產(chǎn)生隨機位置
    Food.prototype.render=function (map) {
      //隨機產(chǎn)生橫縱坐標
      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>

到此這篇關(guān)于JavaScript把局部變量變成全局變量的方法的文章就介紹到這了,更多相關(guān)JavaScript 局部變量變成全局變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: