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实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
BootstrapValidator实现表单验证功能
Nov 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
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
Swiper实现轮播图效果
2017/07/03 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
Unicode和Python的中文处理
2017/03/19 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
积极分子思想汇报
2014/01/04 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
一年级评语大全
2014/04/23 职场文书
听课评语大全
2014/04/30 职场文书
感恩之星事迹材料
2014/05/03 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
党支部先进事迹材料
2014/12/24 职场文书
公司行政管理制度范本
2015/08/05 职场文书