面试题：JavaScript 箭头函数在闭包场景下的应用及注意事项

Question

描述一个在闭包场景中使用 JavaScript 箭头函数的实际例子，并说明使用过程中可能遇到的问题及解决方法。

Answer 1

实际例子

假设我们要创建一个计数器函数，每次调用返回值都会自增。使用闭包和箭头函数可以这样实现：

const createCounter = () => {
    let count = 0;
    return () => {
        return count++;
    };
};

const counter = createCounter();
console.log(counter()); // 输出 0
console.log(counter()); // 输出 1

在这个例子中，createCounter函数返回一个箭头函数，这个箭头函数形成了闭包，它可以访问并修改createCounter函数内部的count变量。

可能遇到的问题及解决方法

1. this指向问题：箭头函数没有自己的this，它的this继承自外层作用域。如果在闭包中期望箭头函数有自己独立的this指向，会导致错误。
   • 例子：

   const obj = {
       name: 'example',
       getFunction: function() {
           return () => {
               console.log(this.name);
           };
       }
   };
   const func = obj.getFunction();
   func(); // 这里输出的是外层作用域的this指向的值，在严格模式下可能是undefined，非严格模式下可能是全局对象window或global
   

   • 解决方法：如果需要在闭包中使用独立的this指向，可以使用普通函数。

   const obj = {
       name: 'example',
       getFunction: function() {
           const self = this;
           return function() {
               console.log(self.name);
           };
       }
   };
   const func = obj.getFunction();
   func(); // 输出 'example'
   

2. 内存泄漏问题：如果闭包中的函数被长时间持有，可能导致闭包所依赖的变量无法被垃圾回收，造成内存泄漏。
   • 解决方法：在适当的时候，释放对闭包函数的引用，让垃圾回收机制能够回收相关内存。例如，将闭包函数赋值为null。

   let counterFunc = createCounter();
   // 使用counterFunc一段时间后
   counterFunc = null;