집 > 기사 > 웹 프론트엔드 > js 클로저의 용도는 무엇입니까? js 클로저 사용 예(코드 포함)

js 클로저의 용도는 무엇입니까? js 클로저 사용 예(코드 포함)

不言원래의: 2018-08-23 11:38:341419검색

이 기사에서는 JS 클로저의 용도에 대해 설명합니다. js 클로저(코드 포함)의 사용 예에는 특정 참조 값이 있으므로 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

Js 언어는 함수 내부의 전역 변수를 직접 읽을 수 있지만 함수 내부의 지역 변수는 함수 외부에서 읽을 수 없습니다.

<script type="text/javascript">
var n=100;
function parent(){
  alert(n);
}
parent();//100
</script>

<script type="text/javascript">
function parent(){
  var m=50;
}
parent();
alert(m);//报错 m未定义
</script>

참고: 변수는 내부에서 선언됩니다. 함수에 var를 추가해야 합니다. 그렇지 않으면 전역 변수 가 선언됩니다.

function parent(){

m=50;

}

parent();

alert(m);//50

때때로 함수 내부에 지역 변수를 가져와야 하는 경우 함수 내부에 하위 함수를 정의하는 등 js 변수 범위의 특성을 활용하는 유연한 방법을 사용해야 합니다. 하위 함수의 경우 상위 함수는 전역입니다. 하위 함수는 상위 함수의 변수(전체 js 코드에 대한 지역 변수)에 액세스할 수 있습니다.

<script type="text/javascript">
function parent(){
   var m=50;
   function son(){
        alert(m);
   }
   return son;
}
var s=parent();//将结果保存在全局里
s();//50
</script>

내부의 모든 지역 변수 부모는 자식 함수에 표시되지만 자식 함수의 지역 변수는 부모 함수에 표시되지 않습니다. 이것은 js의 고유한 체인 범위 구조입니다. 자식 개체는 모든 부모 개체 수준의 변수를 조회합니다. 상위 개체의 모든 변수는 하위 개체에 표시되지만 그 반대는 사실이 아닙니다 ! 위의 아들 함수는 클로저입니다.

closure: 함수는 함수 내부에서 정의되며 함수 내부와 외부를 연결하는 브릿지입니다. 클로저에는 두 가지 기능이 있습니다.

#🎜🎜 ##🎜 🎜#

1 익명 함수는 클로저를 구현합니다.

<script type="text/javascript">
var cnt=(function(){
    var i=0;
    return function(){
        alert(i);
        i++;
    }
})();
cnt();//0
cnt();//1
cnt();//2
cnt();//3

# 🎜🎜# 익명 함수(즉, 내부 하위 함수의 선언이 전역 변수 cut에 할당됨)의 실행 결과, i는 메모리에 저장되고, cut 실행 시 메모리에서 직접 값을 가져옵니다. (). cnt() 함수만 i를 직접 호출할 수 있습니다.

2. 클로저에 매개변수 전달:

var cnt=(function(num){
return function(){
    alert(num);
    num++;
  }
})(5);
cnt();//5
cnt();//6
cnt();//7
//当然还可以调用时传参
var cnt=(function(){
    var i=0;
return function(num){
    num+=i;
    alert(num);
    i++;
  }
})();
cnt(1);//1
cnt(2);//3
cnt(3);//5

js 클로저의 용도는 무엇입니까? js 클로저 사용 예(코드 포함)

관련 기사