千禧嘉 發表於 2020-5-11 10:36:00

把99%的程序员烤得外焦里嫩的JavaScript面试题

<div>最近有学员给出一段令人匪夷所思的JavaScript代码（据说是某某大厂面试题），废话少说，上代码：</div>
<div>&nbsp;</div>
<div id="4919-1588832301882" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 10<span style="color: rgba(0, 0, 0, 1)">;
{
    a </span>= 99<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {
    }

    a </span>= 30<span style="color: rgba(0, 0, 0, 1)">;
}
console.log(a);</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>这段代码运行结果是99，也就是说，a = 99将a的值重新设为99，而由于后面使用a定义了一个函数，a = 30其实是修改的a函数，或者干脆说，函数a将变量a覆盖了，所以在a函数的后面再也无法修改变量a的值了，因为变量a已经不存在了，ok，这段代码的输出结果好像可以解释得通，下面再看一段代码：</div>
<div>&nbsp;</div>
<div id="3929-1588832563905" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 10<span style="color: rgba(0, 0, 0, 1)">;
{
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> hello() {
      a </span>= 99<span style="color: rgba(0, 0, 0, 1)">;
      </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {
      }

      a </span>= 30<span style="color: rgba(0, 0, 0, 1)">;
    }
    hello();
}
console.log(a);</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>大家可以猜猜，这段代码会输出什么结果呢？10？99？30？，答案是10。也就是说，hello函数压根就没有修改全局变量a 值，那么这是为什么呢？</div>
<div>&nbsp;</div>
<div>根据我们前面的结论，当执行到a = 99时，覆盖变量a的值，然后执行函数a的定义代码，接下来执行a = 30，将函数a改成了变量a，这个解释似乎也没什么问题，但是，问题就是，与第1段代码的输出不一样。第1段代码修改了全局变量a的值，第2段代码没有修改全局变量a的值，这是为什么呢？</div>
<div>&nbsp;</div>
<div>现在思考3分钟........</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>其实吧，别看这道题很简单，可能有很多程序员都能蒙对答案，反正就这几种可能，一共就3个数，蒙对的可能性是33.3333%，但如果让你详细解释其中的原因呢？这恐怕没有多少程序员能清楚地解释其中的原理，现在就让我来给出一个天衣无缝的解答：</div>
<div>&nbsp;</div>
<div>尽管前面给出的两段代码并不复杂，但这里面隐藏的信息量相当的大。在正式解答之前，先给出一些知识点：</div>
<div>&nbsp;</div>
<div><strong>1. 执行级代码块和非执行级代码块</strong></div>
<div>&nbsp;</div>
<div>这里介绍一下两种代码块的区别：</div>
<div>&nbsp;</div>
<div>执行级代码块，顾名思义，就是在定义代码块的同时就执行了，看下面的代码：</div>
<div>&nbsp;</div>
<div id="1952-1588842971197" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
      </span><span style="color: rgba(0, 0, 255, 1)">var</span> a = 1<span style="color: rgba(0, 0, 0, 1)">;
      </span><span style="color: rgba(0, 0, 255, 1)">var</span> b = 2<span style="color: rgba(0, 0, 0, 1)">;
      console.log(a </span>+<span style="color: rgba(0, 0, 0, 1)"> b);
}</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>这段代码，在解析的同时就会执行，输出3。</div>
<div>而非执行级代码块，就是在定义时不执行，只有在调用时才执行，很显然，函数代码块属于非执行级代码块，案例如下：</div>
<div>&nbsp;</div>
<div id="2014-1588843087241" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> add()
{
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> a = 1<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> b = 2<span style="color: rgba(0, 0, 0, 1)">;
    console.log(a </span>+<span style="color: rgba(0, 0, 0, 1)"> b);
}</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>如果给执行级代码块套上一个函数头，就成了上面的样子，如果只有add函数，函数体是永远也不会执行的，除非使用下面的代码调用add函数。</div>
<div>&nbsp;</div>
<div id="8151-1588843138720" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre>add();</pre>
</div>
</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>那么这两种代码块有什么区别呢？先看他们的区别：</div>
<div>1. 执行级代码块中的变量和函数自动提升作用域</div>
<div>2. 如果有局部符号，执行级代码块会优先进行作用域提升，而非执行级代码块，会优先考虑局部符号</div>
<div>&nbsp;</div>
<div>估计刚看到这两点区别，很多同学有点懵，下面我就来挨个解释下。</div>
<div>&nbsp;</div>
<div>（1）执行级代码块中的变量和函数自动提升作用域</div>
<div>&nbsp;</div>
<div>先给出一个例子：</div>
<div>&nbsp;</div>
<div id="5349-1588843363799" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> a = 1<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> b = 2<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> sub() {
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> a -<span style="color: rgba(0, 0, 0, 1)"> b
    }
}

