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 相关文章推荐
浅谈javascript的数据类型检测
Jul 10 Javascript
原生js实现日期联动
Jan 12 Javascript
KnockoutJs快速入门教程
May 16 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
对比分析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
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
python基础教程之缩进介绍
2014/08/29 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
python图片验证码生成代码
2016/07/02 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Python 实现一个计时器
2020/07/28 Python
如何利用python进行时间序列分析
2020/08/04 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
股权转让协议书
2014/04/12 职场文书
工商干部先进事迹
2014/05/14 职场文书
世博会口号
2014/06/20 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
运动会加油稿100字
2014/09/19 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
个人创业事迹材料
2014/12/30 职场文书
医院见习总结
2015/06/24 职场文书
小学班主任心得体会
2016/01/07 职场文书
七年级话题作文之执着
2019/11/19 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers