一道奇怪的JS面试题(一)

题目如下:

    var a = 0; 
    if (true) {
       a = 1; 
       function a() {
          return '123'
       }
       a = 21; 
       console.log(a); 
    } 
    console.log(a);

按照正常思路, 我们应该考虑变量提升.

即是说, 代码等价于如下效果

   function a() {
      return '123'
   } 
   var a = 0; 
   if (true) { 
      a = 1; 
      a = 21; 
      console.log(a); //21 
   } 
   console.log(a); //21

但话说回来, 把函数声明写在判断语句中, 如果{ } 被看做代码块的话

那么函数的声明应在代码块内做提升.

即是说, 代码等价于如下效果

    var a = 0; 
    if (true) {
       function a() {
         return '123'
       }
       a = 1; 
       a = 21; 
       console.log(a); //21 
    } 
    console.log(a); //0

然而实际的结果却不是这样的

先来看看IE的结果

 21
 21 
 //以上打印结果为IE浏览器 10版本

但是到了IE11 和 最新的 edge浏览器就变了

 21 
 function a() {return '123'} 
 //以上打印结果为IE浏览器 11版本 和 edge浏览器

显然IE11认为, 函数声明为全局, 并且, 函数也没有进行提升, 而是当成了表达式

因此, 代码等价于

 

  var a = 0;
  if (true) { 
    let a1 = 1; 
    window.a = function() {
      return '123'
      } 
    a1 = 21; 
    console.log(a1); //21 
  } 
  console.log(a); // fn...

我们再测试谷歌和火狐浏览器：

   21 
   1 
   //以上打印结果为chrome浏览器 76.0.3809.87版本

谷歌浏览器跟火狐一致认为, 直到出现了函数声明, 变量a才出现了局部作用

函数依然被当成了表达式, 而不是一个声明

即是说, 代码等价于如下

 

   var a = 0; 
   if (true) {
     a = 1;
     let a1 = function() {
        return '123'
     } 
     a1 = 21; 
     console.log(a1); //21 
   } 
   console.log(a); // 1

 

总结

当函数被声明在判断语句内部时,

所有浏览器都将 函数声明 当成了表达式(赋值声明)

并且, 对于是否为全局声明, 也有分歧.

结论

永远不要把函数定义在条件判断中

 

为什么要出这种奇怪的题目来考察别人呢

是心理的扭曲? 还是道德的沦丧? ^_^

 

其实吧, 作为一个正常的程序员

你或许从来不会把函数定义在判断语句中

 

不知道很正常

知道了也不能说明什么.

 

---

文章转载自知乎： 千锋HTML5学院
原文链接：一道奇怪的JS面试题(一)