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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
Jul 08 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
vue无限轮播插件代码实例
May 10 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
对比分析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
用 PHP5 轻松解析 XML
2006/12/04 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
pandas对指定列进行填充的方法
2018/04/11 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
python解析多层json操作示例
2019/12/30 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
五种Python转义表示法
2020/11/27 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
成人继续教育实施方案
2014/03/01 职场文书
优秀纪检干部材料
2014/08/27 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
致青春观后感
2015/06/09 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
用JS实现飞机大战小游戏
2021/06/09 Javascript
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技