javascript 의 실행 순서 (1)

1.1  HTML 문서 흐름 순 으로 자 바스 크 립 트 코드 실행
1.2  사전 컴 파일 과 실행 순서 의 관계
인 스 턴 스: 자바 script 에서 function 이 야 말로 자바 script 의 첫 번 째 유형 입 니 다.우리 가 다음 함 수 를 쓸 때, 사실은 function 형식의 실 체 를 만 들 었 을 뿐이다.
우리 가 이런 형식 으로 쓸 수 있 듯 이:

  1.functionHello() {
alert("Hello");
}
Hello();
  2.varHello = function() {
alert("Hello");
}
Hello();

함수 1 과 함수 2 는 사실 모두 같다.
그러나 우리 가 그 중의 함 수 를 수정 할 때 이상 한 문 제 를 발견 할 수 있다.

<scripttype="text/javascript">
        functionHello() {
            alert("Hello");
        }
        Hello();
        functionHello() {
            alert("Hello World");
        }
        Hello();
    </script>

우 리 는 이러한 결 과 를 볼 수 있다. 헬 로 월 드 를 두 번 연속 수출 했다.우리 가 상 상 했 던 Hello 와 Hello World 가 아니 라
이것 은 자바 script 이 완전히 순서대로 해석 하여 실행 되 는 것 이 아니 라 해석 하기 전에 자바 script 에 대해 '사전 컴 파일' 을 한 번 하기 때 문 입 니 다. 사전 컴 파일 과정 에서 정의 식 함 수 를 우선 실행 하고 모든 var 변 수 를 만 들 며 기본 값 은 undefined 로 프로그램의 실행 효율 을 높 입 니 다.즉, 위의 코드 는 사실 JS 엔진 에 의 해 이러한 형식 으로 사전 컴 파일 되 었 다.

  <scripttype="text/javascript">
        varHello = function() {
            alert("Hello");
        }
        Hello = function() {
            alert("Hello World");
        }
        Hello();
        Hello();
    </script>

우 리 는 위의 코드 를 통 해 분명히 볼 수 있 습 니 다. 사실 함수 도 데이터 이 고 변수 입 니 다. 우 리 는 '함수' 에 대해 할당 (중복 할당) 을 할 수 있 습 니 다. 물론 우 리 는 이러한 상황 을 방지 하기 위해 서도 이렇게 할 수 있 습 니 다.

<scripttype="text/javascript">
        functionHello() {
            alert("Hello");
        }
        Hello();
    </script>
    <scripttype="text/javascript">
        functionHello() {
            alert("Hello World");
        }
        Hello();
    </script>

이렇게 해서 프로그램 이 두 단락 으로 나 뉘 어 져 있 으 면 JS 엔진 도 그들 을 함께 놓 지 않 을 것 이다.
자 바스 크 립 트 엔진 이 스 크 립 트 를 해석 할 때, 모든 성명 의 변수 와 함 수 를 사전 번역 기간 에 처리 합 니 다.
다음 과 같이 처리 합 니 다.
1. 실행 하기 전에 '사전 컴 파일' 과 유사 합 니 다.의 동작: 우선 현재 실행 환경 에서 의 활동 대상 을 만 들 고 var 로 설명 한 변 수 를 활동 대상 으로 설정 하 는 속성 을 만 듭 니 다. 그러나 이때 이 변수의 할당 값 은 undefined 이 고 function 으로 정의 하 는 함수 도 활동 대상 으로 추가 하 는 속성 이 며 그들의 값 은 함수 의 정의 입 니 다.(즉, JS 코드 의 사전 컴 파일 단계 에서 모든 var 가 정의 하 는 변수 와 function 으로 정 의 된 함 수 를 사전 컴 파일 합 니 다. 그 중에서 함수 의 정 의 는 그대로 유지 되 고 var 가 정의 하 는 변 수 는 var 변수 이름 = undefined 이 며 다음은 해석 실행 단계 에 들 어 갑 니 다)
2. 실행 단 계 를 설명 할 때 변 수 를 분석 해 야 할 때 현재 실행 환경의 활동 대상 에서 먼저 찾 습 니 다. 만약 에 이 실행 환경의 소유자 가 prototype 속성 이 있 을 때 prototype 체인 에서 찾 습 니 다. 그렇지 않 으 면 역할 도 메 인 체인 에서 찾 습 니 다. var a =.. 이런 문 구 를 만 났 을 때 해당 변수 에 값 을 부여 합 니 다.(메모: 변수의 할당 값 은 실행 단 계 를 설명 하 는 것 입 니 다. 그 전에 변 수 를 사용 하면 undefined 입 니 다) 따라서 자바 스 크 립 트 해석 기 가 아래 스 크 립 트 를 실행 할 때 오류 가 발생 하지 않 습 니 다.

alert(a);           //    undefined,          ,         var a = undefined
var a =1;
alert(a);           //    1

