JavaScript Core -- 패키지 이해

자 바스 크 립 트 패키지 가 도대체 무엇 입 니까?
이론 적 기초
    패 킷 을 닫 는 것 은 많은 변수 와 이 변 수 를 연결 하 는 환경 을 가 진 표현 식 (보통 하나의 함수) 입 니 다. 함수 외부 변수 (다른 함수 내부 변수) 를 읽 고 이 실행 환경 을 메모리 에 계속 유지 할 수 있 습 니 다.javascript 언어 에 서 는 함수 내부 의 하위 함수 만 부분 변 수 를 읽 을 수 있 기 때문에 패 킷 을 닫 는 것 을 '하나의 함수 내부 에 정 의 된 함수' 로 간단하게 이해 하여 내부 함수 와 외부 함 수 를 연결 할 수 있 습 니 다.
    즉, 패 킷 을 닫 는 것 은 다른 함수 역할 영역 에 접근 할 수 있 는 변 수 를 가 진 함수 입 니 다. 패 킷 을 닫 는 가장 직접적인 방식 은 함수 내 에 다른 함 수 를 만 드 는 것 입 니 다. 예 를 들 어 내부 함수 등 입 니 다.본질 적 으로 모든 함 수 는 폐쇄 함수 이다.

function test(){
     for(var i = 0; i < 10 ; i++){
         setTimeout(function(){
            console.log(i)
        }, 0);
      }
}
test(); // 10 10 10 10 10 <span style="font-family: Arial;">10 10 10 10 10</span>

    이상 함수 가 0 에서 9 까지 출력 하려 고 했 는데 10 개 를 출력 했 습 니 다.이 유 는 test () 가 실 행 될 때 실행 시기의 컨 텍스트 를 만 들 고 setTimeout 내부 의 함 수 는 for 순환 대기 열 에 두 고 for 순환 이 실 행 된 후에 야 실 행 됩 니 다.
function () {console. log (i)} 실행 은 함수 내부 의 i 표시 자 를 먼저 찾 습 니 다.이 때 i 를 찾 을 수 없습니다. test 의 i (패 킷 개념: 함수 밖의 변 수 를 방문 합 니 다. 이 변 수 는 패 킷 을 닫 고 사용 하지 않 을 때 까지 기 다 려 야 삭 제 됩 니 다) 를 찾 습 니 다. 이때 i 값 은 10 으로 바 뀌 었 기 때문에 10 번 실행 하면 10 을 출력 합 니 다.
이 문 제 를 해결 하면 역할 영역 체인 에 노드 를 추가 하고 i 변 수 를 저장 할 수 있 습 니 다.

function test(){
for(var i = 0; i < 10 ; i++){
     (function(li){
        setTimeout(function(){
            console.log(li)
         }, 0);
     })(i);
    }
}
test(); // 0...9(0 9)

    실행 할 때마다 출력 할 i 값 을 저장 하 는 변 수 를 추가 하여 0 에서 9 의 출력 을 실현 합 니 다.
    패 킷 을 닫 는 것 은 다음 과 같은 뚜렷 한 장점 이 있 습 니 다. 함수 내부 의 변 수 를 읽 고 이 변수의 값 을 메모리 에 저장 할 수 있 습 니 다.패 킷 과 익명 의 자체 실행 함 수 를 사용 하여 모듈 화 를 실현 합 니 다.
    폐쇄 도 다음 과 같은 뚜렷 한 단점 이 있다.
    1. 메모 리 를 방출 하지 않 으 면 반드시 메모리 에 대한 소모 가 많아 서 페이지 접근 의 성능 에 문제 가 생 길 것 이다.해결 방법: 사용 하지 않 는 부분 변 수 를 모두 삭제 합 니 다. 함수 에서 물 러 날 때.
    2. 패 킷 을 닫 으 면 부모 함수 의 개인 속성 을 변경 합 니 다. 당신 이 주의 하지 않 을 때.
    예 를 하나 더 들다

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

    우선, 우 리 는 어떤 일 내부 함 수 를 알 아야 합 니까? 내부 함 수 는 다른 함수 에 정 의 된 함수 입 니 다.예 를 들 면:

function outerFn () {
    function innerFn () {}
}
outerFn();//      
innerFn();//            

 
  하나의 함수 가 의존 관계 가 존재 하지 않 으 면 쓰레기 회수 메커니즘 에 의 해 회수 되 는 가능성 이 있 지만, 상기 사례 f1 () 처럼 내부 함 수 를 외부 함수 반환 값 으로 전역 변수 에 할당 하면 이러한 잠재 적 인 관 계 를 바 꿀 수 있다.함수 역할 영역 을 떠 나 도 내부 함 수 를 호출 한 다 는 사실 을 인용 할 수 있 습 니 다. 내부 함 수 를 호출 할 수 있 는 가능성 이 있 으 면 자바 스 크 립 트 는 이 내부 함수 에 의 해 인 용 된 함 수 를 유지 해 야 한 다 는 것 을 의미 합 니 다.또한 자 바스 크 립 트 가 실 행 될 때 이 내부 함 수 를 인용 하 는 모든 변 수 를 추적 해 야 합 니 다. 마지막 변수 가 폐 기 될 때 까지 자 바스 크 립 트 의 쓰레기 수집 기 는 해당 메모리 공간 을 방출 할 수 있 습 니 다 (내부 함 수 를 null 로 설정 합 니 다).
   위의 논술 에 따 르 면 우 리 는 두 번 째 예 에서 의 결 과 를 간략하게 분석 하 는 동시에 f1 () 함수 의 반환 값 f2 () 가 result 전체 변수 에 할당 되 어 f2 는 메모리 에서 제거 되 지 않 았 고 f2 () 는 f1 () 의 의존 관 계 를 유지 하기 때문에 f1 () 도 메모리 에 있 기 때문에 우 리 는 외부 에서 f1 () 에 접근 할 수 있다.내부 변수그래서
두 번 째 호출 var result 2 = f1 ();결 과 는 여전히 999.우리 가 새로운 폐쇄 환경 을 만 들 었 기 때문에 본질 적 으로 새로운 대상 을 만 들 었 고 폐쇄 는 이 대상 의 인 스 턴 스 방법 입 니 다.또한 이러한 변 수 는 개인 적 인 것 이기 도 합 니 다. 그들의 역할 영역 외부 에서 이러한 변 수 를 직접 인용 하여 대상 데 이 터 를 대상 으로 하 는 전유 성 을 확보 할 수 없 기 때 문 입 니 다.
2) 기타
닫 힌 고전 제목 이나 오류
1) 자 바스 크 립 트 이벤트 귀속
페이지 에 몇 개의 div 가 있 습 니 다. 우 리 는 그들 에 게 onclick 방법 을 연결 시 키 고 싶 어서 아래 코드 가 있 습 니 다.

<div id="divTest">
        <span>0</span> <span>1</span> <span>2</span> <span>3</span>
    </div>
    <div id="divTest2">
        <span>0</span> <span>1</span> <span>2</span> <span>3</span>
    </div>

$(document).ready(function() {
            var spans = $("#divTest span");
            for (var i = 0; i < spans.length; i++) {
                spans[i].onclick = function() {
                    alert(i);
                }
            }
        });

아주 간단 한 기능 인 데 하필 오류 가 발생 했 습 니 다. 매번 alert 에서 나 오 는 값 은 4 입 니 다. 간단 한 수정 만 하면 됩 니 다.

var spans2 = $("#divTest2 span");
        $(document).ready(function() {
            for (var i = 0; i < spans2.length; i++) {
                (function(num) {
                    spans2[i].onclick = function() {
                        alert(num);
                    }
                })(i);
            }
        });

    설명: 위의 코드 는 페이지 에 불 러 온 후에 실 행 됩 니 다. i 의 값 이 4 일 때 판단 조건 이 성립 되 지 않 습 니 다. for 순환 실행 이 완료 되 었 습 니 다. 그러나 모든 span 의 onclick 방법 은 이 때 내부 함수 이기 때문에 i 는 패키지 참조 되 고 메모리 가 소각 되 지 않 습 니 다. i 의 값 은 프로그램 이 바 뀌 거나 모든 onclick 함수 가 소 멸 될 때 까지 4 를 유지 합 니 다.(자발적으로 함 수 를 null 또는 페이지 로 마 운 트 해제) 할 때 만 회수 합 니 다. 이렇게 하면 span 을 클릭 할 때마다 onclick 함 수 는 i 의 값 을 찾 습 니 다. (역할 도 메 인 체인 은 참조 방식 입 니 다)"검사 가 4 와 같 으 면 alert 가 우리 에 게 주 었 습 니 다. 두 번 째 방식 은 즉시 실행 되 는 함 수 를 사용 하여 또 하나의 패 키 지 를 만 들 었 습 니 다. 함수 성명 을 괄호 안에 넣 으 면 표현 식 이 되 었 습 니 다. 그 다음 에 괄호 괄호 를 넣 으 면 호출 되 었 습 니 다. 이때 i 를 매개 변수 로 전달 하고 함수 가 즉시 실행 되 며 num 은 매번 i 의 값 을 저장 합 니 다."
    하 얗 게 나 왔어요.