Javascript高级-内存图 2 之 Call Stack

✊不积跬步，无以至千里；不积小流，无以成江海。

函数与函数调用的区别

函数（Function）是一段可重复使用的代码块，用于执行特定的任务或操作。它可以接收输入参数（可选），执行特定的逻辑操作，并返回结果（可选）。函数定义了一种行为或功能，但不会被直接执行。

函数调用（Function Invocation）是指在程序中使用函数名称和括号（参数列表）来执行函数定义中的代码。函数调用会触发函数的执行，并传递相应的参数（如果有的话）。函数调用的目的是执行函数体内的逻辑并获取结果。

区别如下：

1. 定义和执行：函数是通过函数定义来定义的，它描述 了函数的行为和功能，但不会直接执行。函数调用是在需要执行函数体内的逻辑时使用函数名称和括号来触发函数的执行。
2. 声明和调用：函数定义时被声明 ，它会指定函数的名称、参数列表和函数体。函数调用则使用函数名称和括号来调用已经定义的函数，以触发函数的执行。
3. 参数传递：函数可以接受 输入参数，这些参数是在函数定义时声明的，并在函数调用时传递给函数。函数调用时，传递的参数值会被传递到函数的形式参数中，以供函数内部使用。
4. 返回结果：函数可以返回 一个结果，该结果是函数执行后产生的值。函数调用可以使用返回值来获取函数执行的结果，并在程序中进行后续操作。

总结来说，函数是一段定义了特定行为或功能的代码块，而函数调用是通过函数名称和括号来触发函数的执行，并传递相应的参数。函数的定义描述了函数的行为，而函数的调用实际执行了函数体内的逻辑操作，并返回结果（如果有的话）。

举例

当我们定义一个函数时，我们会声明函数的名称、参数列表和函数体，但不会立即执行函数内部的代码。函数调用是在需要执行函数内部代码时，使用函数名称和括号来触发函数的执行，并传递相应的参数。下面是一个示例来说明函数与函数调用的区别：

# 函数定义
def greet(name):
    print("Hello, " + name + "!")

# 函数调用
greet("Alice")

在上述代码中，我们定义了一个名为 greet 的函数，它接受一个参数 name，并在函数体内打印出相应的问候语。然后，我们通过函数调用 greet("Alice") 来触发函数的执行，并将参数 "Alice" 传递给函数。当程序执行到函数调用时，会跳转到函数定义的位置，执行函数体内的代码，打印出 "Hello, Alice!"。

函数定义是在程序中声明函数的行为和功能，它描述了函数应该如何执行。而函数调用是在特定的位置和时机使用函数名称和括号来触发函数的执行，以实际执行函数体内的代码。

另一个例子是 JavaScript 的函数定义和调用：

// 函数定义
function add(a, b) {
  return a + b;
}

// 函数调用
var result = add(3, 4);
console.log(result);

在这个例子中，我们定义了一个名为 add 的函数，它接受两个参数 a 和 b，并返回它们的和。然后，我们通过函数调用 add(3, 4) 来触发函数的执行，并将参数 3 和 4 传递给函数。函数执行后，返回结果 7，并将其赋值给变量 result。最后，我们使用 console.log 打印出结果。

Call Stack 是什么

Call Stack（调用栈）是一种用于跟踪函数调用的数据结构 。它是计算机内存中的一块区域，用于存储函数调用的信息。每当一个函数被调用时，相关的信息会被添加到调用栈的顶部 ，当函数执行完毕后，对应的信息会从调用栈中移除。

调用栈的工作原理如下：

1. 当程序开始执行时，调用栈是空的。
2. 当调用一个函数时，会将函数的信息（包括函数名、参数和返回地址）压入调用栈的顶部。
3. 如果函数内部调用了其他函数，那么被调用的函数的信息也会被压入调用栈的顶部。
4. 当一个函数执行完成后，它的信息会从调用栈中弹出，程序回到上一个函数的执行点继续执行。
5. 当所有的函数执行完成后，调用栈会变为空。

