자 바스 크 립 트 폐쇄 (3)

목차
1. 실행 환경 과 역할 영역 체인
2. 함수 즉시 실행
3. 폐쇄 지식 포인트
3.1 폐쇄 란 무엇 인가
3.2 폐쇄 적 인 의미 와 주의 점 사용
3.3 패키지 의 구체 적 인 응용
4. 소결
이것 은 자 바스 크 립 트 기본 문법의 함수 부분의 두 번 째 문장 으로 자 바스 크 립 트 에서 비교적 중요 한 지식 점 폐쇄 를 다 루 었 다.패 킷 을 닫 기 전에 지난 편 인 을 바탕 으로 실행 환경 과 역할 도 메 인 체인 의 지식 점 을 심화 시 키 고 즉시 실행 함수 에 대한 지식 을 보충 합 니 다.마지막 으로 폐쇄 와 관련 된 부분 을 중점적으로 연구 했다.
1. 실행 환경 과 역할 영역 체인
패 킷 을 닫 기 전에 먼저 함수 의 집행 환경 과 역할 도 메 인 체인 의 원 리 를 뚜렷하게 이해 해 야 한다.1.1 실행 환경 은 변수 가 실행 단계 에 있 는 역할 영역 을 말 합 니 다. 실행 환경 은 변수 나 함수 가 접근 할 수 있 는 다른 데 이 터 를 정의 합 니 다. 모든 실행 환경 은 이와 관련 된 변수 대상 이 있 고 환경 에서 모든 변 수 는 이 대상 에 저 장 됩 니 다.

var a = 1;
function fn (args){
    console.log(a+args)
}
fn(1)//2

상기 코드 는 두 개의 실행 환경 이 존재 합 니 다. 모든 실행 환경 은 이와 관련 된 변수 대상 이 있 습 니 다. 변수 a 와 함수 fn 은 전체 변수 대상 window 에 저장 되 고 함수 의 매개 변 수 를 저장 하 는 agruments 대상 은 부분 변수 대상 fn 에 저 장 됩 니 다.주의해 야 할 것 은 이 실행 환경 이 함수 라면 활동 대상 을 변수 대상, 즉 함수 호출 시 생 성 된 대상 으로 합 니 다. 함수 가 호출 되 지 않 아 정 의 된 변 수 는 존재 하지 않 기 때 문 입 니 다.1.2 역할 도 메 인 체인 은 코드 가 한 환경 에서 실 행 될 때 변수 대상 의 역할 도 메 인 체인 을 만 듭 니 다. 역할 도 메 인의 용 도 는 실행 환경 이 현재 역할 도 메 인 과 그 외부 변 수 를 질서 있 게 방문 할 수 있 도록 하 는 것 입 니 다.

var a =1;
function fn(b,c){
    var d = 4;
    console.log(a+b+c+d)
}
fn(2,3)//10

상기 코드 를 예 로 들 어 집행 환경 과 역할 도 메 인 체인 에 관 한 지식 을 연구한다.

js 엔진 은 분석 단계 에서 변수 a 와 함수 fn 을 window 변수 대상 에 저장 합 니 다. 이때 변수 a 와 함수 fn 의 실행 환경 은 window 대상 입 니 다.

함수 fn 을 호출 할 때 함수 fn 은 활동 대상 fn () 을 만 들 고 함수 내부 의 변수 b, c (함수 의 arguments 대상 에 저장) 와 변수 d 의 실행 환경 은 활동 대상 fn () 입 니 다.

이때 함수 내부 의 코드 는 실행 과정 에서 활동 대상 의 역할 도 메 인 체인 을 만 듭 니 다. 접근 할 수 있 는 변수 처 리 는 arguments 대상 에 저 장 된 b 와 c 가 있 고 내부 d 를 직접 정의 하 는 동시에 외부 실행 환경 인 window 대상 을 정의 하 는 a 에 접근 할 수 있 습 니 다.

따라서 이것 은 간단 한 역할 도 메 인 체인 이 고 이 역할 도 메 인 체인 식 단 방향 (내부 에서 외부 로 접근 할 수 있 음), 질서 있 는 것 이다.

1.3 자 바스 크 립 트 의 블록 급 작용 역 에 대해 자 바스 크 립 트 는 블록 급 작용 역 이 존재 하지 않 으 며 함수 만으로 하나의 작용 역 을 단독으로 개척 할 수 있다.이전 단계 의 고전 코드 를 비교 하여 블록 급 역할 영역 과 다음 의 패 킷 예열 을 위 한 것 입 니 다.

//html

  
1
  
2
  
3
  
4
  
5

//js
var lists = document.querySelectorAll('li')
console.log(lists)
for(var i=0;i

【demo】

원래 수 요 는 몇 번 째 li 를 클릭 하고 콘 솔 에서 몇 번 째 li 의 아래 표 시 를 팝 업 하 는 것 이 었 으 나 실제 팝 업 은 모두 5 였 다.

이 문제 가 발생 한 이 유 는 for 이 프로 세 스 제어 문 구 는 블록 급 역할 도 메 인 을 만 들 수 없 기 때 문 입 니 다. 블록 급 역할 도 메 인 을 만 들 수 있다 면 순환 할 때마다 function 안의 i 은 그 당시 i 를 저장 합 니 다.

실제 적 으로 for 에 항목 과 역할 영역 이 존재 하지 않 기 때문에 순환 적 으로 옮 겨 다 니 면 i=5 클릭 사건 을 촉발 할 때 호출 함수 console.log(i) 는 5 가 됩 니 다.

원래 의 수 요 를 실현 하려 면 우 리 는 순환 할 때마다 그 당시 i 를 저장 할 수 있 는 블록 급 역할 도 메 인 을 만들어 야 한다.

구체 적 으로 어떻게 실현 하 는 지 다음 지식 이 필요 하기 때문에 답 은 뒤에 있다.

2. 함수 즉시 실행
즉시 실행 함수 (Immediately - Invoked Function Expression, IIFE) 란 함수 성명 후 즉시 이 함 수 를 호출 하 는 것 입 니 다. 구체 적 인 작성 방법 은:

(function(){
  console.log(1)
})();
//1
    
(function(a){
  console.log(a)
})(5);
//5

초보 자 들 은 함수 의 작성 법 을 즉시 집행 하 는 것 에 대해 이상 하 게 생각 할 수 있 지만 사실은 js 뒤의 해석 원 리 를 이해 하기 만 하면 그 규칙 을 쉽게 파악 할 수 있다.즉시 실행 함 수 는 익명 함수 와 두 개의 괄호 로 구성 되 어 있 으 며 익명 함 수 를 첫 번 째 괄호 안에 넣 습 니 다.

1.()();
2.function(){};
3.(function(){})()

이러한 쓰기 가 나타 난 이 유 는 js 기본 줄 에 나타 난 함수 가 구문 (성명 식) 으로 해석 되 었 습 니 다.

//   
function(){};
//   
var f = function(){}

문장 뒤에 괄호 가 직접 나타 나 면 오 류 를 보고 할 수 있 습 니 다. 괄호 를 통 해 문 구 를 묶 어서 js 를 표현 식 으로 식별 한 다음 에 괄호 를 추가 하여 즉시 호출 하여 즉시 실행 함 수 를 실현 합 니 다.

function(){}();//  
(function(){})()//   

즉시 실행 함수 의 장점 은:

함수 가 독립 적 으로 하나의 작용 역 을 개척 하 는 기능 을 가지 고 사유 변수의 봉인 을 실현 한다.

정 의 를 내 린 후에 내부 코드 를 실행 할 수 있다.

익명 의 특성 은 동급 또는 상급자 의 변 수 를 오염 시 키 는 것 을 걱정 할 필요 가 없다.

3. 폐쇄 지식 포인트
3.1 폐쇄 란 무엇 인가
앞에서 실행 환경 과 역할 도 메 인 체인 에 대해 말 했 습 니 다. 우 리 는 실행 환경 이 변 수 를 정의 하고 다른 데 이 터 를 방문 할 권리 가 있 으 며 함수 가 역할 도 메 인 을 만 들 수 있다 는 것 을 알 고 있 습 니 다.만약 에 우리 가 지금 이런 수요 가 있다 면 외부 환경 에서 도 내부 환경 에 접근 할 수 있 는 변 수 를 원한 다 면 어떻게 실현 할 것 인가?여기 서 패 킷 을 끌 어 내 는 개념 이 필요 합 니 다. 패 킷 (closure) 은 다른 함수 내부 변 수 를 방문 할 수 있 는 함 수 를 말 합 니 다.

function outer(){
    var a = 1;
    function inner(){
      return a
    }
    return inner
}
var result = outer();
result();//1

상기 코드 에서 변수 a 는 함수 outer 에서 설명 하기 때문에 함수 outer 내부 만 접근 할 수 있 고 외부 전역 환경 에 접근 할 수 없습니다.

outer 내부 에서 함수 inner 를 정의 합 니 다. 역할 도 메 인 체인 의 역할 로 인해 이 inner 는 변수 a 에 접근 할 수 있 습 니 다.

마지막 으로 inner 인 터 페 이 스 를 노출 하여 outer 를 호출 할 때 inner 인 터 페 이 스 를 얻 고 이 인 터 페 이 스 를 호출 하여 함수 내부 변 수 를 방문 하 는 목적 을 달성 합 니 다.

상기 분석 을 통 해 우 리 는 함수 inner 가 바로 닫 힌 것 임 을 알 수 있다. 즉, 다른 함수 내부 변 수 를 방문 할 수 있 는 함수 이다.

3.2 폐쇄 적 인 의미 와 주의 점 사용
패 킷 을 사용 하 는 의미 패 킷 의 의 미 는 함수 의 패 키 징 을 실현 하고 변 수 를 모두 함수 내부 에 밀봉 하 며 전체 환경 을 오염 시 킬 걱정 없 이 인터페이스 만 노출 시 키 고 내부 의 코드 논리 에 관심 을 가 질 필요 가 없다 는 것 이다. 예 를 들 어 대상 의 개인 속성 과 방법 을 패 키 징 하 는 것 이다.

function Animal(name){
    var _age;
    function setAge(age){
      _age = age
    };
    function getAge(){
      return _age
    }  
    return {
      name:name,
      setAge:setAge,
      getAge:getAge
    }
}
var cat = Animal('cat');
cat.setAge(12)
cat.getAge()//12

상기 코드 는 대상 의 사유 속성 _age 과 사유 방법 setAge, getAge 을 봉 하여 하나의 대상 을 인터페이스 로 노출 시 켰 다.

함수 Animal 내부 에서 정 의 된 변수 외 부 는 직접 접근 할 수 없고 대상 인터페이스 로 만 간접 적 으로 접근 할 수 있 습 니 다.

우 리 는 대상 과 관련 된 속성 과 방법 만 호출 해 야 한다. 방법 이 구체 적 으로 어떻게 실현 되 는 지 에 관심 을 가 질 필요 도 없고 내부 에서 정 의 된 변수 가 전체 변수 에 오염 되 는 것 을 걱정 할 필요 도 없다.패 킷 을 닫 는 주의 점 을 사용 하여 패 킷 을 닫 으 면 메모리 유출 문제 가 발생 할 수 있 습 니 다.보통 함수 가 호출 된 후에 js 내부 의 쓰레기 회수 체 제 는 국부 활동 대상 (함수 호출 시 생 성 된 대상) 을 자동 으로 소각 하지만 상기 코드 를 예 로 들 면

var cat = Animal('cat') 이 코드 가 실 행 된 후에 이치 에 따라 함수 Animal 라 는 활동 대상 을 소각 합 니 다. 실제 이 활동 대상 은 메모리 에 존재 합 니 다.

이 유 는 return {...} 이 대상 의 개인 적 인 방법의 역할 도 메 인 체인 이 아직도 이 Animal 활동 대상 을 인용 하고 있 기 때문이다.

return {...} 의 이 대상 이 소 각 된 후에 야 Animal 활동 대상 이 소 각 될 수 있 고 메모리 가 방출 될 수 있다.다음 코드 를 추가 하여 메모리 방출 가능:

var cat = Animal('cat');
cat.setAge(12)
cat.getAge()//12
cat = null

3.3 패키지 의 구체 적 인 응용
이전 코드 로 돌아 가기:

//html

  
1
  
2
  
3
  
4
  
5

//js
var lists = document.querySelectorAll('li')
console.log(lists)
for(var i=0;i

어느 것 list 을 클릭 하면 콘 솔 에서 출력 i 합 니 다.

즉시 실행 함 수 를 통 해 독립 된 역할 영역 을 형성한다.

매개 변 수 를 IIFE 에 전달 하여 순환 할 때마다 함수 내부 의 변 수 를 형성한다.

마지막 에 return 에서 함 수 를 내 는데 이 함수 의 반환 값 은 바로 그 당시 의 i 입 니 다.

var lists = document.querySelectorAll('li')
console.log(lists)
for(var i=0;i

【demo】
4. 소결
전체 문장 을 통 해 우 리 는 알 게 되 었 다.

실행 환경 이란 변수 가 실행 단계 에 있 는 역할 영역 을 말 하 며 변수 가 접근 할 수 있 는 다른 데 이 터 를 정의 합 니 다. 모든 실행 환경 에 이와 관련 된 변수 대상 이 있 고 모든 변 수 는 그 안에 저장 되 며 함 수 는 실행 단계 에 하나의 활동 대상 을 만 듭 니 다. 이 활동 대상 은 다음 과 같은 변 수 를 포함 할 수 있 습 니 다. arguments 함수 내부 사용 var정 의 된 변수 와 외부 변수;

변 수 는 실행 단계 에서 변수 대상 의 역할 도 메 인 체인 을 만 들 고 역할 도 메 인 체인 의 용 도 는 실행 환경 이 현재 역할 도 메 인과 다른 외부 변 수 를 질서 있 게 방문 할 수 있 도록 하 는 것 이다.

JavaScript 에 블록 급 역할 영역 이 존재 하지 않 습 니 다.

패 키 지 는 함수 내부 변 수 를 방문 할 수 있 는 함수 로 패 키 지 를 닫 는 의 미 는 함수 내부 에서 변 수 를 패 키 징 하여 간접 방문 함수 내부 변 수 를 실현 하 는 데 있다.패 킷 을 사용 할 때 메모리 유출 문 제 를 주의해 야 한다. 해결 방법 은 인 터 페 이 스 를 호출 한 후에 할당 null 을 사용 하여 소각 할 수 있다.

참고 자료

- 완 일 봉