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 相关文章推荐
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
文化宣传方案
2014/03/13 职场文书
合作协议书怎么写
2014/04/18 职场文书
学校安全生产承诺书
2014/05/23 职场文书
物流管理专业自荐信
2014/06/23 职场文书
一份文言文检讨书
2014/09/13 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
师德师风整改措施
2014/10/24 职场文书
总经理检讨书范文
2015/02/16 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python