JS 클로저의 특성 분석-JS 튜토리얼-php.cn

JS 클로저의 특성 분석

小云云

풀어 주다： 2018-03-06 13:55:49

원래의

1604명이 탐색했습니다.

body 태그에 id 노드와 함께 u 태그를 추가하고, ul 태그 아래에 5개의 li 태그가 있습니다. 다른 li 태그를 클릭할 때 li 첨자를 표시하는 방법은 무엇입니까?
1) 먼저 ul 노드를 가져와야 합니다. var node = document.getElementsById('node')
2) 노드 아래에 하위 노드를 가져옵니다. node var list = node.children
**3) 하위에 onclick 이벤트를 추가합니다. 루프의 노드(여기서는 폐쇄 문제가 있음을 참고하세요). for(var i=0;i< list.length; i++){
list[i].onclick = function()console.log(i)}}, 인쇄된 결과에서 출력은 7입니다. 시간. **
4) 출력 분석 7. i는 var를 사용하여 전역 변수로 선언되었으므로 동일한 주소를 가리킵니다. 루프가 실행된 후 i의 값은 7이므로 각 루프에 출력되는 결과는 7입니다.
문제 해결을 위해 두 가지 방법을 사용합니다. 1) 블록 수준 범위 변수를 선언하고 let j = i를 사용하여 매번 수신합니다. 나는 에 전달되었습니다.

let j = i; 
list[i].onclick = function(){console.log(j)}

로그인 후 복사

함수 메서드에서는 블록 수준 변수 j가 호출되며 이 변수는 가비지 수집되지 않습니다. 각 for 루프는 서로 다른 주소를 가리키므로 클릭 이벤트가 트리거되면 해당 첨자가 올바르게 인쇄될 수 있습니다. 2) 문제를 해결하려면 클로저를 사용하세요.

list[i].onclick = function(i){ 
return function(){console.log(i)}。 
}

로그인 후 복사

**클로저의 해석
클로저는 다른 함수의 내부 변수를 읽을 수 있는 함수입니다. JavaScript 언어에서는 함수 내의 하위 함수만 지역 변수를 읽을 수 있습니다. 클로저는 간단히 "함수 내부에 정의된 함수"로 이해될 수 있습니다. 본질적으로 클로저는 함수 내부와 함수 외부를 연결하는 다리입니다.

참고: 클로저를 사용하면 함수의 변수가 메모리에 저장되어 많은 메모리를 소비하게 됩니다. 따라서 클로저를 남용할 수 없으며 이로 인해 웹 페이지에서 성능 문제가 발생하고 IE 브라우저에서 메모리 누수가 발생할 수 있습니다. . . 최종 해결 방법은 함수를 종료하기 전에 사용되지 않는 지역 변수를 모두 삭제하는 것입니다.

다른 사람의 예를 사용하세요. 참고로

var name = "this window";
var object = {
    name :"my object",
    getNameFunc:function () {
        return function () {
            return this.name;
        }
    }
}
alert(object.getNameFunc()());/弹出this window2 。此时this对象指向window对象
var object2 = {
    name: "my object",
    getNameFunc2: function () {
        var that = th is;
        return function () {
            return that.name;
        }
    }
}
alert(‘that’+object2.getNameFunc2()()); ///弹出my object。此时this对象指向object2对象

로그인 후 복사