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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
JavaScript async/await原理及实例解析
Dec 02 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
PyMongo安装使用笔记
2015/04/27 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
python获取代理IP的实例分享
2018/05/07 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
python实现简易数码时钟
2021/02/19 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
涉外文秘个人求职的自我评价
2013/10/07 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
服务员自我评价
2014/01/25 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
党员四风剖析材料
2014/08/27 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
R9700摩机记
2022/04/05 无线电
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL