搞懂JavaScript全局变量与局部变量,看这篇文章就够了[通俗易懂]

搞懂JavaScript全局变量与局部变量,看这篇文章就够了[通俗易懂]<scripttype=”text/javascript”>vara=”Hello”;functiontest(){vara;console.log(a);a=”World”;console.log(a);}//undefined//Worldvarb=”Hello”;fun…

大家好,又见面了,我是你们的朋友全栈君。

目录

1.什么是全局变量和局部变量

2.全局变量和局部变量的声明

2.1 全局变量的声明

2.2 局部变量的声明

 3.全局变量和局部变量一些常见问题

   3.1全局变量跟局部变量重名

3.2 零散变量的问题

3.3. 变量释放问题

总结:


 

1.什么是全局变量和局部变量

全局变量:常常定义在函数外部,拥有全局作用域,即在 JavaScript 代码的任何地方都可以访问。

局部变量:定义在函数内部,只能在函数中使用的变量,作用范围是从函数开始到结尾,即在{}里。

在函数内声明的变量只在函数体内有定义,即为局部变量,其作用域是局部性的。需要注意的是,在函数体内声明局部变量时,如果不使用 var 关键字,则将声明全局变量。

<script>
		var str1 = "hello1"; //定义一个全局变量
		function a() {
			var str2 = "hello2"; //定义一个局部变量
			str3 = "hello3"; //定义一个全局变量
		}
</script>

 此处str1和str3是全局变量,str2为局部变量。

2.全局变量和局部变量的声明

2.1 全局变量的声明

在js中全局变量声明方式分为显示声明和隐式声明

第一种声明方式:使用var关键字+变量名在函数外部声明就是全局变量,例如:

var bianliang = "全局变量";

第二种声明方式:没有使用var关键字声明,直接给变量名赋值,不管是在函数内部还是外部都是全局变量,例如:

<script>
		text = "全局变量";

		function bl() {
			text1 = "我也是全局变量";
			var text2 = "我是局部变量";
			console.log(text2); //局部变量只能在函数中使用
		}

		bl() //结果:我是局部变量

		console.log(text); //结果:全局变量
		console.log(text1); //结果:我也是全局变量
		//console.log(text2); //局部变量,在函数外使用会报错
</script>

第三种声明方式: 使用window全局对象来声明,全局对象的属性对应也是全局变量,例如:

window.test3 = 'window全局对象声明全局变量';

console.log(test3);//结果:window全局对象声明全局变量

 

2.2 局部变量的声明

声明局部变量一定要使用var关键字,使用var关键字声明变量时,变量会自动添加到距离最近的可用环境中。如果没有写var, 变量就会暴露在全局上下文中, 成为全局变量。如果变量在未声明的情况下被初始化,该变量会自动添加到全局环境。

<script>
		function bl() {
			text1 = "我也是全局变量";//没有使用var 为全局变量
			var text2 = "我是局部变量";
			console.log(text2); //局部变量只能在函数中使用
		}
</script>

 3.全局变量和局部变量一些常见问题

   3.1全局变量跟局部变量重名

当全局变量跟局部变量重名时,局部变量的scope会覆盖掉全局变量的scope,当离开局部变量的scope后,又重回到全局变量的scope。

<script>
		var str = "我是全局变量";

		function b() {
			var str = "我是局部变量";
			console.log(str); //结果:我是局部变量
		}
		b();
		console.log(str);//结果:我是全局变量
</script>

 当全局变量遇上局部变量时,怎样使用全局变量呢?用window.globalVariableName。

<script>
		var a = 1; //全局变量
		! function b() {
			var a = 2; //局部变量a在这行定义
			console.log(window.a); //a为1,这里的a是全局变量哦!
			console.log(a); //a为2,这里的a是局部变量哦!
		}()
		console.log(a); //a为1,这里并不在function b scope内,a的值为全局变量的值
</script>

3.2 零散变量的问题

Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量),从而确定变量的作用域。所以Javascript允许在函数的任意地方声明变量,无论在哪里声明,效果都等同于在函数顶部进行声明。怎么理解呢?看下面一个例子:

<script>
		var str = "我是全局变量";
		! function b() {
			console.log(str); //结果:undefined
			var str = "我是局部变量";
			console.log(str); //结果:我是局部变量
		}()
</script>

为什么不是: 我是全局变量 和 我是局部变量?
原因很简单:对JavaScript而言,只要变量是在同一个范围(函数)里,就视为已经声明,哪怕是在变量声明前就使用。上面的代码相当于:

<script>
		var str = "我是全局变量";
		! function b() {
			var str; //系统自动赋值为 str = undefined
			console.log(str); //结果:undefined
			var str = "我是局部变量";
			console.log(str); //结果:我是局部变量
		}()
