面试题：JavaScript中闭包和箭头函数结合使用的场景

Question

请举例说明在实际开发中，JavaScript闭包和箭头函数是如何结合使用来解决特定问题的，并简要阐述这种结合方式的优势。

Answer 1

结合使用示例

假设有一个需求，需要创建一组按钮，每个按钮点击时显示其对应的索引值。

// 使用闭包和箭头函数
const createButtons = () => {
    const buttons = [];
    for (let i = 0; i < 5; i++) {
        buttons.push(
            document.createElement('button')
        );
        buttons[i].innerHTML = `Button ${i}`;
        buttons[i].addEventListener('click', (() => {
            const index = i;
            return () => {
                console.log(`You clicked button ${index}`);
            };
        })());
        document.body.appendChild(buttons[i]);
    }
};
createButtons();

在上述代码中，外层立即执行函数 (() => { ... })() 创建了闭包环境，捕获了 i 的值，而内层箭头函数 () => { console.log(...) } 作为事件处理函数。

优势

1. 简洁的语法：箭头函数语法简洁，相比传统函数表达式，代码量更少，使代码更易读。如 () => { console.log(...) } 比传统 function() { console.log(...) } 更简洁。
2. 词法作用域：箭头函数没有自己的 this，它的 this 继承自外层作用域，这在闭包中使用时，能更方便地访问外部作用域变量，不会出现 this 指向混乱的问题。
3. 减少变量污染：闭包结合箭头函数，可以将相关的逻辑和数据封装在一个独立的作用域内，避免变量在全局作用域的污染，增强代码的模块化和可维护性。