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

时间: 2025-01-02 16:15:08

javascript中局部变量和全局变量的区别详解_javascript技巧的相关文章

JavaScript中闭包的写法和作用详解_javascript技巧

1.什么是闭包 闭包是有权访问另一个函数作用域的变量的函数. 简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内.而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数和声明的其他内部函数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包. 2.变量的作用域 要理解闭包,首先要理解变量的作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变

JavaScript中SetInterval与setTimeout的用法详解_javascript技巧

setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

在JavaScript中对HTML进行反转义详解_javascript技巧

在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI).encodeURIComponent (decodeURIComponent)这几个方法,具体使用方法和区别. 但是如何在JavaScript中对HTML进行反转义操作呢?例如下面这段代码: var jsonData = { title: "<%= data.name? data.name : title %>", desc: "<%= da

JavaScript中关键字 in 的使用方法详解_javascript技巧

for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为"枚举". 对于数组 ,迭代出来的是数组元素 但不推荐,因为不能保证顺序,而且如果在Array的原型上添加了属性,这个属性也会被遍历出来,所以 最好数组使用正常的for循环,对象使用for-in循环 对于对象 ,迭代出来的是对象的属性: var obj = { "key1":"value1", "key2":"value2", &q

javascript中if和switch,==和===详解_javascript技巧

今天改插件BoxScroll的时候,因为if里面的条件判断多于两个,于是立马想着改写switch.改到一半,忽然记起来JSHint等代码质量检测工具中的一个要求,用===替换==,不用不可靠的强制转型.然后忽然猜想,改成switch是不是会降低效率啊?switch里面的实际判断是==还是===? 有了想法,赶紧举个栗子,好一口吃掉: var a = '5'; switch (a) { case 5: console.log('=='); break; case "5": console

javascript中parentNode,childNodes,children的应用详解_javascript技巧

"parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点     例: <div id="parent"><b id="child">My text</b></div> 在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getEleme

javascript中href和replace的比较(详解)_javascript技巧

在使用javascript的时候,有时候对于经常使用的方法太熟悉而忽略了他们之间原理的细微差别. 举例如下: window.location.href,window.location.replace. 这两种方式都可以让页面跳转到一个新的页面,但是其中我就忽略了跳转之后的细节,比如返回的原来的页面. window.location.href中的href其实就是<a>标签中的href,使用这个进行页面跳转后,可以使用浏览器的后退按钮退回到原来的页面,也可以使用history.go(-1)函数跳转

IE与FF下javascript获取网页及窗口大小的区别详解_javascript技巧

在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别: <script language="javascript">function getInfo(){    var s = "";    s += " 网页可见区域宽:"+ document.body.clientWidth;    s += &qu

JavaScript 中有关数组对象的方法(详解)_javascript技巧

JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象----函数(js中的一等对象).数组(键值的有序集合). 数组元素的添加 arrayObj.push([item1 [item2 [. . . [itemN ]]]]); 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . .