JavaScript 클로저 구문 분석(코드 포함)

이 글의 내용은 JavaScript 클로저(코드 포함) 분석에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

클로저는 다른 함수 범위에 있는 변수에 액세스할 수 있는 함수입니다. 클로저를 생성하는 일반적인 방법은 다른 함수 내에 함수를 생성하는 것입니다. 클로저를 이해하기 전에 먼저 변수 범위를 이해해야 합니다

변수 범위: 전역 변수와 지역 변수
1. 전역 변수
전역 범위에서 직접 정의된 변수

var name='Fakin';
function getName(){
  alert(name)
}
getName()//'Fakin'

그리고 함수는 전역 변수를 직접 읽을 수 있습니다

2 . 지역 변수
함수 내부에 직접 정의된 변수(JS는 ES6 이전에는 블록 수준 범위가 없었습니다.)

function getName(){
  var name='Fakin';
}
alert(name)//undefined

Closure
이 두 가지를 명확히 한 후 클로저를 살펴보겠습니다. 무슨 일이 일어나고 있나요?

질문 1: 클로저란 무엇인가요? 위에서 언급한 내용이 많은데 이해가 안 되나요?
답: 개인적으로 클로저에 대한 이해는 다른 함수의 내부 변수를 읽을 수 있는 함수입니다

질문 2: 클로저 사용 방법
답: 함수 내부에 함수를 만들고, 이 함수에서 이전 함수의 변수를 참조합니다. . 마지막으로 이 함수가 어떻게 반환되는지 이야기해 보겠습니다. 예를 들어보겠습니다.

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

위의 예에서 f2는 f1에 할당됩니다. 결과는 총 두 번 실행됩니다. 결과 우리는 또한 원하는 것을 얻었습니다. 이는 클로저에서 f2가 f1의 변수 'n'을 참조하지만 f1이 실행된 후 메모리에서 'n'이 삭제되지 않음을 증명합니다. .JS에서는 함수가 실행된 후 변수가 다른 곳에서 참조되지 않으면 자동으로 삭제된다는 점을 누구나 알아야 합니다.

클로저 사용 시 주의 사항

1: 클로저를 사용하면 함수의 변수가 메모리에 저장되므로 메모리 사용량이 많아져 렌더링이 정지되는 등의 현상이 발생하고 브라우저가 실행됩니다. IE 브라우저에서도 메모리 누수 및 기타 문제가 발생할 수 있습니다
2: 하위 함수는 클로저에서 상위 함수의 변수를 참조하므로 하위 함수는 상위 함수 변수를 수정하지 마세요. ​부모 함수 변수를 마음대로

생각해보기

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 16
f2(); // 16
f3(); // 16

왜 f1 f2 f3은 모두 우리가 원하는 값이 아닌 동일한 값을 반환합니까? 그렇다면 폐쇄로 어떻게 해결할 수 없습니까?
실제로는 매우 간단합니다. 클로저를 위해 두 줄의 코드만 더 있으면 됩니다

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
       //在自执行函数中把i传入相当于这个自执行函数的参数绑定了i，
       //当每次循环的时候不管变量怎么更改，这个函数的参数不会更改，所以返回咱们想要的结果
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

위 내용은 JavaScript 클로저 구문 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!