详解 javascript 变量提升

最新推荐文章于 2024-01-18 09:28:28 发布

web-chubby

最新推荐文章于 2024-01-18 09:28:28 发布

阅读量105

点赞数

分类专栏： js 文章标签： javascript js web

本文链接：https://blog.csdn.net/weixin_44092099/article/details/108471197

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言：

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

一、概念

使用 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>

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

web-chubby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详解 javascript 变量提升

前言：变量提升是在面试中常见被问到的问题，今天就来说一下这个问题。一、概念使用 var 来声明变量的时候，会提到当前作用域的顶端，赋值语句在原地等待赋值。javascript 在执行的时候会分为两部分：预编译阶段：js 在变量声明提升的时候，会将 var 声明的变量以及用关键字函数声明的函数都会提升到当前作用域的顶端，赋值语句在原地等待赋值。这里要注意：如果变量名与函数相同的情况下，函数的优先级大于变量执行阶段：自上而下执行案例：<body> <in
复制链接

扫一扫