Js中函数声明和函数表达式的区别

阳光穿透心脏的1/2处 2022-12-17 08:40 158阅读 0赞

先看以下几段烧脑的代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>f();</code><code>//=&gt;?</code> <code>var</code>&nbsp;<code>f =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"var"</code><code>);</code> <code>}</code> &nbsp; <code>function</code>&nbsp;<code>f() { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"function"</code><code>);</code> <code>}　　</code> </td> 
 </tr> 
 </tbody> 
</table>

控制台打印结果"function"。

另一段代码

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>var</code>&nbsp;<code>f =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"var"</code><code>);</code> <code>}</code> &nbsp; <code>function</code>&nbsp;<code>f() { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"function"</code><code>);</code> <code>}</code> <code>f();</code><code>//=&gt;?</code> </td> 
 </tr> 
 </tbody> 
</table>

控制台打印结果"var"。

关于函数声明和函数表达式更具体的定义在[javascript函数][javascript]中有相关详细的介绍，这里就不再叙述。上述代码主要用于引出函数声明和函数表达式的区别。

函数声明和函数表达式的区别本质其实是函数声明提升和变量声明提升的区别。

一般变量的声明为以下形式：

js在预编译阶段，是这么处理的：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>//预编译阶段</code> <code>var</code>&nbsp;<code>a;</code> <code>//执行阶段</code> <code>a=10;</code> </td> 
 </tr> 
 </tbody> 
</table>

预编译阶段，js将其分解为变量声明与变量赋值。

一般函数声明：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>function</code>&nbsp;<code>fDeclaration(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"declaration"</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

预编译阶段，js将其分解为类似以下的变量声明与变量赋值：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>//预编译</code> <code>var</code>&nbsp;<code>fDeclaration;</code> <code>fDeclaration =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"declaration"</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

在标识符相同的情况下，js如何处理变量与函数呢?

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>var</code>&nbsp;<code>f =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"var"</code><code>);</code> <code>}</code> <code>function</code>&nbsp;<code>f() { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"function"</code><code>);</code> <code>}</code> <code>f();</code><code>//=&gt; 在控制台会打印什么结果呢？</code> </td> 
 </tr> 
 </tbody> 
</table>

函数声明提前优先于变量声明提前。因此上面代码JS预编译会做类似如下处理：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>/* 预编译阶段</code> <code>&nbsp;</code><code>*函数声明提前优先级别更高，先进行预编译,并对f进行了赋值。</code> <code>&nbsp;</code><code>*在预编译阶段后于函数声明，f经历两次赋值，后来的赋值替代了原先的赋值，表现为f执行函数表达式。</code> <code>&nbsp;</code><code>*/</code> &nbsp; <code>//函数声明预编译阶段</code> <code>var</code>&nbsp;<code>f;</code> <code>f =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"function"</code><code>);</code> <code>}</code> <code>//函数表达式提前预编译,由于它是变量声明，变量声明提前是只有声明提前，而没有赋值提前。</code> <code>//重复的声明，js会忽略</code> <code>var</code>&nbsp;<code>f;</code> <code>/*执行阶段*/</code> <code>//变量f再次赋值</code> <code>f =&nbsp;</code><code>function</code>&nbsp;<code>() { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"var"</code><code>);</code> <code>}</code> <code>f();</code><code>//=&gt;"var"</code> </td> 
 </tr> 
 </tbody> 
</table>

[javascript]: https://www.cnblogs.com/f6056/p/11758106.html