调用栈的作用是追踪函数调用的顺序和状态。它可以帮助程序在函数之间正确地传递控制流和数据，并确保函数的执行顺序符合预期。如果调用栈过大或出现错误，可能会导致栈溢出或其他运行时错误。

以下是一个简单的 JavaScript 示例来说明调用栈的概念：

function foo() {
  console.log("foo");
  bar();
}

function bar() {
  console.log("bar");
}

function baz() {
  console.log("baz");
}

foo();
baz();

在上述代码中，我们定义了三个函数 foo、bar 和 baz。foo 函数内部调用了 bar 函数，然后我们依次调用了 foo 和 baz 函数。

当程序执行时，调用栈的变化如下：

1. 初始状态：调用栈为空。
2. foo 函数调用：foo 函数信息被压入调用栈的顶部。
3. bar 函数调用：bar 函数信息被压入调用栈的顶部。
4. bar 函数执行完毕：bar 函数信息从调用栈中弹出。
5. foo 函数执行完毕：foo 函数信息从调用栈中弹出。
6. baz 函数调用：baz 函数信息被压入调用栈的顶部。
7. baz 函数执行完毕：baz 函数信息从调用栈中弹出。

最终，调用栈为空。

如何让 Stack 溢出

栈溢出（Stack Overflow）是指当调用栈的空间超过其容量时发生的情况。这通常是由于无限递归函数或过多的函数调用导致的。下面是一些导致栈溢出的常见方式：

1. 无限递归：当一个函数无限递归地调用自身时，每次递归调用都会将函数的信息压入调用栈，导致调用栈空间耗尽。例如：

def recursive_function():
    recursive_function()

recursive_function()

2. 过多的函数调用：如果在短时间内大量地进行函数调用，调用栈可能会被迅速填满，导致栈溢出。例如：

def recursive_function(count):
    if count == 0:
        return
    recursive_function(count - 1)

recursive_function(1000000)

在这个例子中，函数 recursive_function 以很大的递归深度被调用，超过了默认的调用栈容量。

3. 大型数据结构的递归：如果在递归函数中使用大型数据结构，每次递归调用都会占用大量的栈空间，可能导致栈溢出。

栈溢出是一个常见的编程错误，通常会导致程序崩溃或异常终止。为了避免栈溢出，应该注意函数的递归深度，确保递归函数有终止条件，并尽量避免过多的函数调用。

作用域与闭包

作用域（Scope）和闭包（Closure）是 JavaScript 中重要的概念，它们涉及变量的可访问性和生命周期的管理。

作用域是指在程序中定义变量的区域，决定了变量在何处和何时可以被访问。作用域规定了变量的可见范围，可以防止变量冲突和访问冲突。在 JavaScript 中，有全局作用域和局部作用域（函数作用域和块级作用域）两种类型的作用域。

闭包是指函数可以访问并操作在其词法作用域之外 定义的变量的能力。当一个函数内部引用了外部的变量 ，并且该函数在外部被调用时，就形成了闭包。闭包使得函数可以"记住"其创建时的上下文环境，即使在函数外部，闭包仍然可以访问和修改其引用的变量。

下面是一个简单的 JavaScript 示例来说明作用域和闭包的概念：

function outer() {
  var outerVar = 'Hello';

  function inner() {
    var innerVar = 'World';
    console.log(outerVar + ' ' + innerVar);
  }

  return inner;
}

var closureFunc = outer();
closureFunc();  // 输出：Hello World

在示例中，outer 函数内部定义了变量 outerVar，然后在其内部定义了函数 inner，而 inner 函数引用了外部的 outerVar 变量。当 outer 函数执行完毕并返回 inner 函数时，实际上 inner 函数仍然持有对 outer 函数的词法环境的引用。这是因为 JavaScript 引擎意识到 inner 函数仍然需要访问 outerVar 变量，所以在内存中保留了对该词法环境的引用，即形成了一个闭包。

