关于javascript:自测关于闭包的7道面试题

更多文章详见公众号【前端css和js干货】

每个JavaScript开发人员都必须晓得闭包是什么。在JavaScript编码面试中，闭包常常被问及。
本文整顿了一份对于JavaScript 闭包的 7 个乏味且难度递增的问题的清单。
拿一支铅笔和一张纸，试着在不看答案或运行代码的状况下答复问题。可能须要大概 30 分钟。

1.拜访内部作用域变量

思考以下函数clickHandler, immediate, 和delayedReload：

let countClicks = 0;

button.addEventListener('click', function clickHandler() {

    countClicks++;

});

const result = (function immediate(number) {

    const message = `number is: ${number}`;

    return message;

})(100);

setTimeout(function delayedReload() {

    location.reload();

}, 1000);

这 3 个函数中的哪一个拜访内部作用域变量？

<details>
<summary>▼点击查看答案</summary>

1. countClicks的countClicks从内部作用域拜访变量。
2. immediate 不拜访内部作用域的任何变量。
3. delayedReload location从全局作用域拜访全局变量。
   </details>

2.参数失落

以下代码会在控制台打印什么？

(function immediateA(a) {

    return (function immediateB(b) {

        console.log(a); // 会打印什么?

    })(1);

})(0);

<details>
<summary>▼点击查看答案</summary>
控制台会打印0。

函数immediateA应用参数0调用，因而参数a为0。
嵌套在immediateA 函数中的immediateB 函数是一个闭包，它从内部immediateA 作用域捕捉一个变量a。因而console.log(a) 打印0。
</details>

3.谁的谁

以下代码会在控制台打印什么？

let count = 0;

(function immediate() {

    if (count === 0) {

        let count = 1;

        console.log(count); // 打印什么?

    }

    console.log(count); // 打印什么?

})();

<details>
<summary>▼点击查看答案</summary>
控制台会打印1和0。

第一条语句 let count = 0 申明了一个变量 count。
immediate() 是一个从内部作用域捕捉count变量的闭包。 在immediate() 函数外部作用域count变量为0。

然而，在if语句中，另一个 let count = 1 申明了一个局部变量 count，它笼罩了作用域外的 count。 所以第一个 console.log(count) 记录 1。

第二个 console.log(count) 打印 0，因为这里的 count 变量是从内部作用域拜访的。
</details>

4.辣手的闭包

以下代码会在控制台打印什么？

for (var i = 0; i < 3; i++) {
    setTimeout(function log() {

    console.log(i); // 会打印什么?

    }, 1000);
}

<details>
<summary>▼点击查看答案</summary>
3, 3,3 会被打印到控制台。

代码片段分 2 个阶段执行。

阶段1

for() 迭代 3 次。 在每次迭代期间，都会创立一个新函数 log()，该函数捕捉变量 i。 setTimout() 安顿 log() 在 1000 毫秒后执行。
当 for() 循环实现时，i 变量的值为 3。
阶段2

第二阶段产生在 1000 毫秒后：

setTimeout() 执行队列中的 log() 函数。 log() 读取变量 i 的以后值，即 3，并打印到控制台 3。
这就是为什么 3, 3, 3 被打印到控制台的起因。

附带挑战：如何修复此示例以在通过 1 秒后打印 0、1、2 值？
</details>

5.正确或谬误的message

以下代码会在控制台打印什么？

function createIncrement() {

    let count = 0;

    function increment() {

        count++;

    }

    let message = `Count is ${count}`;

    function log() {

        console.log(message);

    }

    return [increment, log];

}

const [increment, log] = createIncrement();

increment();

increment();

increment();

log(); // 会打印什么?

<details>
<summary>▼点击查看答案</summary>
‘Count is 0’ 被打印到控制台。
increment() 函数已被调用 3 次，将 count 减少到值 3。

createIncrement()函数的作用域内的message变量。它的初始值是“’Count is 0’”。 然而，即便count变量曾经减少了几次，message变量也始终保持“’Count is 0’”。

log() 函数是一个从 createIncrement() 范畴捕捉message变量的闭包。 console.log(message) 将“Count is 0”打印到控制台。

</details>

附带挑战：如何修复 log() 函数以返回具备理论Count的message变量值？

6.复原封装

function createStack() {

    return {

        items: [],

        push(item) {

            this.items.push(item);

        },

        pop() {

            return this.items.pop();

        }

    };

}

const stack = createStack();

stack.push(10);

stack.push(5);

stack.pop(); // => 5

stack.items; // => [10]

stack.items = [10, 100, 1000]; // 毁坏了封装!

堆栈按预期工作，但有一个小问题。任何人都能够间接批改 items 数组，因为stack.items属性是公开的。

这是一个问题，因为它毁坏了堆栈的封装：应该只有push()和pop()办法是公共的，stack.items或者任何其余细节都不应该被内部拜访。

应用闭包重构下面的堆栈实现，这样就无奈在函数createStack()作用域之外拜访数组items ：

function createStack() {

// Write your code here...

}

const stack = createStack();

stack.push(10);

stack.push(5);

stack.pop(); // => 5

stack.items; // => undefined

<details>
<summary>▼点击查看答案</summary>

这是一个重构的createStack()：

function createStack() {
  const items = [];
  return {
    push(item) {
      items.push(item);
    },
    pop() {
      return items.pop();
    }
  };
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => undefined

items已移至返回的对象之外。

因为此更改，从createStack()作用域内部无法访问或批改items数组。items当初是公有变量，堆栈被封装：只有push()和pop()办法是公共的。

push()和pop()办法，作为闭包，从createStack()函数作用域捕捉变量items。

</details>

7.智能乘法

编写一个multiply()将 2 个数字相乘的函数：

function multiply(num1, num2) {

// Write your code here...

}

如果multiply(num1, numb2)用 2 个参数调用，它应该返回 2 个参数的乘积。
然而如果用 1 个参数调用，该函数应该返回另一个函数const anotherFunc = multiply(num1)。调用时返回的函数anotherFunc(num2)执行乘法num1 * num2。

multiply(4, 5); // => 20

multiply(3, 3); // => 9

const double = multiply(2);

double(5); // => 10

double(11); // => 22

<details>
<summary>▼点击查看答案</summary>

function multiply(number1, number2) {

    if (number2 !== undefined) {

        return number1 * number2;

    }

    return function doMultiply(number2) {

        return number1 * number2;

    };

}

multiply(4, 5); // => 20

multiply(3, 3); // => 9

const double = multiply(2);

double(5); // => 10

double(11); // => 22

如果number2参数不是undefined，则函数简略地返回number1 * number2。

但如果number2是undefined，则示意该multiply()函数被一个参数的形式调用。在这种状况下，咱们返回一个函数doMultiply()，稍后调用时执行理论的乘法。

doMultiply()是一个闭包，因为它从multiply()作用域中捕捉变量number1。
</details>

总结

将您的答案与帖子中的答案进行比拟：

• 如果您正确答复了 5 个或更多问题，您就对闭包有很好的了解
• 然而，如果您正确答复的问题少于 5 个问题，则须要好好温习一下闭包。

作者：Dmitri Pavlutin 译者：前端css和js干货 起源：dmitripavlutin