javascript - 在函数内部修改变量后，为什么变量未更改？ -异步代码引用

Question

给定以下示例，为什么在所有情况下均未定义outerScopeVar？

var outerScopeVar;

var img = document.createElement('img');
img.onload = function() {
    outerScopeVar = this.width;
};
img.src = 'lolcat.png';
alert(outerScopeVar);

var outerScopeVar;
setTimeout(function() {
    outerScopeVar = 'Hello Asynchronous World!';
}, 0);
alert(outerScopeVar);

// Example using some jQuery
var outerScopeVar;
$.post('loldog', function(response) {
    outerScopeVar = response;
});
alert(outerScopeVar);

// Node.js example
var outerScopeVar;
fs.readFile('./catdog.html', function(err, data) {
    outerScopeVar = data;
});
console.log(outerScopeVar);

// with promises
var outerScopeVar;
myPromise.then(function (response) {
    outerScopeVar = response;
});
console.log(outerScopeVar);

// geolocation API
var outerScopeVar;
navigator.geolocation.getCurrentPosition(function (pos) {
    outerScopeVar = pos;
});
console.log(outerScopeVar);

为什么在所有这些示例中都输出 undefined？我不需要解决方法，我想知道为什么会这样。




  注意：这是JavaScript异步性的典型问题。随时改进此问题，并添加更多简化的示例，社区可以识别。

Answer 1

一句话回答：异步性。

前言

在这里，至少在堆栈溢出中已经迭代了数千次此主题。因此，首先，我想指出一些非常有用的资源：


@Felix Kling's answer to "How do I return the response from an asynchronous call?"。请参阅他出色的答案，其中解释了同步和异步流以及“重组代码”部分。
@Benjamin Gruenbaum还付出了很多努力来解释同一线程中的异步性。
@Matt Esch's answer to "Get data from fs.readFile"还以一种简单的方式很好地解释了异步性。




眼前问题的答案

让我们首先跟踪常见行为。在所有示例中，outerScopeVar在函数内部被修改。该函数显然不会立即执行，而是被分配或作为参数传递。这就是我们所说的回调。

现在的问题是，何时调用该回调？

这要视情况而定。让我们尝试再次跟踪一些常见行为：


img.onload可能在以后（以及是否）成功加载图像的某个时候调用。
在延迟到期且setTimeout尚未取消超时之后，将来的某个时间可能会调用clearTimeout。注意：即使使用0作为延迟，所有浏览器都具有最小超时延迟上限（在HTML5规范中指定为4ms）。
jQuery $.post的回调可能在将来的某个时间（如果（如果）成功完成Ajax请求）被调用。
当文件已被成功读取或引发错误时，将来可能会调用Node.js的fs.readFile。


在所有情况下，我们都有一个可能在将来的某个时间运行的回调。这种“将来的某个时候”就是我们所说的异步流程。

异步执行从同步流中推出。也就是说，异步代码将永远不会在同步代码堆栈正在执行时执行。这就是JavaScript是单线程的意思。

更具体地说，当JS引擎空闲时-不执行（a）同步代码的堆栈-它将轮询可能触发异步回调的事件（例如过期的超时，收到的网络响应）并逐个执行它们。这被视为Event Loop。

也就是说，以手绘红色形状突出显示的异步代码只有在执行了它们各自代码块中的所有其余同步代码之后，才可以执行：



简而言之，回调函数是同步创建的，但异步执行。在知道异步函数已执行之前，您就不能依赖它的执行，以及如何执行？

真的很简单。应从该异步函数内部启动/调用依赖于异步函数执行的逻辑。例如，将alert和console.log移到回调函数中也将输出预期的结果，因为此时该结果可用。

实现自己的回调逻辑

通常，您需要根据异步函数的结果执行更多操作，或者根据调用异步函数的位置对结果执行不同的操作。让我们处理一个更复杂的示例：

var outerScopeVar;
helloCatAsync();
alert(outerScopeVar);

function helloCatAsync() {
    setTimeout(function() {
        outerScopeVar = 'Nya';
    }, Math.random() * 2000);
}

注意：我使用随机延迟的 setTimeout作为通用异步函数，同一示例适用于Ajax， readFile， onload和任何其他异步流。

该示例显然遭受与其他示例相同的问题，它不等待异步函数执行。

让我们解决实现自己的回调系统的问题。首先，我们摆脱了这个丑陋的 outerScopeVar，它在这种情况下完全没有用。然后，我们添加一个接受函数参数的参数，即回调。当异步操作完成时，我们调用此回调传递结果。实现（请按顺序阅读注释）：

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    alert(result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as argument from the helloCatAsync call
function helloCatAsync(callback) {
    // 3. Start async operation:
    setTimeout(function() {
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}

上面示例的代码片段：

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
console.log("1. function called...")
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    console.log("5. result is: ", result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as argument from the helloCatAsync call
function helloCatAsync(callback) {
    console.log("2. callback here is the function passed as argument above...")
    // 3. Start async operation:
    setTimeout(function() {
    console.log("3. start async operation...")
    console.log("4. finished async operation, calling the callback, passing the result...")
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}

在实际使用案例中，大多数情况下，DOM API和大多数库已经提供了回调功能（在本演示示例中为 helloCatAsync实现）。您只需要传递回调函数，并了解它将在同步流之外执行，并重新组织代码以适应该情况。

您还将注意到，由于异步特性，不可能将 return值从异步流返回到定义了回调的同步流，因为异步回调是在同步代码已经完成执行很长时间之后执行的。

代替从异步回调中 return取值，您将不得不利用回调模式，或者...承诺。

承诺

尽管有很多方法可以使 callback hell与香草JS保持一致，但诺言越来越流行，并且目前已在ES6中进行了标准化（请参见 Promise - MDN）。

承诺（又称期货）提供了一种更加线性，因此令人愉悦的异步代码读取方法，但解释其全部功能不在此问题的范围内。相反，我会将这些出色的资源留给感兴趣的人：


JavaScript Promises - HTML5 Rocks
You're Missing the Point of Promises - domenic.me




有关JavaScript异步性的更多阅读材料


The Art of Node - Callbacks通过香草JS示例和Node.js代码很好地解释了异步代码和回调。





  注意：我已将此答案标记为Community Wiki，因此具有至少100个信誉的任何人都可以对其进行编辑和改进！请随时改善此答案，或者也可以提交一个全新的答案。
  
  我想将这个问题变成一个规范的主题，以回答与Ajax无关的异步性问题（为此提供 How to return the response from an AJAX call?），因此，该主题需要您的帮助，以使其尽可能好和有用！