基于JavaScript 声明全局变量的三种方式详解


Posted in Javascript onMay 07, 2013

JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍。

声明方式一:

使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量。该方式即为显式声明详细如下:

<script> 
  var test = 5;//全局变量 
  function a(){ 
    var a = 3;//局部变量 
    alert(a); 
  } 
  function b(){ 
    alert(test); 
  } 
  //a();//调用a方法,那么方法里面的内容才会执行 
  //b();//同上 
</script>

声明方式二:

没有使用var,直接给标识符test赋值,这样会隐式的声明了全局变量test。即使该语句是在一个function内,当该function被执行后test变成了全局变量。

<script> 
    test = 5;//全局变量 
    function a(){ 
      aa = 3;//也是全局变量 
      alert(test); 
    } 
    //a();  //输出5 
    //alert(aa);//这里也可以方法a()方法里面的变量,因为aa是全局变量 
  </script>

声明方式三:

使用window全局对象来声明,全局对象的属性对应也是全局变量,详细如下:

<script> 
  window.test = 50; 
  alert(test);//输出50 
</script>

这种方式经常被用到一个匿名函数执行后将一些函数公开到全局。 如JQuery1.5中最末一句
代码如下:

window.jQuery = window.$ = jQuery;

全局变量的优点:

可以减少变量的个数,减少由于实际参数和形式参数的数据传递带来的时间消耗。

全局变量的缺点:

(1)全局变量保存在静态存贮区,程序开始运行时为其分配内存,程序结束释放该内存。与局部变量的动态分配、动态释放相比,生存期比较长,因此过多的全局变量会占用较多的内存单元。

(2)全局变量破坏了函数的封装性能。函数象一个黑匣子,一般是通过函数参数和返回值进行输入输出,函数内部实现相对独立。但函数中如果使用了全局变量,那么函数体内的语句就可以绕过函数参数和返回值进行存取,这种情况破坏了函数的独立性,使函数对全局变量产生依赖。同时,也降低了该函数的可移植性。

(3)全局变量使函数的代码可读性降低。由于多个函数都可能使用全局变量,函数执行时全局变量的值可能随时发生变化,对于程序的查错和调试都非常不利。
因此,如果不是万不得已,最好不要使用全局变量。

Javascript 相关文章推荐
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
详解Angular 4.x Injector
May 04 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 #Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 #Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 #Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 #Javascript
JS中的substring和substr函数的区别说明
May 07 #Javascript
js图片自动切换效果处理代码
May 07 #Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 #Javascript
You might like
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
Yii2中datetime类的使用
2016/12/17 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
动态密码技术
2012/10/18 面试题
Prototype是怎么扩展DOM的
2014/10/01 面试题
客户代表自我评价范例
2013/09/24 职场文书
家长给小学生的评语
2014/01/30 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
2014年清明节寄语
2014/04/03 职场文书
个人借条范本
2015/05/25 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
python四种出行路线规划的实现
2021/06/23 Python
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
Python OpenCV之常用滤波器使用详解
2022/04/07 Python