闭包的存在使得 inner 函数在被外部调用时，仍然可以访问和使用其词法环境中的变量，包括 outerVar 变量。

闭包的使用可以实现一些特殊的功能，例如封装私有变量、创建函数工厂、实现模块化等。但需要注意闭包可能导致变量的长期驻留在内存中，增加内存消耗，因此在使用闭包时应注意内存管理和性能优化。

当涉及作用域和闭包时，以下是一些更深入的概念和相关信息：

1. 词法作用域（Lexical Scope）：JavaScript 使用词法作用域，也称为静态作用域。词法作用域是指变量的作用域由代码中的位置决定，而不是由运行时的上下文决定。在词法作用域中，函数的作用域在函数定义时就确定了，而不是在函数调用时。

2. 块级作用域（Block Scope）：除了函数作用域外，ES6 引入了块级作用域的概念，通过 let 和 const 关键字可以创建块级作用域。块级作用域是指变量的作用域限定在块内部（通常由花括号 {} 包围），在块外部无法访问。

3. 作用域链（Scope Chain）：作用域链是指在 JavaScript 中，每个执行上下文都有一个包含其父级执行上下文的链式结构。当访问一个变量时，JavaScript 引擎会按照作用域链从内到外查找变量的值，直到找到对应的变量或者到达全局作用域。

4. 闭包的特性：闭包具有以下特性：

   • 闭包可以访问和修改其所在的词法作用域中的变量。
   • 闭包可以持有对外部变量的引用，即使外部函数执行完毕，闭包仍然可以访问这些变量。
   • 每次创建闭包时，会创建一个新的词法环境和作用域链，因此闭包可以保留不同的变量状态。

5. 内存管理和性能注意事项：闭包的使用需要注意内存管理和性能优化。闭包中持有对外部变量的引用可能导致这些变量无法被垃圾回收，增加内存消耗。在使用闭包时，应注意避免循环引用和过度使用闭包，及时释放不再需要的引用。

6. 模块化和命名空间：闭包可以用于实现模块化和命名空间的概念。通过创建闭包，可以封装私有变量和函数，避免命名冲突，并提供公共接口供外部访问。

7. IIFE（立即调用函数表达式）：IIFE 是一种常见的使用闭包的模式。它是在定义函数后立即调用该函数，形成一个独立的词法作用域，可以用于创建私有变量和模块化代码。

闭包在 JavaScript 中具有重要的好处和作用，以下是一些关键的好处：

1. 封装数据和行为：闭包提供了一种封装数据和行为的机制。通过创建闭包，可以将变量和函数组合在一起，形成一个独立的作用域，并将其暴露给外部使用。这样可以隐藏内部实现细节，只暴露必要的接口，实现数据的私有化和封装。
2. 保护变量：闭包可以用于保护变量，防止其被外部访问和修改。通过在闭包内部定义变量，外部无法直接访问和修改这些变量，只能通过闭包提供的公共接口进行操作。这种机制可以防止变量被意外篡改，增加代码的安全性。
3. 记忆状态：闭包可以记忆其词法环境中的状态。当一个函数返回一个闭包时，闭包会持有对词法环境的引用，使得函数在其他上下文中继续访问和使用词法环境中的变量。这使得闭包可以保存状态，实现记忆功能，例如在事件处理程序中记住之前的状态或者在迭代中保留局部变量的状态。
4. 实现模块化和命名空间：闭包可以用于创建模块化的代码和命名空间。通过创建闭包，可以封装私有变量和函数，并将公共接口暴露给外部使用。这样可以避免命名冲突，提高代码的可维护性和复用性。
5. 高阶函数和函数式编程：闭包在高阶函数和函数式编程中扮演重要角色。高阶函数接受函数作为参数或者返回函数作为结果，闭包可以用于捕获和延迟执行函数，实现柯里化、函数组合和函数生成等功能。这样可以编写更具表现力和灵活性的函数式代码。