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 局部变量变成全局变量内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈JavaScript的全局变量与局部变量

    一.JavaScript scope 的划分标准是function函数块,不是以 if.while.for来划分的 <script> function f1(){ alert("before for scope:"+i); //i未赋值(并不是没有声明!使用未声明变量或函数会导致致命错误从而中断脚本执行) //此时i值为undefined for(var i=0; i<3;i++){ alert("in for scope:"+i);} //i的值

  • javascript 用局部变量来代替全局变量第1/2页

    javascript 用局部变量来代替全局变量第1/2页

    为什么要这么做?有什么根据么?不这么做,对性能到底能带来多大的损失?本文就来探讨这些问题的答案,从根本上了解变量的读写性能都和哪些因素有关. 著作权声明        本文译自 Nicholas C. Zakas 于2009年2月10日在个人网站上发表的<JavaScript Variable Performance>.原文是唯一的正式版,本文是经过原作者(Nicholas C. Zakas)授权的简体中文翻译版(Simplified Chinese Translation).译者(明达)在翻

  • Javascript学习之谈谈JS的全局变量跟局部变量(推荐)

    今天公司一个实习小妹子问我两段JS代码的区别: 代码一: <script type="text/javascript"> var a = "Hello"; function test(){ var a; alert(a); a = "World"; alert(a); } </script> 代码二: <script type="text/javascript"> var a = "

  • javascript中局部变量和全局变量的区别详解

    javascript有两种变量:局部变量和全局变量.当然,我们这篇文章是帮助大家真正的区别这两种变量. 首先,局部变量是指只能在本变量声明的函数内部调用.全局变量时整个代码中都可以调用的变量.当然,单单从字面上理解肯定是不清楚的,下面我详细的介绍下: 大家都知道,变量是需要用var关键字声明的.但是javascript中也可以隐式的使用变量,就是不用声明,直接使用.而且,千万注意,javascript把隐式声明的变量总是当成全局变量来使用的. 例如: 复制代码 代码如下: function my

  • JS全局变量和局部变量最新解析

    就是这种盲目无原理依据的研究测试弄晕了我, 有必要这么做吗? 其实理解了原理就没必要搞这么多一个一个的试, 然后得出规律, ECMAScript规则都已经定义好了. var的规则是: 使用var声明变量就是内部变量, 否则就是先调用全局变量, 不管多少层函数. this的规则是: method函数里的this永远指向自身, 普通函数的this永远指向DOMWindow. // GodDamnTest1 function Foo() { var a = 123; // 局部变量, 所有子函数的全局

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

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

    首先我们要知道函数的自调用 函数的自调用--自调用函数 一次性的函数--声明的同时,直接调用了 例如: (function () { console.log("函数"); })(); 我们会看到浏览器直接打印 函数 两个字 页面加载后.这个自调用函数的代码就执行完了 使用形式 (function (形参) { })(实参); 注意 自调用构造函数的方式,分号一定要加上 那么如何把局部变量变成全局变量? 把局部变量给window就可以了 (function (win) { var num

  • 从局部变量和全局变量开始全面解析Python中变量的作用域

    理解全局变量和局部变量 1.定义的函数内部的变量名如果是第一次出现, 且在=符号前,那么就可以认为是被定义为局部变量.在这种情况下,不论全局变量中是否用到该变量名,函数中使用的都是局部变量.例如: num = 100 def func(): num = 123 print num func() 输出结果是123.说明函数中定义的变量名num是一个局部变量,覆盖全局变量.再例如: num = 100 def func(): num += 100 print num func() 输出结果是:Unb

  • javascript批量修改文件编码格式的方法

    本文实例讲述了javascript批量修改文件编码格式的方法.分享给大家供大家参考.具体如下: 摘要: 最近在制作手册的时候遇到了一个问题'文档乱码',查看文件之后发现文件编码不对,总共100多个文件,如果用编辑器另存为utf8,那就悲催了.所以自己就写了个程序,批量修改文件编码格式. 代码: 复制代码 代码如下: /**  * 修改文件编码格式,例如:GBK转UTF8  * 支持多级目录  * @param {String} [root_path] [需要进行转码的文件路径]  * @para

  • 浅谈java中的局部变量和全局变量

    本文对java中的局部变量和全局变量作了如下介绍: 1.局部变量: 局部变量的定义:定义在方法中的变量都是局部变量(main方法也是方法,所以定义在main方法中的变量也是局部变量). 生存时间:局部变量的生存时间和方法的生存时间一致,调用该方法声明该局部变量并初始化的时,该局部变量被创建并分配内存空间:直到该方法调用结束局部变量也就结束了: 是否需要初始化:局部变量在使用前必须进行初始化,系统默认不会对局部变量进行初始化数据操作,如果局部变量在使用前没有进行初始化则会在编译器报错:如果局部变量

  • javascript实现链接单选效果的方法

    本文实例讲述了javascript实现链接单选效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>链接单选</title> <

  • Javascript动画插件lottie-web的使用方法

    Javascript动画插件lottie-web的使用方法

    lottie可以将一个json数据渲染成一个动画,而且支持多平台,在不同的平台下使用同一个json文件即可实现相同的效果,非常的方便.这里介绍前端的使用方法.https://github.com/airbnb/lottie-web 1.配合vue-cli使用 1.npm安装lottie-web npm install lottie-web 2.创建loading.vue2.1引入lottie插件和需要的json数据2.2接收父组件传入的配置参数2.3在页面渲染完毕后进行初始化 <template

  • 将properties文件的配置设置为整个Web应用的全局变量实现方法

    四大作用域: Web应用中的变量存放在不同的jsp对象中,会有不一样的作用域,四种不同的作用域排序是 pageContext < request < session < application; 1.pageContext:页面域,仅当前页面有效,离开页面后,不论重定向还是转向(即无论是redirect还是forward),pageContext的属性值都失效: 2.request:请求域,在一次请求中有效,如果用forward转向,则下一次请求还可以保留上一次request中的属性值,

  • Angularjs 设置全局变量的方法总结

    AngularJS 设置全局变量的三种方法 angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种.要实现的功能是,在ng-app中定义的全局变量,在不同的ng-controller里都可以使用. 1,通过var 直接定义global variable,这根纯js是一样的. 2,用angularjs value来设置全局变量 . 3,用angularjs constant来设置全局变量 . 下面用一个例子,来说明,上面3种方法: 实例: 1,在app模块中,

  • asp.net及javascript判断是否手机访问的方法

    本文实例讲述了asp.net及javascript判断是否手机访问的方法.分享给大家供大家参考,具体如下: /// <summary> /// 判断手机用户UserAgent /// </summary> /// <returns></returns> private bool IsMobile() { HttpContext context = HttpContext.Current; if (context != null) { HttpRequest

随机推荐