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


Posted in Javascript onFebruary 27, 2015

javascript有两种变量:局部变量和全局变量。当然,我们这篇文章是帮助大家真正的区别这两种变量。

首先,局部变量是指只能在本变量声明的函数内部调用。全局变量时整个代码中都可以调用的变量。当然,单单从字面上理解肯定是不清楚的,下面我详细的介绍下:
大家都知道,变量是需要用var关键字声明的。但是javascript中也可以隐式的使用变量,就是不用声明,直接使用。而且,千万注意,javascript把隐式声明的变量总是当成全局变量来使用的。
例如:

function myName() {

 i = 'yuanjianhang';

}

myName();

function sayName() {

 alert(i);

}

sayName();

输出结果为:yuanjianhang

这说明变量i就是一个全局的变量,如果把上面的代码改成如下:

function myName() {

 var i='yuanjianhang';

}

myName();

function sayName() {

 alert(i);

}

sayName();

此时,游览器将没有任何输出结果,因为i 是在函数myName中定义的,所以它只是myName的局部变量,不可能被外部调用。
 
现在再回过头来看下面的代码:

function myName() {

 i = 'yuanjianhang';

}

myName();

function sayName() {

 alert(i);

}

sayName();

现在,我们进行一下改动,把myName();去掉,代码如下:

function myName() {

 i = 'yuanjianhang';

}

function sayName() {

 alert(i);

}

sayName();

 此时,游览器也不会有如何反应。因为虽然i是全局变量,但是函数myName()并没有被调用,所以就相当于虽然声明了i,但是并没有给i赋予任何的值,所以没有任何输出。
同理,如果把上例改成:
 

function myName() {

 

 i = 'yuanjianhang';

}

function sayName() {

 alert(i);

}

sayName();

myName();

这种情况下还是不会输出任何结果,javascript代码的执行时从上到下的,在sayName()函数被调用时会检查变量i的值,此时函数myName尚未执行,也就是说i还没有被赋值,所以不会输出任何结果。
 
为了方便大家更好的理解,这里再举一个例子:

var i = 'yuanjianhang';

function myloveName() {

 i = 'guanxi';

}

myloveName();

function myName() {

 alert(i);

}

myName();

这次的结果是什么呢?
答案是guanxi
首先,i的原始值是yuanjianhang,但是当调用myloveName()函数之后,将i的值改为guanxi,所以最后的输出结果是guanxi。

如果将代码改为:

var i = 'yuanjianhang';

function myloveName() {

 var i = 'guanxi';

}

myloveName();

function myName() {

 alert(i);

}

myName();

此时的结果就是yuanjianhang了,因为代码中的两个i不一样,一个是全局的,一个是局部的,也可以这样理解,虽然两个i的名字一样,但是这两个i的本质却不一样,好像有两个名字一样的人一样,虽然名字一样,但却不是同一个人。

如果将代码改造成这样:

var i = 'yuanjianhang';

function myloveName() {

 i = 'guanxi';

}

function myName() {

 alert(i);

}

myName();

myloveName();

相信大家可以自己算出结果了,结果是yuanjianhang。

既然函数内部可以调用全局变量,那么下面这种情况呢:

var i = 'yuanjianhang';

function myloveName() {

  i = 'guanxi';

 alert(i);

}

myloveName();

此时变量的值是哪个呢?

我们来分析下:

首先全局变量i被赋值为:yuanjianhang。

接下来myloveName()函数被调用,全局变量i被重新赋予新的值:guanxi

所以结果肯定是:guanxi。

如果我们把alert提前呢,像这样:

var i = 'yuanjianhang';

function myloveName() {

  alert(i);

 i = 'guanxi';

}

myloveName();

这时候结果是什么呢?
经过验证结果是:undefined
如果代码是这样呢:

var i = 'yuanjianhang';

function myloveName() {

  alert(i);

}

myloveName();

此时i的结果是:yuanjianhang

为什么会发生上面undefined情况,因为代码的执行顺序是从上到下的,在输出i之前并没有对i定义。所以从这里可以看出,使用代码的时候,变量的声明一定要放到代码的前面,以避免出现类似的问题!

同理:

var i = 'yuanjianhang';

function myloveName() {

 alert(i);

 var i = 'guanxi';

 

}

myloveName();

这种情况下也会输出:undefined

好了,关于变量我只有这么多的介绍了,相信这些任何人都可以看明白。不管代码如何复制,其核心是不会变的。

以上就是本文的全部内容了,小伙伴们对于javascript中局部变量和全局变量的区别是否有了更深刻的认识了呢,祝大家新年快乐~学习愉快。

Javascript 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
Aug 16 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 #Javascript
JavaScript中Function详解
Feb 27 #Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 #Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 #Javascript
javascript实现当前页导航激活的方法
Feb 27 #Javascript
jquery 根据name名获取元素的value值
Feb 27 #Javascript
jQuery使用元素属性attr赋值详解
Feb 27 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
一个数据采集类
2007/02/14 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
使用console进行性能测试
2015/04/27 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
python清除字符串里非字母字符的方法
2015/07/02 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
python导入时小括号大作用
2017/01/10 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
Django models文件模型变更错误解决
2020/05/11 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
python logging模块的使用详解
2020/10/23 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
岗位职责风险防控
2014/02/18 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
综合测评个人总结
2015/03/03 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书