详解 javascript 变量提升

prtyaa 2023-12-26 17:08:26  62861

分类专栏：资讯

变量提升是在面试中常见被问到的问题，今天就来说一下这个问题。

一、概念

使用 var 来声明变量的时候，会提到当前作用域的顶端，赋值语句在原地等待赋值。

javascript 在执行的时候会分为两部分：

预编译阶段：js 在变量声明提升的时候，会将 var 声明的变量以及用关键字函数声明的函数都会提升到当前作用域的顶端，赋值语句在原地等待赋值。

这里要注意：如果变量名与函数相同的情况下，函数的优先级大于变量

执行阶段：自上而下执行

案例：

<body>
	<input type="button" id="btn" value="访问num" />
</body>

<script type="text/javascript">
	var btn = document.querySelector('#btn')
	btn.onclick = function(){ num = 10;
		alert(num)
	}
</script>

这里可以看到先声明 num 后访问是可以访问到的

如果把 num 写到 alert 后面就会发生变量提升，就会显示 undefined 未赋值

<script type="text/javascript">
	var btn = document.querySelector('#btn')
	btn.onclick = function() {
		alert(num)
		var num = 10;
	}
</script>

这段代码解析可以写为一下方式

num 发生变量提升，提升到当前作用域的顶端，赋值语句在原地等待赋值

<script type="text/javascript">
	var btn = document.querySelector('#btn')
	btn.onclick = function() {
		var num; //变量提升
		alert(num)
		num = 10; //赋值语句在原地等待赋值
	}
</script>

多个 script 的情况

<script type="text/javascript">
	console.log(num)
</script>
<script type="text/javascript">
	var num = 10;
</script>

这里控制台就会报错，num 没有定义

Uncaught ReferenceError: num is not defined

变量提升不能跨 script

二、关键字函数提升

<script type="text/javascript">
	var btn = document.querySelector('#btn')
	btn.onclick = function() {
		var fn = 10;
		var fn = function(){}
		alert(fn)
	}
</script>

这里出来的就是函数体，函数的优先级大于变量，先提升。

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30900

赞同 0

评论 0 条

详解 javascript 变量提升

一、概念

多个 script 的情况

二、关键字函数提升

相关文章

关注我们