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加解密功能页面
Dec 12 Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
学习ExtJS form布局
Oct 08 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
使用zrender.js绘制体温单效果
Oct 31 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调用数据库的存贮过程
2006/10/09 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
网吧消防安全制度
2014/01/28 职场文书
指导教师评语
2014/04/26 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2014年维稳工作总结
2014/11/18 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
端午节寄语2015
2015/03/23 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
V Rising 服务器搭建图文教程
2022/06/16 Servers