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实现的listview效果
Apr 28 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
webpack实用小功能介绍
Jan 02 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
webpack5 联邦模块介绍详解
Jul 08 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
用PHP4访问Oracle815
2006/10/09 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
PHP小教程之实现链表
2014/06/09 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
PyQt5实现简单的计算器
2020/05/30 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
HSRP的含义以及如何工作
2014/09/10 面试题
施工资料员的岗位职责
2013/12/22 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
收费员岗位职责
2015/02/14 职场文书
小王子读书笔记
2015/06/29 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python