자바스크립트 클로저_javascript 스킬 이해 및 예시

참고로:
어휘 범위: 변수의 범위는 변수가 실행될 때가 아니라 정의될 때 결정됩니다. 즉, 어휘 범위는 소스 코드에 따라 달라지며 정적을 통해 결정될 수 있습니다. 따라서 어휘 범위를 정적 범위라고도 합니다. with와 eval을 제외하면 JS의 범위 메커니즘은 어휘 범위(Lexical Scope)에 매우 가깝다고 할 수 있습니다.

다음은 전역 변수를 사용한 간단한 클로저 예시입니다.

코드 복사 코드는 다음과 같습니다.

var sWord="안녕하세요, 웹 프론트엔드 개발 엔지니어의 블로그에 오신 것을 환영합니다. 조언을 부탁드립니다.
function disWord(){
alert(sWord) ;
}
disWord();

분석: 스크립트가 메모리에 로드되면 disWord는 sWord의 값을 계산하지 않지만 함수가 실행될 때 sWord의 계산을 수행합니다. disWord가 호출됩니다.

다음은 다른 함수를 정의하는 함수 내 클로저의 예입니다.

코드 복사 코드는 다음과 같습니다:

var iNum=10;
function add(num1,num2){
function doAdd(){return num1 num2 iNum;}
return doAdd( );
}

분석: 내부 함수 doAdd는 들어오는 매개변수 num1, num2의 값을 가져오며 전역 변수 iNum은 매개변수를 허용하지 않습니다. add의 마지막 단계는 doAdd를 호출합니다. 두 개의 매개변수와 전역 변수 iNum을 사용하여 변수를 합산하여 반환하는 것을 실행 환경에서 볼 수 있습니다.


다음은 어휘 범위와 종결을 이해하는 인터넷에서 찾은 몇 가지 예입니다

코드 복사 코드는 다음과 같습니다.

, 사례 1
/*전역(창) 도메인 아래의 코드*/
function a(i) {
var i ;
alert(i);
};
a(10);

질문: 위 코드는 무엇을 출력합니까?
정답: 10.
특정 실행 프로세스
a 함수에는 형식 매개변수 i가 있습니다. a 함수 호출 시 실제 매개변수 10이 전달되고 형식 매개변수 i=10
다음으로 지역 변수 i를 정의합니다. 값이 할당되지 않은 동일한 이름
alert 출력 10
생각: 지역 변수 i와 형식 매개 변수 i는 동일한 저장 공간인가?
, 사례 2

코드 복사 코드는 다음과 같습니다.

1 /* 전역(window) 도메인 */

2 function a(i) {
3 Alert(i)
4 Alert(arguments[0]) //arguments[0]; 형식 매개변수 i
5 var i = 2;
6 Alert(i);
7 Alert(arguments[0])
9 a(10) ;


질문: 위 코드는 무엇을 출력합니까?
답변: 10,10,2,2

특정 실행 프로세스
함수에는 형식 매개변수 i가 있습니다. a 함수를 호출할 때 실제 값이 전달됩니다. 매개변수 10, 형식 매개변수 i=10
첫 번째 경고는 형식 매개변수 i의 값 10을 출력합니다.
두 번째 경고는 인수[0]를 출력합니다. 이 역시 i여야 합니다.
그런 다음 지역 변수 i를 정의하고 할당된 값은 2입니다. 이때 지역 변수 i=2
세 번째 경고는 지역 변수 i의 값 2를 출력합니다.
네 번째 경고는 인수a[를 출력합니다. 0] 다시
생각하기: 이렇게 하면 로컬을 설명할 수 있습니다. 변수 i와 형식 매개변수 i의 값이 같은가요?

, 사례 3

코드 복사 코드는 다음과 같습니다. /*(창) 도메인 아래의 전역 코드*/

function a(i) {

var i = i
alert(i)
}; 10)


질문: 위 코드는 무엇을 출력하나요?
답: 10
구체적인 실행 과정

첫 번째 문장은 형식 매개변수 i와 동일한 이름을 가진 지역 변수 i를 선언합니다. 결과에 따르면 후자의 i가
을 가리키는 것을 알 수 있습니다. 형식 매개변수 i이므로 여기서는 형식 매개변수 i의 값 10을 지역 변수 i에 할당하는 것과 같습니다.
두 번째 경고는 물론 10을 출력합니다.
생각: 사례 2와 결합하면 기본적으로 다음이 표시됩니다. 지역 변수 i와 형식 매개변수 i는 동일한 Store 주소를 가리킵니다!
, 사례 4




코드 복사

코드는 다음과 같습니다. /*Global (창) 도메인*/ var i=10;

function a() {

alert(i)
var i = 2; );
};



질문: 위 코드는 무엇을 출력하나요?
답: 정의되지 않음, 2
구체적인 실행 프로세스
첫 번째 경고는 정의되지 않음
두 번째 경고는 2를 출력
생각: 무슨 일이 일어나고 있는 걸까요?
위 예시를 보시면 어떻게 구현하는지 궁금하시죠? 구현 세부 사항은 무엇입니까? JS 엔진은 어떻게 작동하나요?
파싱 프로세스
, 실행 순서
컴파일된 언어의 컴파일 단계는 어휘 분석, 구문 분석, 의미 검사, 코드 최적화 및 바이트 생성으로 구분됩니다.
통역 언어에서는 어휘 분석과 구문 분석을 통해 구문 분석 트리를 얻은 후 해석과 실행을 시작할 수 있습니다. 다음은 구문 분석 과정에 대한 간단하고 독창적인 원리입니다. 자세한 구문 분석 과정(JS 엔진마다 다름)은 추가 연구가 필요합니다.
문서 스트림에 여러 스크립트 코드가 포함되어 있는 경우. 세그먼트(스크립트 태그로 구분된 js 코드 또는 가져온 js 파일)의 실행 순서는 다음과 같습니다.
Step 1. 첫 번째 코드 세그먼트를 읽습니다. (js 실행 엔진은 프로그램을 한 줄씩 실행하지 않고 분석하여 실행합니다. 섹션별)
2단계. 어휘 분석 및 구문 분석을 수행합니다. 오류가 있는 경우 구문 오류(예: 대괄호 불일치 등)가 보고되고 5단계로 이동합니다.
3단계. 수정 [var ]변수 및 [함수] 정의는 "사전 구문 분석"됩니다(올바른 선언만 구문 분석되므로 오류는 보고되지 않습니다)
4단계. 코드 세그먼트를 실행하고, 오류가 있는 경우 오류가 보고됩니다. 오류(예: 변수가 정의되지 않음)
Step 5. 다른 코드 세그먼트가 있으면 다음 코드 세그먼트를 읽고 2단계를 반복합니다.
Step 6. 종료
, 특수 지침
All JS 전역 도메인(창) 도메인의 코드를 볼 수 있습니다. 이는 자동으로 실행되는 "익명 메서드"이며, 이 "익명 메서드"의 다른 메서드는 명시적으로
호출될 때만 실행됩니다. 주요 단계
위의 과정은 크게 2단계로 나누어집니다.
파싱(Parsing) : 구문 분석과 사전 파싱을 통해 법률 구문 분석 트리를 구성합니다.
실행: JS 엔진이 각 함수 인스턴스를 실행할 때 실행 환경(ExecutionContext)과 활성 객체(activeObject)를 생성합니다(이들은 호스트 객체에 속하며 수명 주기와 일치합니다). 함수 인스턴스) )
자세한 예제 분석 자료는 다음과 같습니다. http://www.jb51.net/article/24547.htm