JavaScript闭包函数

Posted 2021-12-16 橘猫吃不胖～

javascript闭包函数

• 1 概述
• 2 词法作用域
• 3 闭包

1 概述

一个函数和对其周围状态（词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。

在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

2 词法作用域

请看这段代码：

function init() 
    var name = "Mozilla"; // name 是一个被 init 创建的局部变量
    function displayName()  // displayName() 是内部函数，一个闭包
        console.log(name); // 使用了父函数中声明的变量
    
    displayName();

init();

结果是：Mozilla

init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数，并且仅在 init() 函数体内可用。displayName() 没有自己的局部变量，然而，因为它可以访问到外部函数的变量，所以 displayName() 可以使用父函数 init() 中声明的变量 name 。

运行该代码后发现， displayName() 函数内的 console.log() 语句成功显示出了变量 name 的值（该变量在其父函数中声明）。这个词法作用域的例子描述了分析器如何在函数嵌套的情况下解析变量名。

**词法（lexical）**一词指的是，词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。嵌套函数可访问声明于它们外部作用域的变量。

3 闭包

function makeFunc() 
    var name = "Mozilla";// 定义局部变量 name
    function displayName() // 定义函数 displayName()
        console.log(name);
    
    return displayName;

var myFunc = makeFunc();
myFunc();

结果是：Mozilla

运行这段代码的效果和之前 init() 函数的示例完全一样。其中不同的地方在于内部函数 displayName() 在执行前，从外部函数返回。

这段程序的大致过程如下：

1、第8行代码中，makeFunc()表示调用这个函数，调用过程中又调用了displayName这个函数，displayName函数执行了console.log()语句，最后将displayName作为返回值返回。
2、因此第8行代码中makeFunc()将返回值displayName赋给了myFunc，所以可以看作myFunc就是displayName这个函数。
3、最后使用myFunc进行函数调用，输出了Mozilla。

在一些编程语言中，一个函数中的局部变量仅存在于此函数的执行期间。一旦 makeFunc() 执行完毕，你可能会认为 name 变量将不能再被访问。然而，因为代码仍按预期运行，所以在 JavaScript 中情况显然与此不同。

原因在于，JavaScript中的函数会形成了闭包。== 闭包是由函数以及声明该函数的词法环境组合而成的。==该环境包含了这个闭包创建时作用域内的任何局部变量。在本例子中，myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用。displayName 的实例维持了一个对它的词法环境（变量 name 存在于其中）的引用。因此，当 myFunc 被调用时，变量 name 仍然可用，其值 Mozilla 就被传递到console.log()中。