web前端面试一道面试题

Question

今天面试的时候一道面试题，大概是这样的，感觉自己很绕，希望大家帮我看下。谢谢。
问题是下面会输出3次1吗，如果不会，能修改使其实现吗？

function newFun(a){

        return function(a){

            console.log(a)

        }

    }

function fun(a) {

    console.log(a)

    newFun((a)=>{

        console.log(a)

    })

}

fun(1)

Answer 1

肯定不会输出3个1，首先箭头函数当参数并没有执行，其次箭头函数里执行后的a值也需要返回出来，不然是undefined，可以把这样来看a是从哪儿来的：function newFun(a){        console.log(`C: ${a}`);        return function(j){            console.log(`D: ${j}`);        }    }    function fun(a) {        console.log(`A: ${a}`);        newFun(((i)=>{            console.log(`B: ${i}`);            return i;        })(a))(a)    }    fun(1)

Answer 2

当然不会了，人肉单步一下就知道了，跳过声明，从fun(1)进入，请跟着序号走function newFun(a) {  // 2-1: 调用newFun，参数为刚刚的箭头函数    return function(a) {  // 3: 返回一个匿名函数，这个匿名函数接受并打印参数a        console.log(a);    }    // 4-0: 函数newFun结束}function fun(a) {  // 0-1: 调用fun，参数1    console.log(a);  // 1: 打印a，即参数1    newFun(a => {  // 2-0: 调用newFun，参数为一个箭头函数（注意这个函数是作为参数被声明的，此时这个函数还没有被调用）        console.log(a);    });    // 4-1: 函数newFun的调用已经结束，并且它返回了一个匿名函数，但这个匿名函数没有被一个变量接收    // 5-0: 函数fun的调用已经结束，该函数没有返回任何值}fun(1);  // 0-0: 调用fun，参数1// 5-1: 函数fun的调用已经结束，脚本结束可以看出从头到尾只打印了一次1，只有函数fun中的第一个console.log(a)会被执行，作为迷惑你的另外两个console.log(a)分别在两个作为参数和返回值的函数中，但没有被调用。要使得这两个console.log(a)被执行，只要调用其所属的函数即可function newFun(a) {  // 3-1: 调用newFun，参数为刚刚的箭头函数    return function(a) {  // 4: 返回一个匿名函数，这个匿名函数接受并打印参数a        console.log(a);    }    // 5-0: 函数newFun结束}function fun(a) {  // 0-1: 调用fun，参数1    console.log(a);  // 1: 打印a，即参数1    let brandNewFun = a => console.log(a);    brandNewFun(a);  // 2: 调用brandNewFun，参数为a，即1    newFun(brandNewFun)(a);  // 3-0: 调用newFun，参数为一个箭头函数brandNewFun（注意这个函数是作为参数的，此时这个函数没有被调用）    // 5-1: 函数newFun的调用已经结束，并且它返回了一个匿名函数，且我们立即调用了这个匿名函数，参数为a，即1，因此这里输出1    // 6-0: 函数fun的调用已经结束，该函数没有返回任何值}fun(1);  // 0-0: 调用fun，参数1// 6-1: 函数fun的调用已经结束，脚本结束