javascript中局部变量和全局变量的区别详解

 更新时间:2015年02月27日 10:03:35   投稿:hebedich  
本文主要是向大家详细的对比分析了javascript中局部变量和全局变量的区别,是篇非常不错的文章,值得仔细去品读,推荐给小伙伴们。

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中局部变量和全局变量的区别是否有了更深刻的认识了呢,祝大家新年快乐~学习愉快。

相关文章

  • 使用uniapp实现发布朋友圈功能

    使用uniapp实现发布朋友圈功能

    这篇文章主要介绍了使用uniapp实现发布朋友圈功能,在文章底部给大家介绍了uniapp 微信小程序分享、分享朋友圈功能,通过页内自定义分享按钮,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • javascript 四十条常用技巧大全

    javascript 四十条常用技巧大全

    本文给大家整理了有关js四十条常用技巧,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • 基于Javascript实现弹出页面效果

    基于Javascript实现弹出页面效果

    弹出层效果是一个很实用的功能,很多网站都采用了这种方式实现登录和注册,下面小编通过本文给大家分享具体实现代码,对js弹出页面效果相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • js实现计算器和计时器功能

    js实现计算器和计时器功能

    这篇文章主要为大家详细介绍了js实现计算器和计时器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 如何获取TypeScript的声明文件.d.ts

    如何获取TypeScript的声明文件.d.ts

    这篇文章主要介绍了如何获取TypeScript的声明文件.d.ts 的相关知识,非常不错,具有参考借鉴价值,需要的朋友参考下
    2018-05-05
  • 关于JavaScript中原型继承中的一点思考

    关于JavaScript中原型继承中的一点思考

    JS中原型的概念不想多说,这里只是探讨一下修改父类原型属性与覆盖父类原型中属性的区别,防止以后出问题
    2012-07-07
  • JavaScript从数组中删除指定值元素的方法

    JavaScript从数组中删除指定值元素的方法

    这篇文章主要介绍了JavaScript从数组中删除指定值元素的方法,实例分析了两种常用的javascript操作数组指定元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • javascript限制文本框输入值类型的方法

    javascript限制文本框输入值类型的方法

    这篇文章主要介绍了javascript限制文本框输入值类型的方法,涉及javascript鼠标事件、键盘按键及字符串的相关操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • layer.alert回调函数执行关闭弹窗的实例

    layer.alert回调函数执行关闭弹窗的实例

    今天小编就为大家分享一篇layer.alert回调函数执行关闭弹窗的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 教你巧用webpack在日志中记录文件行号

    教你巧用webpack在日志中记录文件行号

    早期webpack的目的是允许在浏览器中运行大多数node.js模块,但是模块整体格局发生了变化,现在许多模块的主要用途是以编写前端为目的,下面这篇文章主要给大家介绍了关于巧用webpack在日志中记录文件行号的相关资料,需要的朋友可以参考下
    2022-11-11

最新评论