변수 선언 과 함수 정 의 는 사전 컴 파일 링 기간 에 처리 되 기 때문에 실행 기간 동안 모든 코드 를 볼 수 있 습 니 다. 그러나 위 코드 를 실행 할 때 제시 하 는 값 은 1 이 아 닌 undefined 입 니 다. 이것 은 변수 초기 화 과정 이 실행 기간 이 아니 라 실행 기간 에 발생 하기 때 문 입 니 다. 실행 기간 에 자바 스 크 립 트 해석 기 는 코드 에 따라 작 동 하기 때 문 입 니 다.앞 코드 줄 에 변 수 를 할당 하지 않 으 면 자 바스 크 립 트 해석 기 는 기본 값 undefined 를 사용 합 니 다. 두 번 째 줄 에 변 수 를 할당 하기 때문에 세 번 째 줄 코드 에 서 는 undefined 가 아 닌 변 수 를 1 로 표시 합 니 다.
마찬가지 로 아래 의 예 시 는 함수 성명 전에 함 수 를 호출 하 는 것 도 합 법 적 이 고 정확하게 해석 할 수 있 기 때문에 반환 값 은 1 이다.

f();                                 //     ，   1
function f(){
    alert(1);
}

단, 아래 방식 으로 함 수 를 정의 하면 자바 스 크 립 트 해석 기 는 문법 오 류 를 알려 줍 니 다.

f();           //     ，      (           ,        ,          )
var f = function(){
    alert(1);
}

이 는 상기 예제 에서 정 의 된 함수 가 변수 f 에 값 으로 만 할당 되 기 때문에 사전 번역 기 에 자바 스 크 립 트 해석 기 는 성명 변수 f 만 처리 할 수 있 고 변수 f 의 값 은 실행 기 를 기다 릴 때 순서대로 할당 할 수 있 기 때문에 어법 오류 가 발생 하여 대상 f 를 찾 을 수 없 음 을 알려 줍 니 다.
안녕 히 계 세 요.

<script type="text/javascript">
alert(func); //       func window              ，      ,
             //   undefined ,     function func(){alert("hello!")}
var func = "this is a variable";
function func(){
    alert("hello!")
}
/*         var     "this is a variable"*/
alert(func);  //         var     ,     "this is a variable"
</script>
    :
(1)     :
       var       function      ,      var func = undefined;
         function func(){...}, JavaScript      ,       ,                     undefined   ,            :function func(){...}
(2)    :
                var  function    ,         ,      alert(func);        func     ,           .
          func = "this is a variable";(             ,         ,var func = undefined),  func          "this is a variable",           :"this is a variable"

1.3  블록 별로 자 바스 크 립 트 코드 실행
코드 블록 이란 < script > 탭 으로 구 분 된 코드 세그먼트 입 니 다. 예 를 들 어 다음 두 개의 < script > 탭 은 각각 두 개의 자바 script 코드 블록 을 대표 합 니 다.

// JavaScript   1
<script>
var a =1;
</script>
<script>
// JavaScript   2
function f(){
    alert(1);
}
</script>

자 바스 크 립 트 해석 기 는 스 크 립 트 를 실행 할 때 블록 별로 실 행 됩 니 다. 일반적으로 브 라 우 저가 HTML 문서 흐름 을 분석 할 때 < script > 탭 을 만 나 게 되면 자 바스 크 립 트 해석 기 는 이 코드 블록 을 불 러 온 후에 코드 블록 을 미리 컴 파일 한 다음 에 실 행 됩 니 다. 실행 이 끝나 면 브 라 우 저 는 아래 의 HTML 문서 흐름 을 계속 해석 합 니 다.스 크 립 트 해석 기 도 다음 코드 블록 을 처리 할 준비 가 되 어 있 습 니 다.
자 바스 크 립 트 는 블록 별로 실행 되 기 때문에 자 바스 크 립 트 블록 에서 다음 블록 에 설 명 된 변수 나 함 수 를 호출 하면 문법 오 류 를 알려 줍 니 다. 예 를 들 어 자 바스 크 립 트 해석 기 가 아래 코드 를 실행 할 때 문법 오 류 를 알려 줍 니 다. 변수 a 가 정의 되 지 않 았 음 을 표시 합 니 다. 대상 f 를 찾 을 수 없습니다.

<script>
//alert(a);
f();
</script>
<script>
var a =1;
function f(){
    alert(1);
}
</script>

자 바스 크 립 트 는 블록 별로 실행 되 지만 블록 마다 같은 전역 역할 영역 에 속 합 니 다. 즉, 블록 간 의 변수 와 함 수 는 공유 할 수 있 습 니 다. 자 바스 크 립 트 는 블록 별로 실행 되 지만 블록 마다 같은 전역 역할 영역 에 속 합 니 다. 즉, 블록 간 의 변수 와 함 수 는 공유 할 수 있 습 니 다.(즉, 앞의 코드 블록 성명 의 함수 나 변 수 는 뒤의 코드 블록 에서 공유 할 수 있 습 니 다)
1.4  이벤트 메커니즘 을 빌려 자 바스 크 립 트 실행 순 서 를 바꾸다
페이지 를 사용 하여 이벤트 window. onload 를 초기 화 할 수 있 습 니 다. = function () {}, 마우스 이벤트, 키보드 이벤트, 시계 트리거 등 다양한 대화 이벤트 로 자바 스 크 립 트 코드 의 실행 순 서 를 바 꿀 수 있 습 니 다.