解释两个类似的js方法为什么运行结果大相径庭

最新推荐文章于 2025-08-22 11:52:43 发布

原创最新推荐文章于 2025-08-22 11:52:43 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

技术闲扯专栏收录该内容

2 篇文章

订阅专栏

本文通过两个JavaScript函数的对比，详细解析了变量提升的概念及其如何影响函数内部变量的访问。通过具体的代码示例，展示了变量声明在函数执行前被提升到顶部这一特性是如何导致不同的运行结果。

解释两个类似的js方法为什么运行结果大相径庭

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>解释两个类似的js方法为什么运行结果大相径庭</title>
</head>
<body>
    解释两个类似的js方法为什么运行结果大相径庭？
<script>
    var str = 'hi';
function demo() {
	alert( str );//undefined
	var str = 'string';
	alert( str );//string
}
demo();


var str2 = 'str2';
function test() {
	alert( str2 );//str2
}
test();
/* 
 * demo()运行结果为 undefined
 * test()运行结果为str2
 * 原因：js运行时会把所有定义的变量前提，前提后的js为：
 *  var str = 'hi';
 *  var str2 = 'str2';
 *  function demo() {
 *     var str ;
	alert( str );//undefined
	 str = 'string';
	alert( str );//string
    }
    function test() {
	alert( str2 );//str2
    }
    demo();
    test();
    由此可以解释为什么demo()运行结果为undefined和string,而test()运行结果为str2了
 * */
</script>
</body>
</html>