JavaScript的作用域（学习笔记一）

最新推荐文章于 2024-08-22 10:43:59 发布

原创最新推荐文章于 2024-08-22 10:43:59 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #脚本 #ViewUI

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了JavaScript中变量和函数定义的顺序对程序运行的影响。通过具体示例，解析了不同定义方式下变量和函数的行为差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
        var test1 = 'Just a test!'; 
	function test1(x){ 
		return x*x; 
	};
	alert(test1);  
	alert(test1(3));

	var test2 = 'Just another test!'; 
	var test2 = function(x){ 
		return x*x; 
	};
	alert(test2(5)); 
	alert(test2);
</script>

先看一下上面这段代码，4个alert分别会打印出什么？

下面给出答案：

alert(test1)打印出“Just a test!”
alert(test1(3))无法正确执行，直接报js脚本错误：缺少函数
alert(test2(5))打印出：“25”
alert(test2)打印出：function(x){return x*x;}

1、首先分析一下test1。众所周知，JavaScript的执行不是从上到下顺序执行的，而是先找到定义变量的语句首先执行，当把所有的定义语句都执行完之后，在按照顺序执行剩余的语句。所以，对于test1来说，虽然代码片段(1)

function test1(x){ 
	return x*x; 
};

在代码片段(2)

var test1 = 'Just a test!';

之后书写，但是，js在编译的时候，代码片段(1)是定义语句，则首先执行，然后，执行代码片段(2)。由于代码片段(2)的变量名称与代码片段(1)的变量名称相同，对test1进行的覆盖，test1就由第一次定义的函数变成了一个字符串。所以，打印的结果就是上面给出的前两个答案；

2、再来分析一下test2。按照刚才讲解的JavaScript的执行顺序，应该能够很清楚的知道打印出的结果了。但是，有人又提出了一个问题，看下面的代码片段

//方式一
function test2(x){
        return x*x; 
}

//方式二
var test2 = function(x){ 
	return x*x; 
};

方式一和方式二有什么区别吗？不都是定义了一个叫test2的函数吗？单就这方面来看，确实没有什么区别，但是，方式一是“定义式”的，方式二是“赋值式”的，放到整个上下文中，就会对执行的顺序产生影响。所以，这个细节一定要注意啊！