《悟透JavaScript》学习札记三之函数的魔力

最新推荐文章于 2024-09-11 17:50:57 发布

最新推荐文章于 2024-09-11 17:50:57 发布 · 58 阅读

文章标签：

#javascript #ViewUI

本文深入探讨JavaScript中函数声明的不同方式，包括定义式和变量式函数声明，并对比它们之间的差异及执行顺序的影响。此外，还通过具体示例展示了两种声明方式在实际应用中的表现。

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

1.函数声明：

<script type="text/javascript">
function myfunc(){ alert("Hello definition");};
myfunc();
alert(typeof(myfunc));
</script>

<script type="text/javascript">
var myfunc = function(){ alert("Hello variable");};
myfunc();
alert(typeof(myfunc));
</script>

2.声明方式差异比较

<script type="text/javascript">
var myfunc = function(){ alert("Hello variable");};
myfunc(); //第一次调用，输出Hello variable
myfunc = function(){ alert("Yeah variable");};
myfunc(); //第二次调用，输出HeYeah variable
</script>

然而：

<script type="text/javascript">
function myfunc(){ alert("Hello definition");};
myfunc(); //第一次调用
function myfunc(){ alert("Yeah definition");};
myfunc(); //第二次调用
</script>

两次输出结果均为Yeah definition

原因：JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段的分析执行的。而且，在同一段程序的分析执行中，定义式的函数语句会被提取出来优先执行，然后再按顺序执行其他语句代码。也就是说，在第一次调用myfunc之前，第一个函数定义的代码逻辑，已被第二个定义语句覆盖了，所以两次执行都是最后一个函数逻辑了。

另附：
// 定义式函数声明
alert(SumDef(1, 2)); //output: 3
function SumDef(num1, num2){
return num1 + num2;
}
// 变量式函数声明
alert(SumVar(2, 3)); // 没有结果，下面也不会执行
var SumVar = function(num1, num2){
return num1 + num2;

}
alert(SumVar(3, 4));

原因： JavaScript解析器在解释代码的时候会首先读取函数声明，使其在执行其他代码之前可以得到访问。而对于变量式函数声明，解析器会把其当做变量赋值语句，从而
alert(SumVar(2, 3)); 时就相当于调用了一个不存在的SumVar函数，导致出错，下面代码也不会执行。