console.log(a </span>+ b);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输出3</span>
console.log(sub());<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出-1</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>在这段代码中，a和b都使用了var声明变量，说明这两个变量是块的局部变量，那么为什么在块外面还能访问呢？这就是执行级代码块的作用域提升。如果在块外有同名的符号，需要注意如下几点：</div>
<div>&nbsp;</div>
<div>符号只有用var定义的变量和函数可以被覆盖，类和用let、const定义的变量不能被覆盖，会出现重复声明的异常。代码如下：</div>
<div>&nbsp;</div>
<div id="8996-1588844079547" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 14<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> b() {
   
}
{
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> a = 1<span style="color: rgba(0, 0, 0, 1)">;

    </span><span style="color: rgba(0, 0, 255, 1)">var</span> b = 2<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> sub() {
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> a -<span style="color: rgba(0, 0, 0, 1)"> b
    }
}

console.log(a </span>+ b);    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出3</span>
console.log(sub())   <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出-1 </span></pre>
</div>
</div>
<div>很明显，全局变量a和全局函数b被块内部的a和b覆盖了，所以输出的结果还是3和-1。</div>
<div>
<div class="cnblogs_code">
<pre>let a = 14<span style="color: rgba(0, 0, 0, 1)">;
class b{}
{
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> a = 1<span style="color: rgba(0, 0, 0, 1)">;

    </span><span style="color: rgba(0, 0, 255, 1)">var</span> b = 2<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> sub() {
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> a -<span style="color: rgba(0, 0, 0, 1)"> b
    }
}

