JS函数作用域提升

超、凢脫俗 2023-07-22 05:00 1阅读 0赞

当你看到var a=2;时，可能会认为这是一个声明。但js实际上回将其看成两个声明：var a;和a=2;。第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>a=2;</code> <code>var a;</code> <code>console.log(a);//2</code> </td> 
 </tr> 
 </tbody> 
</table>

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>console.log(a);//undefined</code> <code>var a=2;</code> </td> 
 </tr> 
 </tbody> 
</table>

每个作用域都会进行提升操作。函数内部也会对变量进行提升（显然并不是提升到了整个程序的最上方，在函数内部的最上方）。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>foo();</code> <code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(a);//undefined</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var a=2;</code> <code>}</code> <code>等同于</code> <code>function</code> <code>foo(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var a;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(a);//undefined</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>a=2;</code> <code>}</code> <code>foo();</code> </td> 
 </tr> 
 </tbody> 
</table>

可以看到，**函数声明会被提升，但是函数表达式却不会被提升**

函数声明和变量声明都会被提升。但是函数会首先被提升，然后才是变量。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>foo();//1</code> <code>var foo;</code> <code>function</code> <code>foo(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(1);</code> <code>}</code> <code>foo=</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(2);</code> <code>};</code> <code>这段代码会被引擎理解为如下形式：</code> <code>function</code> <code>foo(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(1);</code> <code>}</code> <code>foo();//1</code> <code>foo=</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(2);</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

var foo尽管出现在function foo()的声明之前，但它是重复的声明（因此被忽略了），因为函数声明会被提升到普通变量之前。  
尽管重复的var声明会被忽略掉，但出现在后面的函数声明还是可以覆盖前面的。

[?][Link 1]

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

一个普通块内部的函数声明通常会被提升到所在作用域的顶部，这个过程不会像下面暗示的那样可以被条件判断所控制：

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>foo();//b</code> <code>var a=</code><code>true</code><code>;</code> <code>if(a){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>foo(){console.log(</code><code>"a"</code><code>);}</code> <code>}</code><code>else</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>foo(){console.log(</code><code>"b"</code><code>);}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

[Link 1]: https://www.2cto.com/kf/201709/679506.html#