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는 캡슐화된 환경 내의 변수이며 외부에서 직접 액세스할 수 없습니다.

showMessage는 createAction 외부에서 실행되지만 실행 중에 내부적으로 정의된 로컬 변수 message에 액세스합니다(성공적으로 출력됨). 이는 showMessage(createAction 내부의 익명 함수)에서 참조하는 함수가 어휘 환경(createAction 내부) 참조()에 바인딩되어 있기 때문입니다. >메시지 등).

---

내부 구문 환경에 바인딩된 익명 함수는 클로저를 형성하는 createAction의 폐쇄된 환경 외부에서 사용되도록 return에 의해 가져옵니다. createAction 내에서 호출되면 클로저로 간주되지 않습니다.

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

"당신"이 클로저를 만들었다고 생각하지 마세요. 클로저는 언어 기능이기 때문에 당신은 단지 이 기능을 활용했을 뿐입니다

.

---

위 코드와 유사하게 해당 언어가 클로저를 지원하지 않는 경우 showMessage 실행 시 message 변수를 찾을 수 없습니다. 특히 예제를 찾고 싶은데, 아쉽게도 제가 아는 모든 고급 언어는 함수/메서드 내에서 함수를 정의할 수 있는 한 클로저를 지원하는 것 같습니다.

로컬 정의 함수 가져오기

앞서 return을 통해 로컬 정의 함수를 가져올 수 있다고 언급했는데 다른 방법이 있나요? 🎜🎜여기서 기능은 다른 상품(변수)과 다를 바 없이 "좋은" 것이 되었습니다. 변수를 제거하는 방법이 있는 한, 함수를 제거하는 방법도 있습니다. 예를 들어 "컨테이너" 개체를 사용하세요. 🎜rrreee🎜생각나는 것이 있나요? 🎜🎜모듈 및 클로저🎜🎜그런데 내보내기와 module.exports가 있습니다. CJS(CommonJS)에서 정의한 모듈에서는 exports.something을 통해 상품을 하나씩 가져오거나, module.exports = ...를 통해 패키지로 상품을 가져올 수 있습니다. >, 하지만 어쨌든 수출은 상품을 가져오는 것이지만 원래 정해진 수출일 수도 있고 자체 로 대체될 수도 있습니다. 내보내기code>. 🎜🎜ESM(ECMAScript 모듈)은 상품을 반출하는 또 다른 방법인 import 및 export 구문을 사용하며, return 상품을 운반하는 것은 유사하게, 유일한 차이점은 return은 하나만 가져올 수 있는 반면(포장되지 않은 경우) export는 여러 개를 가져올 수 있다는 것입니다. 🎜🎜CJS든 ESM이든 모듈은 캡슐화된 환경이고, 그 안에 정의된 것들은 꺼내지 않는 한 외부에서 접근할 수 없다는 점도 덧붙이고 싶습니다. 이는 웹 스크립트의 기본 글로벌 환경과 다르기 때문에 차이점에 주의하세요. 🎜🎜코드로 표현하면 아마도 모듈을 정의할 때 이렇게 생각했을 것입니다. 🎜rrreee🎜실행 환경에서 실제로 보면 다음과 같습니다(참고: 설명용). 🎜rrreee🎜여전히 동일한 기능인가요? 🎜🎜너무 멀리 나가면 다시 가져오세요. 질문에 대해 생각해 보십시오. 이론적으로 함수는 정적 코드 블록입니다. 외부 함수를 여러 번 호출하여 클로저 함수가 반환됩니까? 🎜🎜해 보세요: 🎜rrreee🎜놀랐다면 closure()를 다른 방법으로 정의하여 더 쉽게 이해할 수 있는지 확인하세요. 🎜rrreee🎜그래도 이해가 안 된다면 다음을 보세요. 이것은: 🎜rrreee 🎜이해할 수 있습니까: 함수가 새로운 함수를 정의할 때마다. 이 기능은 새로운 기능이며 이름은 중요하지 않습니다. Xiao Ming이라고 부를 수 있지만 다른 사람들도 Xiao Ming이라고 부를 수 있습니다. 🎜🎜요약하자면: 🎜🎜🎜클로저는 정의된 닫힌 환경에서 기능과 다양한 리소스(참조)로 구성됩니다. 다른 지역 환경, 정의된 다른 지역 변수, 전달된 다른 매개변수 등). 🎜🎜마감, 이번에 알아냈습니다! 🎜🎜🎜추천 튜토리얼: "🎜JS Tutorial🎜"🎜

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