一道奇怪的JS面试题一

我会带着你远行 2022-11-27 07:09 174阅读 0赞

题目如下:

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

## 总结 ##

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

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

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

## 结论 ##

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

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

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

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

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

不知道很正常

知道了也不能说明什么.