一篇常做错的经典JS闭包面试题

布满荆棘的人生 2021-07-24 11:08 387阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]  
作者 | Jeskson

来源 | 达达前端小酒馆

> 1

究竟是怎么样的一道面试题，能让我拿出来说说呢？下面请看代码：

![在这里插入图片描述][20191222195911487.png]  
![在这里插入图片描述][20191222195917528.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20191222195953509.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 4]

undefined
    VM1036:2 0
    VM1036:2 0
    VM1036:2 0
    
    VM1036:2 undefined
    VM1036:2 0
    VM1036:2 1
    VM1036:2 2
    
    VM1036:2 undefined
    VM1036:2 0
    VM1036:2 1
    VM1036:2 1
    {fun: ƒ}

//答案：
    //undefined,0,0,0
    //undefined,0,1,2
    //undefined,0,1,1

JS函数分两种：具名函数（命名函数）和匿名函数。

## 如何判断两种函数的方法呢？ ##

可以用fn.name来判断，如果有name就是具名函数，如果没有name就是匿名函数。

需要注意的是在IE浏览器上无法获取具名函数的name，会返回undefined的结果，而在谷歌浏览器上就可以获取。

// 获取名称
    function getFunctionName(fun){
     if(fun.name !== undefined)
      return fun.name;
      var funName = fun.toString();
      funName = funName.substr('function '.length);
      funName = funName.substr(0, funName.indexOf('('));
      return funName;
    }

> 2

## 函数创建的方法有哪些？ ##

**第一种是：声明函数，声明函数方法，包括函数名和函数体。**

function funDa() {}

**第二种是：创建匿名函数的表达式。**

创建一个变量，这个变量的内容是一个函数，为匿名函数

var funDa = function() {}

这样这个函数就没有了`name`

var funDa = function(){}
    getFunctionName(funDa).length;
    // 0

第三种是：创建具名函数表达式。

var funDa = function dada(){};

创建一个变量，变量赋值的内容为一个带有名称的函数。具名函数表达式的函数名只能在创建函数内部使用，函数的外层只能使用funData，dada函数名只能在创建函数内部使用。

![在这里插入图片描述][20191222200535690.png]

![在这里插入图片描述][20191222200548936.png]  
在对象内定义函数，也是属于函数表达式。

第四种是：Function构造函数

![在这里插入图片描述][20191222200619332.png]

Function("alert(1)");
    ƒ anonymous() {
    alert(1)
    }
    
    Function("dada");
    ƒ anonymous() {
    dada
    }
    
    new Function("alert(1)");
    ƒ anonymous() {
    alert(1)
    }
    
    new Function("dada");
    ƒ anonymous() {
    dada
    }

Function构造函数传一个函数字符串，返回包含这个字符串命令的函数。

第五种是：自执行函数

![在这里插入图片描述][20191222200646944.png]  
![在这里插入图片描述][20191222200659366.png]  
![在这里插入图片描述][20191222200705435.png]

( function(){
        alert(1);
    })();
    undefined
    
    ( function(){
        alert(1);
    })
    ƒ (){
        alert(1);
    }

![在这里插入图片描述][20191222200744195.png]

(function da1(){
        alert(1);
    })();

自执行函数也是“函数表达式”。

**第六种是：其他**

运用eval，setTimeout，setInterval等方法。

> 3

![在这里插入图片描述][20191222200925704.png]

第一个fun函数是属于标准的具名函数声明，是新创建的函数，返回的是一个对象字面量表达式，属性一个新的Object。

这返回，对象内部包含一个fun的属性，属于匿名函数表达式，这个fun属性存放的是一个新创建匿名函数表达式，所有声明的匿名函数都是一个新函数。则第一个fun函数和第二个fun函数不同，都是新创建的函数。

> 4

函数作用域链的问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 5]  
对象内部的函数表达式：

非对象内部的函数表达式：

![在这里插入图片描述][20191222201247873.png]

var da = function () {
        console.log(da);
    };
    da();
    VM2270:2 ƒ () {
        console.log(da);
    }
    undefined

使用var可以访问到存放当前函数的变量，var da，da()访问函数的变量，在对象内部不能访问到。

> 5

**函数作用域链：**

var d = fun(0); 
    d.fun(1); 
    d.fun(2);
    d.fun(3);

undefined
    VM2273:2 0
    VM2273:2 0
    VM2273:2 0

第一个fun(0)在调用第一层fun函数，第二个fun(1)是在调用前一个fun的返回值的fun函数。即就是fun(1)，fun(2)，fun(3)函数独使在调用第二层fun函数，第一次调用fun(0)时，b为undefined，第二次调用fun(1)，c为1，a为0。

var d = fun(0);调用的是第一层

而d.fun->fun(0).fun调用第二层

fun:function(1)，return fun(1,a)，fun(1,0)，此时fun闭包了外层函数的a，也就是第一次调用的a=0。这样子第一层fun函数为fun(1,0)，所以为0。

第一次：

function fun(0,undefined) {
        console.log(undefined)
        return {
            fun: function(c) {
                return fun(c,0);
            }
        };
    }

fun(0)，b为undefined，fun(0).fun(1)，c=1，此时fun闭包外层函数的a，也就是第一次调用的a=0,即c=1，a=0，并在内部调用第一层fun函数fun(1,0)，所以b=0。

