JS의 클로저 개념

클로저는 JavaScript에만 국한되지 않으며 대부분의 고급 언어에는 이 기능이 있습니다.

폐쇄란 무엇인가요?

A closure는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(동봉된) 함수의 조합입니다.

이 단락은 MDN의 클로저에 대한 정의이며 다음과 같이 이해됩니다. 주변 어휘 환경의 참조는 폐쇄를 형성합니다. 이 문장은 여전히 ​​이해하기 어려울 수 있습니다. 예를 살펴보세요.

function createAction() {
    var message = "封闭环境内的变量";
    
    return function() {
        console.log(message);
    }
}

const showMessage = createAction();
showMessage();    // output: 封闭环境内的变量

이 예는 일반적인 종결입니다. 주의할 몇 가지 사항이 있습니다.

1. showMessage는 createAction입니다. 는 실행 후 반환되는 showMessage 是 createAction 执行后从中返回出来的一个函数。
2. createAction 内部是一个封闭的词法环境，message 作为该封装环境内的变量，在外面是绝不可能直接访问。
3. showMessage 在 createAction 外部执行，但执行时却访问到其内部定义的局部变量 message（成功输出）。这是因为 showMessage 引用的函数（createAction 内部的匿名函数），在定义时，绑定了其所处词法环境（createAction 内部）中的引用（message 等）。
4. 绑定了内部语法环境的匿名函数被 return 带到了 createAction 封闭环境之外使用，这才能形成闭包。如果是在 createAction 内部调用，不算是闭包。

好了，我相信 1, 2, 4 都好理解，但是要理解最重要的第 3 点可能有点困难 —— 困难之处在于，这不是程序员能决定的，而是由语言特性决定的。所以不要认为是“你”创建了闭包，因为闭包是语言特性，你只是利用了这一特性。

如果语言不支持闭包，类似上面的代码，在执行 showMessage 时，就会找不到 message 变量。我特别想去找一个例子，但是很不幸，我所知道的高级语言，只要能在函数/方法内定义函数的，似乎都支持闭包。

把局部定义的函数“带”出去

前面我们提到了可以通过 return 把局部定义的函数带出去，除此之外有没有别的办法？

函数在这里已经成为“货”，和其他货（变量）没有区别。只要有办法把变量带出去，那就有办法把函数带出去。比如，使用一个“容器”对象：

function encase(aCase) {
    const dog = "狗狗";
    const cat = "猫猫";
    aCase.show = function () {
        console.log(dog, cat);
    };
}

const myCase = {};
encase(myCase);
myCase.show();      // output: 猫猫 狗狗

是不是受到了启发，有没有联想到什么？

模块和闭包

对了，就是 exports 和 module.exports。在 CJS (CommonJS) 定义的模块中，就可以通过 exports.something 逐一带货，也可以通过 module.exports = ... 打包带货，但不管怎么样，exports 就是带货的那一个，只是它有可能是原来安排的 exports 也可能是被换成了自己人的 exports。

ESM (ECMAScript Module) 中使用了 import 和 export 语法，也只不过是换种方法带货出去而已，和 return 带货差不多，区别只在于 return 只能带一个（除非打包），export 可以带一堆。

还要补充的是，不管是 CJS 还是 ESM，模块都是一个封装环境，其中定义的东西只要不带出去，外面是访问不到的。这和网页脚本默认的全局环境不同，要注意区别。

如果用代码来表示，大概是定义模块的时候以为是这样：

const var1 = "我是一个顶层变量吧";
function maybeATopFunction() { }

结果在运行环境中，它其实是这样的（注意：仅示意）：

// module factory
function createModule_18abk2(exports, module) {
    const var1 = "我是一个顶层变量吧";
    function maybeATopFunction() { }
}

// ... 遥远的生产线上，有这样的示意代码
const module = { exports: {} };
const m18abk2 = createModule_18abk2(module) ?? module;

// 想明白 createModule_18abk2 为什么会有一个随机后缀没？

还是那个函数吗？

扯远了，拉回来。思考一个问题：理论上来说，函数是一个静态代码块，那么多次调用外层函数返回出来的闭包函数，是同一个吗？

试试：

function create() {
    function closure() { }
    return closure;
}

const a = create();
const b = create();

console.log(a === b);   // false

如果觉得意外，那把 closure() 换种方式定义看会不会好理解一点：

function create() {
    closure = function() { }
    return closure;
}

如果还不能理解，再看这个：

function create() {
    const a = function () { };
    const b = function () { };
    console.log(a === b);   // false
}

能理解了不：每一次 function함수

createAction은 내부적으로 폐쇄형 어휘 환경입니다. message는 캡슐화된 환경 내의 변수이며 외부에서 직접 액세스할 수 없습니다.

알겠습니다. 1, 2, 4는 모두 이해하기 쉽지만 가장 중요한 점을 이해하기는 조금 어려울 수 있습니다. 3 - 어려운 점은 이것이 프로그래머가 할 수 있는 일이 아니라는 것입니다. 언어 특성에 따라 결정됩니다. 그러니

.

로컬 정의 함수 가져오기

위 내용은 JS의 클로저 개념의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!