脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript 局部变量变成全局变量

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

 更新时间：2021年05月07日 10:44:33   作者：流楚丶格念  
这篇文章主要介绍了JavaScript把局部变量变成全局变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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

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

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

})();

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

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

使用形式

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

注意

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

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

把局部变量给window就可以了

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

页面打印出num了

在这里插入图片描述

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

在这里插入图片描述

<!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>

到此这篇关于JavaScript把局部变量变成全局变量的方法的文章就介绍到这了,更多相关JavaScript 局部变量变成全局变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 浅谈js中的in-for循环

    浅谈js中的in-for循环

    下面小编就为大家带来一篇浅谈js中的in-for循环。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • uniapp实现左右联动商品分类页面

    uniapp实现左右联动商品分类页面

    一个电商的app,商品的展示是必不可少的,联动分类展示是很常见的,下面这篇文章主要给大家介绍了关于uniapp实现左右联动商品分类页面的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • 仅img元素创建后不添加到文档中会执行onload事件的解决方法

    仅img元素创建后不添加到文档中会执行onload事件的解决方法

    仅img元素创建后不添加到文档中会执行onload事件的解决方法，需要的朋友可以参考下。
    2011-07-07
  • javascript去掉代码里面的注释

    javascript去掉代码里面的注释

    这篇文章主要介绍了javascript去掉代码里面的注释的方法和具体代码，有需要的小伙伴可以参考下。
    2015-07-07
  • Javascript中click与blur事件的顺序详析

    Javascript中click与blur事件的顺序详析

    这篇文章主要给大家介绍了关于Javascript中click与blur事件顺序的相关资料，文中介绍的非常详细，对大家学习或者使用Javascript中的click与blur事件具有一定的参考学习价值，需要的朋友可以下面来一起看看吧。
    2017-04-04
  • js二级地域选择的实现方法

    js二级地域选择的实现方法

    js二级地域选择的实现方法，需要的朋友可以参考一下
    2013-06-06
  • js综合应用实例简单的表格统计

    js综合应用实例简单的表格统计

    在做调查问卷的过程中，遇到一个表格的统计问题，一个需要用到js方面的综合知识，感觉还不错所以记录下来与大家分享，感兴趣的朋友可以了解下
    2013-09-09
  • 使用javascript为网页增加夜间模式

    使用javascript为网页增加夜间模式

    如何给Web页面增加夜间模式功能? 其实所谓的夜间模式就是在页面上增加一个透明的遮罩层，但是遮罩层会挡住页面元素， 解决方法是 添加DIV，给DIV的outline属性一个很大的outline-width值，用outline的边框作为遮罩，这样既能正常点击页面元素，又能达到夜间模式的效果
    2014-01-01
  • js原生方法被覆盖,从新赋值原生的方法

    js原生方法被覆盖,从新赋值原生的方法

    下面小编就为大家分享一篇js原生方法被覆盖,从新赋值原生的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • zTree树形插件异步加载方法详解

    zTree树形插件异步加载方法详解

    这篇文章主要为大家详细介绍了zTree树形插件异步加载的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论