html5 - 看《你不知道的javascript》，自己试验了一下书中一段代码，和书中讲解的不一样

问题描述

问 题

fun(); //报错TypeError
var a=true;
if(a){
    function fun() {
        console.log("1");
    }
}else{
    function fun() {
        console.log("2");
    }
}

按书中的说法，由于函数的提升，且不受条件判断控制，应该是输出2的。可是我运行却报错了。

然后我把条件控制去掉，像这样：

    fun();//2
    function fun() {
        console.log("1");
    }
    function fun() {
        console.log("2");
    }

果然，输出了2

然后，我把条件语句加上，在最后执行函数，像这样：

var a=true;
if(a){
    function fun() {
        console.log("1");
    }
}else{
    function fun() {
        console.log("2");
    }
}
fun();//1

输出1

谁能解释一下，第一个输出的原理？以及和书上的不一样，是因为浏览器升级了的缘故吗？

解决方案

我非常同意 @theWalker 的回答。

首先是不赞成这种写法，然后我分享一下在 Node5 下的试验

var a = true;

fun();  // 这里输出 3

if (a) {
    function fun() {
        console.log("1");
    }
} else {
    function fun() {
        console.log("2");
    }
}

fun();  // 这里输出 1

function fun() {
    console.log("3");
}

所以可以分析出，最下面的 .log(3) 那个函数是函数定义，上面两个是被当作函数表达式处理的。但是命名函数表达式的名称只能在函数表达式内部使用，所以这里如果是当作命名函数表达式的话，又不科学了。再做个试验，用括号强制把中间两个函数申明为函数表达式

var a = true;

fun();  // 这里输出 3

if (a) {
    (function fun() {
        console.log("1");
    });
} else {
    (function fun() {
        console.log("2");
    });
}

fun();  // 这里输出 3

function fun() {
    console.log("3");
}

符合对命名函数表达式的判断。

所以，目前只能是认为解释器把那句话解释成了 var fun = function fun() {....}

这篇关于html5 - 看《你不知道的javascript》，自己试验了一下书中一段代码，和书中讲解的不一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！