JavaScript中变量提升

最新推荐文章于 2023-12-15 10:33:19 发布

程宇寒

最新推荐文章于 2023-12-15 10:33:19 发布

阅读量252

点赞数

文章标签： JavaScript js 变量变量提升前端

本文链接：https://blog.csdn.net/czh500/article/details/103458933

版权

直接po图和代码

javascript变量提升详解参考网页https://blog.csdn.net/czh500/article/details/103455845

JavaScript变量提升参考网页https://www.runoob.com/js/js-hoisting.html

JavaScript严格模式(use strict)参考网页https://www.runoob.com/js/js-strict.html

在头部声明你的变量
对于大多数程序员来说并不知道 JavaScript变量提升。
如果程序员不能很好的理解变量提升，他们写的程序就容易出现一些问题。
为了避免这些问题，通常我们在每个作用域开始前声明这些变量，这也是正常的 JavaScript 解析步骤，易于我们理解。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript中变量提升</title>
<script type="text/javascript">
/*
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。 
变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。 
*/

	console.log("**********案例1**********");
// 	console.log(a); //报错ReferenceError: a is not defined
	console.log(b); //结果为undefined
	var b;
	console.log(c); //结果为undefined
	var c = "江西省赣州市于都县";
	console.log(c); //结果为江西省赣州市于都县
	
	console.log("**********案例2**********");
	//JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
	d = 666;// 变量 d设置为666
	console.log(d); //结果为666
	var d;// 声明d
	
	//
	var e;//声明e
	e = 888;//变量e设置为888
	console.log(e); //结果为888
//要理解以上案例就需要理解hoisting(变量提升)。

//
	console.log("**********案例3**********");
	var f = 999;// 初始化f
	var g = 137;// 初始化g
	console.log(f, g); //结果为999 137
	
//JavaScript中，变量的声明部分，会提升，变量的初始化部分，不会提升
//参考网页https://www.runoob.com/js/js-hoisting.html
	var j = 362;// 初始化j
	console.log(j, k); //结果为362 undefined
	var k = 298;// 初始化k
//k输出了undefined，这是因为变量声明 (var k)提升了，但是初始化(k = 298)并不会提升，所以k变量的值是undefined。
/*
上面的代码类似于以下代码
	var j = 362; // 声明变量j,并且初始化j
	var k;     // 声明k
	console.log(j, k);
	k = 298;    // 设置k为298(初始化)
*/

/*
在头部声明你的变量
对于大多数程序员来说并不知道 JavaScript变量提升。
如果程序员不能很好的理解变量提升，他们写的程序就容易出现一些问题。
为了避免这些问题，通常我们在每个作用域开始前声明这些变量，这也是正常的 JavaScript 解析步骤，易于我们理解。
*/

/*
JavaScript 严格模式(strict mode)不允许使用未声明的变量。
在下一个章节中我们将会学习到严格模式(strict mode)。
JavaScript严格模式(use strict)
参考网页https://www.runoob.com/js/js-strict.html
*/

</script>
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JavaScript中变量提升</h3>
	<a href="https://www.runoob.com/js/js-hoisting.html" target="_blank">
	JavaScript变量提升参考网页https://www.runoob.com/js/js-hoisting.html
	</a>
	<br/>
	<a href="https://blog.csdn.net/czh500/article/details/103455845" target="_blank">
	javascript变量提升详解参考网页https://blog.csdn.net/czh500/article/details/103455845
	</a>
	<br/>
	<a href="https://www.runoob.com/js/js-strict.html" target="_blank">
	JavaScript严格模式(use strict)参考网页https://www.runoob.com/js/js-strict.html
	</a>
</body>
</html>