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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
TypeScript高级用法的知识点汇总
Dec 17 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读取flv文件的播放时间长度
2009/09/03 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现简易内存监控
2018/06/21 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python类中super() 的使用解析
2019/12/19 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
毕业生个人求职信范例分享
2013/12/17 职场文书
承诺函范文
2015/01/21 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
SQL写法--行行比较
2021/08/23 SQL Server