【CSDN学院出品】你不可不知的JS面试题（第三期）

灰太狼 2021-08-26 21:02 284阅读 0赞

## 1、什么是闭包？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]  
如图所示，**闭包就是一个定义在函数内部的函数，其作用是将函数内部和函数外部连接起来。**  
大家知道，作用域的问题，就是在函数内部定义的变量称为局部变量，外部取不到值。  
下面我们通过代码来更加详细地看一下：

function A() { 
           let x = 1;
           return function B() { 
               console.log(x);
               x++;
           }
       }
       console.log(A()); //直接打印返回的B
       let b = A();
       b(); //1
       b(); //2
       b(); //3

上述代码我们可以看到的是再次执行`A`函数的时候（其实这时候执行的是`B`），会打印出`1`，再次执行，会打印出`2`，再执行会打印出`3`。我们知道了闭包不仅可以拿到函数内部的变量，还可以保存内部的变量。

接下来，我们来看下闭包的使用场景，

for (var index = 0; index < 5; index++) { 
        setTimeout(function () { 
            console.log(index)
        });
    }

上面的代码段，我们会打印5个5，为啥呢？因为当我们执行for循环时，`setTimeout`是异步的，所以每次等for循环加完，再执行`setTimeout`函数，一共执行5次。另一个原因因为使用了`var`声明的。循环体里的`index`跟外部的`index`是存在于同一个作用域，相当于在全局定义了一次。

下面我们来使用`let`来声明一下。结果就不一样。分别打印`0、1、2、3、4`，

for (let index = 0; index < 5; index++) { 
            setTimeout(function () { 
                console.log(index)
            });
        }

最后，我们使用闭包也来实现一下，同样分别打印`0、1、2、3、4`，在外部函数每次传入实参时，也就是每次循环的值`index`，作用到形参`i`，因为`setTimeout`为内部函数，每次都会记录值，然后打印出来。

for (var index = 0; index < 5; index++) { 
            (function (i) { 
                setTimeout(function () { 
                    console.log(i)
                });
            })(index);
        }

另一个使用场景是`柯里化`。下面一个问题我们将详解。

## 2、什么是柯里化？ ##

是把接受多个参数的函数变换成接受一个单一参数（最初的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。  
![在这里插入图片描述][20200215184619472.png]

## 3、柯里化的好处？ ##

*  提高适用性
 *  延迟执行
 *  提前确认

**（1）、提高适用性**

我们之前使用函数都是这样写，很冗余。

function check(reg,text) { 
         return reg.test(text);
     }
     console.log(check(/\d+/g,'123456')) //true
     console.log(check(/\d+/g,'abcd')) // false
     console.log(check(/\d+/g,'r8r8r7')) // true

那么我们通过柯里化的形式简化一下。

function check(reg) { 
         return function (text) { 
            return reg.test(text);
         }
     }
     const checkNum=check(/\d+/g);
     
     console.log(checkNum('123456')) //true
     console.log(checkNum('abcd')) // false
     console.log(checkNum('r8r8r7')) // true

**（2）、延迟执行**  
在需要的时候再执行。

const getResult = add(1)(2)(3);
    // TODO
    getResult();

或者

const getResult =add.bind(null,1).bind(null,2).bind(null,3);
    // TODO
    getResult();

**（3）、提前确认**

之前执行一次，就不会每次都去判断了，下面举例：

--------------------

最后这里来实现下图所示：  
![在这里插入图片描述][20200216124843879.png]

> 本期结束，谢谢

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/6f7ca34692e24a8e80693b0033e50f5f.png
[20200215184619472.png]: /images/20210813/f776ebf158224c7ba1bdb3caebe2d948.png
[20200216124843879.png]: /images/20210813/db791c2a1a0f4e529c1f1a65e277a0e3.png