JS 클로저란 무엇입니까? js 클로저 이해하기(코드 포함)-JS 튜토리얼-php.cn

JS 클로저란 무엇입니까? js 클로저 이해하기(코드 포함)

不言

풀어 주다： 2021-04-14 10:59:09

원래의

44879명이 탐색했습니다.

js에서 클로저는 함수 변수를 함수 범위에 저장할 수 있다는 의미이므로 함수가 변수를 "감싸는" 정의에 따르면 변수를 포함하는 함수가 클로저인 것 같습니다.

JS 클로저란 무엇입니까? js 클로저 이해하기(코드 포함)

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

초기 정의

闭包(closure)，是指函数变量可以保存在函数作用域内，因此看起来是函数将变量“包裹”了起来。
//根据定义，包含变量的函数就是闭包
function foo() {
    var a = 0;
}
cosole.log(a) 
// Uncaught ReferenceError: a is not defined

로그인 후 복사

클로저의 "JavaScript 고급 프로그래밍" 정의

클로저는 다른 함수의 범위에 있는 변수에 액세스할 수 있는 권한이 있는 함수를 의미합니다

 //根据《JavaScript高级程序设计》，访问上层函数的作用域的内层函数就是闭包
function foo() {
    var a = 2;
    function bar() {
        console.log(a);
    }
    bar();
}
foo();

로그인 후 복사

"JavaScript 정의 가이드" 정의 of closure

함수 객체는 스코프 체인을 통해 서로 연관될 수 있으며, 함수 본문 내부의 변수를 함수 스코프에 저장할 수 있습니다.

 var global = "global scope"; //全局变量
function checkscope() {
    var scope = "local scope"; //局部变量
    function f() {
        return scope; //在作用域中返回这个值
    };
    return f();
}
checkscope(); // 返回 "local scope"

로그인 후 복사

엄밀히 말하면 클로저는 세 가지 조건을 충족해야 합니다.

[1] 범위에 액세스

[2] 함수 중첩;

[3] 범위 외부에서 호출됨
조건 1을 만족하므로 IIFE는 클로저입니다. 어떤 사람들은 조건 1과 2가 충족될 때만 그렇다고 생각합니다. 따라서 중첩된 함수는 세 가지 조건이 모두 충족될 때만 그렇다고 생각합니다. 범위 밖에서 호출되는 함수는 클로저입니다

클로저가 필요한 이유와 js 클로저의 용도는 무엇입니까

먼저 예제를 살펴보겠습니다.

var counter = 0;
function add() {
   return counter += 1;
}
add();
add();
add();// 计数器现在为 3

로그인 후 복사

이제 목표를 달성했지만 여기에 문제가 있습니다. 코드의 모든 함수는 카운터 값을 마음대로 변경할 수 있으므로 이 카운터는 완벽하지 않습니다. 그렇다면 add 함수에 카운터를 넣는 것이 더 좋지 않을까요?

function add() {
    var counter = 0;
    return counter += 1;
} 
add();
add();
add();// 本意是想输出 3, 但输出的都是 1

로그인 후 복사

이렇게 하면 add 함수를 호출할 때마다 counter 값이 0으로 초기화되어 여전히 목적을 달성하지 못합니다.

클로저 사용 방법

이번에는 이 문제를 해결하기 위해 클로저를 사용해야 합니다. 먼저 코드를 살펴보겠습니다.

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();// 计数器为 3

로그인 후 복사

이제 카운터를 완벽하게 구현했습니다. 이 섹션은 매우 간결하며 다음과 같은 동등한 코드로 나눌 수 있습니다.

function outerFunction () {
     var counter = 0;
     function innerFunction (){
         return counter += 1;
     }
     return innerFunction;
}
var add = outerFunction();
add();
add();
add();// 计数器为 3

로그인 후 복사

이때 추가하면 클로저가 형성됩니다. 클로저는 함수와 함수가 생성되는 환경이라는 두 부분으로 구성됩니다. 환경은 환경 내의 지역 변수로 구성됩니다. 클로저 add의 경우 innerFunction 함수와 counter 변수로 구성되어 있으므로 add는 이때 변수 counter에 접근할 수 있다.

클로저 사용 시 주의할 사항

클로저는 이를 포함하는 함수의 범위를 전달하므로 다른 함수보다 더 많은 메모리를 차지합니다. 따라서 메모리를 확보하기 위해 익명 함수를 수동으로 역참조하는 것이 가능합니다.

function f2(){
    var n=22;
    var nAdd=function(){n++};
    return function(){
        return {
            n:n,
            nAdd:nAdd
        }
    }
}
//result2就是创建了一个匿名函数
var result2=f2();
//调用函数
console.log(result2());
result2().nAdd();
console.log(result2());
//解除对匿名函数的引用，以便释放内存
result2=null;

로그인 후 복사