console.log(a </span>+<span style="color: rgba(0, 0, 0, 1)"> b);
console.log(sub())</span></pre>
</div>
<p>&nbsp;</p>
</div>
<div>执行这段代码，会抛出如下图所示的异常：</div>
<div><img src="https://img2020.cnblogs.com/blog/32818/202005/32818-20200511102437339-1727782324.png" alt=""></div>
<div><img src="//note.youdao.com/src/36F0DF14615349D9BA17F3F078425B8F" alt="" data-media-type="image"></div>
<div>&nbsp;</div>
<div>这说明用let声明的变量已经被锁死在顶层作用域中，不可被其他作用域的变量替换。如果将let a = 14注释掉，会抛出如下图的异常：</div>
<div><img src="//note.youdao.com/src/DA22568FA29D4B9FA251E7C97EB7CD89" alt="" data-media-type="image"></div>
<div>&nbsp;<img src="https://img2020.cnblogs.com/blog/32818/202005/32818-20200511102457231-1934040755.png" alt=""></div>
<div>这说明类b也被锁死在顶层作用域中，不可被其他作用域的变量替换。</div>
<div>&nbsp;</div>
<div>相对于可执行级代码块，非可执行级代码块就不会进行作用域提升，看如下代码：</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> myfun()
{
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> a = 1<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> b = 2<span style="color: rgba(0, 0, 0, 1)">;
}
console.log(a </span>+ b);</pre>
</div>
</div>
<div id="8042-1588844523665" data-theme="default" data-language="javascript">&nbsp;</div>
<div>执行这段代码，会抛出如下图的异常：</div>
<div><img src="https://img2020.cnblogs.com/blog/32818/202005/32818-20200511102529915-1679575526.png" alt=""></div>
<div><img src="//note.youdao.com/src/D65DDE08C50B45F69E18495CCD2BBB65" alt="" data-media-type="image"></div>
<div>&nbsp;</div>
<div>很明显，是变量a没有定义。</div>
<div>&nbsp;</div>
<div>（2）如果有局部符号，执行级代码块会优先进行作用域提升，而非执行级代码块，会优先考虑局部符号，看下面的解释。</div>
<div>&nbsp;</div>
<div>先上代码：</div>
<div>执行级代码块</div>
<div id="8090-1588844728698" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 100<span style="color: rgba(0, 0, 0, 1)">
{
    a </span>= 10<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {

    }
    a </span>= 20<span style="color: rgba(0, 0, 0, 1)">;

}
console.log(a)；    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出10</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>非执行级代码块</div>
<div id="9132-1588844790281" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 100<span style="color: rgba(0, 0, 0, 1)">
{
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> hello() {
      a </span>= 10<span style="color: rgba(0, 0, 0, 1)">;
      </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {

      }

      a </span>= 20<span style="color: rgba(0, 0, 0, 1)">;
    }
    hello();

}
console.log(a)；    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出100    </span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>这两段代码，前面的修改了变量a，输出10，后面的没有修改变量a，输出100，这是为什么呢？</div>
<div>&nbsp;</div>
<div>这是由于执行级代码块会优先进行作用域提升，先看第1段代码，按着规则，会优先用块中的a覆盖全局变量a，所以a就变成10了。然后声明了a函数，所以a = 20其实是覆盖了局部函数a。其实这个解释咋一看没什么问题，不过仔细推敲，还是有很多漏洞。例如，既然a = 10优先提升作用域，难道a = 20就不能优先提升作用域吗？将 a = 10覆盖，变成20，为什么最后输出的结果还是10呢？函数a难道不会提升作用域，将变量a覆盖吗？这些疑问会在后面一一解开。</div>
<div>&nbsp;</div>
<div>再看第2段代码，非执行级代码块会优先考虑局部变量，所以hello函数中的a会将函数a覆盖，而不是全局变量a覆盖，所以hello函数中的两次对a赋值，都是处理的局部符号a，而不是全局符号a。这个解释咋一看也没啥问题，但仔细推敲，也会有一些无法解释的。例如，a = 10是在函数a前面的语句，为啥会考虑在a = 10后面定义的函数a呢？这些疑问会在后面一一解开。</div>
<div>&nbsp;</div>
<div><strong>2. 多遍扫描</strong></div>
<div>&nbsp;</div>
<div>什么叫多遍扫描呢？这里的扫描指的是对JavaScript源代码进行扫描。因为你要运行JavaScript代码，肯定是要扫描JavaScript文件的所有内容的。不过不同类型的编程语言，扫描的次数不同。对于动态语言（如JavaScript、Python、PHP等），至少要扫描一遍（这句话当我没说，肯定要至少扫描一遍，否则要执行空气吗！），对于静态编程语言（如Java、C#，C++），至少要扫描2遍，通常是3遍以上。关于静态语言的分析问题，以后再写文章描述。这里主要讨论动态语言。</div>
<div>&nbsp;</div>
<div>早期的动态语言（如ASP），通常会扫描一遍，但现在很多动态语言（如JavaScript、Python等），都是至少扫描2遍。现在先看看扫描1遍和扫描2遍有啥区别。</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>先看看在什么情况下只需要扫描1遍：</div>
<div>&nbsp;</div>
<div>对于函数、类等语法元素与定义顺序有关的语言就只需要扫描1遍。那么什么是与定义顺序有关呢？也就是说，在使用某个函数、类之前必须定义，或者说，函数、类必须在使用前定义。例如，下面的代码是合法的。</div>
<div id="7129-1588845705933" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> hello() {
}
hello()</span></pre>
</div>
</div>
<div>这是因为hello函数在使用之前就定义了。而下面的代码在运行时会抛出异常。这是因为在调用hello函数之前没有定义hello函数。</div>
<div id="1653-1588845705933" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">hello()
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> hello函数是在使用之后定义的</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> hello() {
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
<div>那么在什么情况下需要至少扫描2遍呢？</div>
<div>对于函数、类等语法元素与定义顺序无关的语言必须至少扫描2遍。这是因为第1遍需要确定语法元素（函数、类等）的定义，第2遍才是使用这些语法元素。经过测试，JavaScript的代码是与定义顺序无关的，也就是说，下面的代码可以正常运行：</div>
<div id="9743-1588845705933" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">hello()
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> hello() {
}</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>很显然，JavaScript解析器至少对代码扫描了2次。对于动态语言（如JavaScript），通常是一边扫描一边执行的（并不像Java这样的静态语言，扫描时并不执行，直到生成.class文件后才通过JVM执行）。一般第1遍负责执行定义代码（如定义函数、类等），第2遍负责执行其他代码。现在就让我们看看JavaScript的这2遍扫描都做了什么。</div>
<div>&nbsp;</div>
<div>先给出结论：JavaScript的第1遍扫描只处理函数和类定义（当然，还有可能处理其他的定义，但本文只讨论函数和类），JavaScript的第2遍扫描负责处理其他代码。但函数和类的处理方式是不同的（见后面的解释）。</div>
<div>&nbsp;</div>
<div>结论是给出了，下面给出支持这个结论的证据：</div>
<div>&nbsp;</div>
<div>看下面的代码：</div>
<div>&nbsp;</div>
<div id="8045-1588846062736" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">hello()
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> hello() {
    console.log(</span>'hello'<span style="color: rgba(0, 0, 0, 1)">)
}</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>执行这段代码，会输出hello。很明显，hello函数在调用之后定义。由于读取文件，是顺序进行的，所以如果只扫描一遍代码，在调用hello函数时不可能知道hello函数的存在。因此，唯一的解释就是扫描了2遍。第1遍，先扫描hello函数的定义部分，然后将hello函数的定义保存到当前作用域的符号表中。第2次扫描，调用hello函数时，就会到当前作用域的符号表查询是否存在函数hello，如果存在，调用，不存在，则抛出异常。</div>
<div>&nbsp;</div>
<div>那么在第1遍扫描时，处理类和函数的规则是否相同呢？先看下面的代码：</div>
<div id="6569-1588848402704" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> h = <span style="color: rgba(0, 0, 255, 1)">new</span> hello();      <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 抛出异常</span>
<span style="color: rgba(0, 0, 0, 1)">class hello {

}</span></pre>
</div>
</div>
<div>在运行这段代码时会抛出如下图所示的异常。</div>
<div><img src="https://img2020.cnblogs.com/blog/32818/202005/32818-20200511102805125-511704657.png" alt=""></div>
<div><img src="//note.youdao.com/src/B3DBBF655B584D399CB906C3342E2FC6" alt="" data-media-type="image"></div>
<div>从这个异常来看，hello类似乎在第1遍扫描中没处理，将hello类的定义放到最前面就可以了，代码如下：</div>
<div id="2020-1588848522202" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">class hello {
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> h = <span style="color: rgba(0, 0, 255, 1)">new</span> hello();<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 正常创建类的实例</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>现在看下面的代码：</div>
<div id="1470-1588848773506" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> p1 = 10<span style="color: rgba(0, 0, 0, 1)">
{
    p1 </span>= 40<span style="color: rgba(0, 0, 0, 1)">;
    class p1{}
    p1 </span>= 50<span style="color: rgba(0, 0, 0, 1)">;
}</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>执行这段代码，会抛出如下图的异常：</div>
<div><img src="https://img2020.cnblogs.com/blog/32818/202005/32818-20200511102900477-554594900.png" alt=""></div>
<div><img src="//note.youdao.com/src/3ECDD889C987438BBA2044C25B4A08B8" alt="" data-media-type="image"></div>
<div>&nbsp;</div>
<div>很明显，错误指向了p1 = 40，而不是class p1{}。假设第1遍扫描没有处理类p1，那么的2遍扫描肯定是按顺序执行的，就算出错，也应该是class p1{}的位置，那么为何是p1 = 40的位置呢？元芳你怎么看！</div>
<div>&nbsp;</div>
<div>元芳：唯一的合理解释就是在第2遍扫描到p1 = 40时，JavaScript解析器已经知道了p1的存在，这就是p1类。那么p1类肯定是在第1遍处理了，只是处理方法与函数不同，只是将p1类作为符号保存到符号表中，在使用p1类时并没有检测当前作用域的符号表，因此，只能在使用类前定义这个类。由于这个规则限制的比较严，所以不排除以后JavaScript升级时支持与位置无关的类定义，但至少现在不行。</div>
<div>&nbsp;</div>
<div>这就是在第1遍扫描时函数与类的处理方式。</div>
<div>&nbsp;</div>
<div>在第2遍扫描就会按部就班执行其他代码了，这一点在以后分析，下面先看其他知识点。</div>
<div>&nbsp;</div>
<div><strong>3. 下面哪段代码会抛出异常</strong></div>
<div>&nbsp;</div>
<div>先来做这道题：</div>
<div>第1段代码：</div>
<div id="1753-1588850113114" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 99<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {
}
console.log(a)</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>第2段代码：</div>
<div id="8587-1588850164055" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> a = 99<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {
    }
    console.log(a)
}</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>第3段代码：</div>
<div id="7551-1588851171236" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
    a </span>= 99<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {
    }
    console.log(a)
}</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>第4段代码：</div>
<div id="7247-1588850219101" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> hello()
{
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> a = 99<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {
    }
    console.log(a)
}
hello();</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>现在思考3分钟......</div>
<div>&nbsp;</div>
<div>答案是第2段代码会抛出如下图的异常，其他3段代码都正常执行，并输出正确的结果。</div>
<div><img src="//note.youdao.com/src/E3D5E4663A154DB8896E095032F8475B" alt="" data-media-type="image"></div>
<div>&nbsp;<img src="https://img2020.cnblogs.com/blog/32818/202005/32818-20200511103037041-542227747.png" alt=""></div>
<div>&nbsp;</div>
<div>那么这是为什么呢？</div>
<div>&nbsp;</div>
<div>先来解释第1段代码：</div>
<div id="9031-1588850339827" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 99<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {
}
console.log(a)</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>在这段代码中，变量a和函数a都位于顶级作用域中，所以就不存在提升作用域的问题了。当第1遍扫描时，函数a被保存到符号表中。第2遍扫描时，执行到var a = 99时，会发现函数a已经在当前作用域了，所以在同一个作用域中，后面处理的符号会覆盖前面的同名符号，所以函数a就被变量a覆盖了。因此，会输出99。</div>
<div>&nbsp;</div>
<div>现在来解释第4段代码：</div>
<div id="1570-1588850598744" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> hello()
{
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> a = 99<span style="color: rgba(0, 0, 0, 1)">;
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {
    }
    console.log(a)
}
hello();</span></pre>
</div>
</div>
<div>第1遍扫描，hello函数和a函数都保存到当前作用域的符号表中了（这两个函数在不同的作用域）。第2遍扫描，执行var a = 99时，由于这是非执行级代码块，所以不存在作用域提升的问题。而且变量a用var声明，就说明这是hello函数的局部变量，而函数a已经在第1遍扫描中获得了，所以在执行到var a = 99时，js解析器已经知道了函数a的存在，由于变量a和函数a都在同一个作用域，所以可以覆盖。因此，这段代码也输出99。</div>
<div>&nbsp;</div>
<div>接下来看第2段和第3段代码：</div>
<div>&nbsp;</div>
<div>第2段代码</div>
<div id="6361-1588851012937" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> a = 99;          <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 抛出异常</span>
    <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {
    }
    console.log(a)
}</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>第3段代码</div>
<div id="7439-1588851262719" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
    a </span>= 99;         <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 正常执行</span>
    <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {
    }
    console.log(a)
}</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>这两段代码的唯一区别是a是否使用了var定义。这就要根据执行级代码块的规则了。</div>
<div>&nbsp;</div>
<div>1. 定义变量使用var。如果发现块内有同名函数或类定义，会抛出重定义异常</div>
<div>2. 未使用var定义变量。遇到同名函数，函数将被永久覆盖，如果遇到同名类，会抛出如下异常：</div>
<div><img src="https://img2020.cnblogs.com/blog/32818/202005/32818-20200511103157897-1279263223.png" alt=""></div>
<div><img src="//note.youdao.com/src/14872D880A72479F9F23A87E10F37620" alt="" data-media-type="image"></div>
<div>&nbsp;</div>
<div>估计是JavaScript的规范比较乱，而且Class是后来加的，规则没定好，本来类和函数应该有同样的效果的，结果....，这就是js的代码容易让人发狂的原因。在Java、C#中是绝对不会有这种情况发生的。</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>好了，该分析的都分析了，现在就来具体分析下本文刚开始的代码吧。</div>
<div>&nbsp;</div>
<div>第1遍扫描：</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 10;    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 不处理</span>
<span style="color: rgba(0, 0, 0, 1)">{            
    a </span>= 99;    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 不处理</span>
    <span style="color: rgba(0, 0, 255, 1)">function</span> a() {   <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 提升作用域到顶层作用域</span>
<span style="color: rgba(0, 0, 0, 1)">    }

    a </span>= 30;      <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 不处理</span>
<span style="color: rgba(0, 0, 0, 1)">}
console.log(a);    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 不处理</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>到现在为止，第1遍扫描结束，得到的结果只是在顶级作用域中添加了一个函数a。</div>
<div>&nbsp;</div>
<div>第2遍扫描：</div>
<div id="5547-1588836006570" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 在第2遍扫描时，其实已经发现在第1遍扫描中存在一个顶层的函数a（作用域被提升的），所以这个变量a其实是覆盖了第1遍扫描时的a函数</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)"> 所以说，不是函数a覆盖了变量a，而是变量a覆盖了函数a。也就是说，当执行到这时，函数a已经被干掉了，以后再也没函数a什么事了</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> a = 10<span style="color: rgba(0, 0, 0, 1)">;   
{            
    a </span>= 99;    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 提升作用域，将a的值设为99，在这时还没有局部函数a呢！</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 在第2遍扫描时仍然处理，由于第1遍扫描，只扫描函数，所以是没有顶级变量a的，因此，会将函数a提升到顶级作用域</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 而第2遍扫描，由于存在顶级变量a，所以这个函数a会作为局部函数处理，这是执行级代码块的规则</span>
    <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a() {   
    }

    a </span>= 30;       <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 实际上替换的是局部函数a</span>
<span style="color: rgba(0, 0, 0, 1)">}
console.log(a);    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 第2遍执行这条语句，输出99</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>第2遍扫描结束，执行console.log(a)后会输出99。</div>
<div>&nbsp;</div>
<div>现在看另外一段代码：</div>
<div>&nbsp;</div>
<div>第1遍扫描：</div>
<div id="3047-1588834336076" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 10;                   <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 不处理</span>
<span style="color: rgba(0, 0, 0, 1)">{
    </span><span style="color: rgba(0, 0, 255, 1)">function</span> hello() {      <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 提升到顶级作用域      </span>
      a = 99;               <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 不处理</span>
      <span style="color: rgba(0, 0, 255, 1)">function</span> a() {      <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 添加到hello函数作用域的符号表中</span>
<span style="color: rgba(0, 0, 0, 1)">      }                              
      a </span>= 30;               <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 不处理   </span>
<span style="color: rgba(0, 0, 0, 1)">    }                        
    hello();               </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 不处理 </span>
<span style="color: rgba(0, 0, 0, 1)">}
console.log(a);            </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 不处理</span></pre>
</div>
</div>
<div>&nbsp;</div>
<div>第2遍扫描：</div>
<div id="3595-1588853029200" data-theme="default" data-language="javascript">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 10;                   <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">定义顶层变量a</span>
<span style="color: rgba(0, 0, 0, 1)">{
    </span><span style="color: rgba(0, 0, 255, 1)">function</span> hello() {      <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 提升到顶级作用域      </span>
      a = 99;               <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 如果是非执行级代码块，会优先考虑局部同名符号，如局部函数a，因此，这里实际上覆盖的是函数a，而不是全局变量10</span>
      <span style="color: rgba(0, 0, 255, 1)">function</span> a() {      <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 在非执行级代码块中，只在第1遍扫描中处理内嵌函数，第2遍扫描不处理，所以这是函数a已经被a=99覆盖了</span>
<span style="color: rgba(0, 0, 0, 1)">      }                              
      a </span>= 30;               <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 覆盖a = 99   在hello函数内部，a的最终值是30</span>
<span style="color: rgba(0, 0, 0, 1)">    }                        
    hello();               </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 执行</span>
<span style="color: rgba(0, 0, 0, 1)">}
console.log(a);            </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输出10</span></pre>
</div>
<p>好了，现在大家清楚为什么最开始给出的两段代码，一个修改了全局变量a，一个没修改全局变量a的原因了吧。就是可执行级代码块和非可执行级代码块在处理作用域提升问题上的差异造成的。其实这么多编程语言，只有JavaScript有这些问题，这也是js太灵活导致的，这就是要自由而付出的代价：让某些程序的执行结果难以琢磨！</p>
</div>
<div>&nbsp;</div>
<div>&nbsp;<img src="https://img2020.cnblogs.com/blog/32818/202005/32818-20200511103359117-969166580.gif" alt="" width="769" height="427"></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<p></p><br><br>
来源：https://www.cnblogs.com/nokiaguy/p/12867587.html
頁: [1]
查看完整版本: 把99%的程序员烤得外焦里嫩的JavaScript面试题