堆栈的真实世界示例

堆栈（Stack）是一种数据结构，它的特点是先进后出（Last In First Out，LIFO），类似于一个弹夹或者书堆中取书的方式。堆栈应用广泛，下面介绍几个在真实世界中常见的应用。

网页浏览器的回退功能

网页浏览器使用堆栈来实现回退功能。当我们在浏览网页的时候，浏览器会把当前的网页URL推进一个堆栈中，当用户点击回退按钮时，浏览器就会从堆栈中弹出上一个网页URL并加载它。具体实现过程可以看下面的代码片段。

var pages = [];
function loadPage(url) {
    pages.push(url);
    // 加载网页的代码实现
}
function back() {
    var url = pages.pop();
    // 回退到上一个网页的代码实现
}

函数调用的上下文切换

在JavaScript中，每次函数调用都会创建一个新的执行上下文（Execution Context）。这些执行上下文按照调用的先后顺序被保存在一个堆栈中。当函数内部调用另外一个函数时，当前函数的执行上下文会被推入堆栈中，新函数的执行上下文成为当前执行上下文，等到新函数执行完毕后再从堆栈中弹出当前函数的执行上下文。这种执行上下文的切换方式称为栈帧（Stack Frame）。

function foo() {
    console.log('foo');
    bar();
    console.log('back to foo');
}
function bar() {
    console.log('bar');
}
foo();

以上代码执行时的调用堆栈如下图所示。

编辑器的撤销/重做功能

现代编辑器中的撤销/重做功能也依赖堆栈。每当用户在编辑器中进行一个操作，编辑器会将该操作记录在一个堆栈中。当用户点击撤销按钮时，编辑器会从堆栈中弹出上一个操作并撤销它。当用户点击重做按钮时，编辑器会从重做堆栈中弹出上一个操作并重做它。具体实现可参考下面的代码片段。

var undoStack = [];
var redoStack = [];
function executeOperation(operation) {
    undoStack.push(operation);
    // 执行操作的代码实现
}
function undo() {
    var operation = undoStack.pop();
    redoStack.push(operation);
    // 撤销操作的代码实现
}
function redo() {
    var operation = redoStack.pop();
    undoStack.push(operation);
    // 重做操作的代码实现
}

堆栈是一种非常有用的数据结构，它的应用不仅仅局限于上述几个例子。熟练掌握堆栈的使用可以提高编程效率，减少代码的出错率。