function fun(a,b) {
        console.log(b)
        return {
            fun: function(1) {
                return fun(1,0);
            }
        };
    }

第三次调用fun(2)时，c为2，还是调用d.fun，还是闭包了第一次调用时的a，fun(2,0)所以输出b为0。

> 6

var d1 = fun(0).fun(1).fun(2).fun(3);

![在这里插入图片描述][20191222201830165.png]

从fun(0)调用第一层fun函数，返回值为一个对象，第二个fun(1)调用的是第二层fun函数，后面的也是第二层fun函数。

第一层fun(0)，b为undefined，第二层.fun(1)时c为1，c=1，a=0，内部调用第一层fun函数fun(1,0)，所以b为0。

调用你.fun(2)时，c为2，此时当前的fun函数不是第一次执行的返回对象，而是第二次执行的返回对象，第二次执行第一层fun函数是：

fun(1,0)，a=1,b=0。第三次执行fun函数，c=2,a=1

第四次调用.fun(3)为c为3

// a=2
    function fun(a,b) {
        console.log(b)
        return {
            fun: function(3) {
                return fun(3,2);
            }
        };
    }

> 7

var d2 = fun(0).fun(1);
    d2.fun(2);
    d2.fun(3);

![在这里插入图片描述][2019122220194962.png]  
var d2=fun(0).fun(1);  
// undefined, 0  
此时的return(c=1,a=0)，return fun(1,0)，所以b为0

d2.fun(2);  
第三次调用.fun(2)，c为2

// c为2，a=1,b=0
    function fun(a,b) {
        console.log(b)
        return {
            fun: function(2) {
                return fun(2,a);
            }
        };
    }
    
    所以return fun(2,1)
    function fun(a=2,b=1),所以为 1

d2.fun(3)，c为3，还是调用的第二次的返回值，最终调用第一层的  
fun(a,b)

// c为3，a=1,b=0
    function fun(a,b) {
        console.log(b)
        return {
            fun: function(3) {
                return fun(3,a);
            }
        };
    }
    
    所以return fun(3,1)
    function fun(a=3,b=1),所以为 1

注意这里的：

// c为3，a=1,b=0
    这是调用这个代码的结果
    
    a=1,b=0

var d2 = fun(0).fun(1);

好了，这样就知道大概的答案和讲解了：

> 8

总的来说，你明白了！讲的好辛苦，给个赞哦！求奖励，我来了

![在这里插入图片描述][20191222202247532.png]

一名喜爱编程技术与专注于前端的程序员，将web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享web前端相关的技术文章、工具资源，精选课程、热点资讯。

**推荐阅读**

1、你知道多少this，new，bind，call，apply？那我告诉你

2、为什么学习JavaScript设计模式，因为它是核心

3、一篇文章把你带入到JavaScript中的闭包与高级函数

4、大厂HR面试ES6中的深入浅出面试题知识点

感谢阅读，原创不易，喜欢就点个\[在看\] or \[转发朋友圈\]，这是我写作最大的动力。

意见反馈

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

这是一个有质量，有态度的公众号  
![在这里插入图片描述][20191222202829444.png]  
点关注，有好运

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]: /images/20210724/92e3bb87d0ac492eaa2b25af1cba5472.png
[20191222195911487.png]: /images/20210724/48ab0393eb1a4d2d84c9537c49f72f2e.png
[20191222195917528.png]: /images/20210724/7076b8d1b656474ebcdb3947abe4d749.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]: /images/20210724/992d1766429242348ee8526e5f241ea8.png
[20191222195953509.png]: /images/20210724/666ec323e96b421a81bc6527932311bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 2]: /images/20210724/39a8e01617c5482c851ba4b1724892da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 3]: /images/20210724/d7353c38dd42411d8f406becd2c46abd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 4]: /images/20210724/90b8bbbf42d1406aa8a53f66ef4acf68.png
[20191222200535690.png]: /images/20210724/0d328b5dba4b4494a8b84d314eb23360.png
[20191222200548936.png]: /images/20210724/800f4c7ba3174d068bbf12a4edeb028e.png
[20191222200619332.png]: /images/20210724/4008f1dabdd7425b93f7f47f2ebd6a53.png
[20191222200646944.png]: /images/20210724/ce3d61cbc5fd42d98ba13ec37db18a89.png
[20191222200659366.png]: /images/20210724/b03b132f8c4c4f9288a244b0b2ead10e.png
[20191222200705435.png]: /images/20210724/867bc3966f5641e291eceb6f201b3b91.png
[20191222200744195.png]: /images/20210724/fc423dfc93304fefa247eadb9aff30b8.png
[20191222200925704.png]: /images/20210724/5aabaa2682284327a2517e0580588b47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 5]: /images/20210724/76418102b0cb4ec489ea312ca44da26b.png
[20191222201247873.png]: /images/20210724/6d71cd60b56d4a99a7eeefce34360fae.png
[20191222201830165.png]: /images/20210724/1cb79be16489465d9a361fce7f372d64.png
[2019122220194962.png]: /images/20210724/d2b828d88e234a689b6cb63423f5ff60.png
[20191222202247532.png]: /images/20210724/d42d572ce19a4336a368b7a33d67b64b.png
[20191222202829444.png]: /images/20210724/8f7f188dfa7a4ff69d16ee8bf3d4bff7.png