面试题：JavaScript闭包与异步操作结合的误区剖析

Question

假设有一个函数`getData`返回一个Promise，该Promise在1秒后resolve并返回数据。以下代码`function outer() { let data; function inner() { getData().then(result => data = result); return data; } return inner; } const func = outer(); console.log(func());` 预期是获取到异步数据并返回，但实际并未如愿。请指出其中关于闭包的误区，并给出正确的实现方式。

Answer 1

闭包误区分析

1. 在上述代码中，inner函数形成了闭包，它可以访问outer函数作用域中的data变量。但是，getData是一个异步操作，then回调中的data = result语句是在return data执行之后才会被调用。所以当return data执行时，data仍然是undefined，因为异步操作还未完成。

正确实现方式

1. 使用async/await：

function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('异步数据');
        }, 1000);
    });
}

function outer() {
    async function inner() {
        const data = await getData();
        return data;
    }
    return inner;
}

const func = outer();
func().then(console.log);

2. 使用.then链式调用：

function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('异步数据');
        }, 1000);
    });
}

function outer() {
    function inner() {
        return getData();
    }
    return inner;
}

const func = outer();
func().then(console.log);

在这两种方式中，async/await方式更直观，它让异步代码看起来像同步代码；.then链式调用则是Promise的基本使用方式，通过返回Promise来确保异步操作完成后再处理数据。