</script>

3.3. 变量释放问题

请看下面的代码:

<script>
		var a = "hello"; //全局变量
		window.b = "word"; //全局变量
		delete a;
		delete b;
		console.log(typeof a); //结果:string
		console.log(typeof b); //结果:undefined
		! function b() {
			var c = 1; //局部变量
			d = 2; //全局变量
			delete c;
			delete d;
			console.log(typeof c); //结果:number
			console.log(typeof d); //结果:undefined
		}()
</script>

结论:

  • 使用 var 创建的变量不能使用 delete 释放内存。
  • 不使用 var 创建的变量可以使用 delete 释放内存。

总结:

1.在过程体内(包括方法function(){},对象Object o={})内的对象)加var保留字则为局部变量,其他情况下都是全局变量(无论是否使用var。不进行声明而直接使用全局变量会报错(可以隐式声明),而局部变量先使用后声明则不会报错,只是值为undefined。

2.全局变量跟局部变量重名时,局部变量的范围会覆盖掉全局变量的范围,当离开局部变量的范围后,又重回到全局变量的范围。(若想指定是全局变量可以使用 window.globalVariableName。

3.Javascript允许在函数的任意地方声明变量,无论在哪里声明,效果都等同于在函数顶部进行声明

4.使用 var 创建的变量不能使用 delete 释放内存,其他方式创建的变量可以使用 delete 释放内存。

 

一般来说全局变量所带来的 bug 问题非常多,所以最好尽量少用全局变量。另外,声明变量最好带 var, 不应使用带 var 的链式赋值,在函数体内定义变量时,最好把变量声明放在顶部,防止出现变量没有被定义就被使用的逻辑错误。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/129969.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java学习之Spring框架基础篇

    Java学习之Spring框架基础篇0x00前言续上篇文章,继续更新Spring框架内容。0x01Bean自动装载注解自动装载在spring框架里面可以自动装配Bean。我们只需要在b

    2021年12月12日
    110
  • redis集群相关资料

    redis集群相关资料

    2021年9月14日
    56
  • 任正非的管理思想核心_任正非管理思想心得

    任正非的管理思想核心_任正非管理思想心得励精图治,再创辉煌——任正非在财经采购系统干部就职仪式上的讲话希望你们在新的岗位上搞好团结,脚踏实地,一丝不苟地,诚实地,不哗众取宠地去做好自己管辖的事情。要按公司的产品定位与市场定位,跟进自己的工作。一、财务系统要逐步由现行核算型会计模式扩展为管理型。必须加强预测、决策、分析与控制工作。企业管理的核心就是提高质量,降低成本。抓财务管理,就是要抓资金流通的全过程及全部内容,以及不断…

    2025年6月8日
    3
  • linux amd显卡驱动画面撕裂,从此告别画面撕裂 AMD-FreeSync技术解析

    linux amd显卡驱动画面撕裂,从此告别画面撕裂 AMD-FreeSync技术解析说到”垂直同步”技术,相信很多玩家都知道是啥意思,它可以有效解决游戏中的画面撕裂问题,让画面更平滑。然而它也有一个致命伤:会限制显卡的性能输出,进而造成卡顿。至于具体缘由,还要从显示器的工作原理说起。●为什么会有撕裂?目前几乎所有显示器的画面都是一行一行扫描上去的,刷新率通常固定为60Hz,而显卡在渲染不同画面时的速度不一样,简单画面渲染的快,复杂画面则要慢一些,当显卡输出和显示器输出不同步,…

    2022年6月7日
    38
  • python中的缩进规则_什么叫代码缩进

    python中的缩进规则_什么叫代码缩进引言python对缩进是敏感的,而大多教程对缩进规则,往往就几句话带过,对于没有其他语言基础的初学者,十分不友好,本文就把python常见的缩进问题做了一些整理。一、Python缩进长度及缩进字符常看到一些Python缩进错误的解读,“tab符和空格做为缩进不能混用”、“缩进一定是4个空格”。实际上并没有这些限制,例如图中的示例就可以正常运行。a=1ifa==1:print(a)else:print(1)k=1;whilek<5:

    2022年10月11日
    2
  • 为matlab GUI添加背景图片

    为matlab GUI添加背景图片为matlabGUI添加背景图片为GUI添加一个背景图片,不仅可以让我们的界面变得漂亮大气上档次,而且软件对与用户的交互更加友好。用C或者C++写过软件界面的人都知道,这件事情可以轻而易举的办到,那么问题来了,怎么为matlab的GUI添加一个背景图片呢?其实这个操作也很简单,但是如果是第一次做这个,可能需要折腾好久。在这里我希望跟大家分享一下这个小技巧,避免大家遇到同样的问题再走弯路。欢迎…

    2022年6月12日
    34

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号