자 바스 크 립 트 실행 상하 문 에 대한 전면적 인 이해

이 글 에서 상하 문 C 자 바스 크 립 트 를 실행 하 는 데 있어 가장 기본 적 이 고 가장 중요 한 개념 을 비교적 깊이 있 게 논술 할 것 이다.이 글 을 다 읽 으 면 자바 script 엔진 내부 에서 코드 를 실행 하기 전에 무엇 을 했 는 지,왜 일부 함수 와 변 수 는 설명 되 기 전에 사용 할 수 있 는 지,그리고 그들의 최종 값 이 어떻게 정의 되 었 는 지 알 게 될 것 입 니 다.
문맥
Javascript 에서 코드 의 운행 환경 은 다음 과 같은 세 가지 로 나 뉜 다.
전역 단계 의 코드 C 는 기본 코드 실행 환경 입 니 다.코드 가 불 러 오 면 엔진 이 가장 먼저 들 어 오 는 환경 입 니 다.
함수 등급 의 코드 C 는 함 수 를 실행 할 때 함수 체 의 코드 를 실행 합 니 다.
Eval 의 코드 C 가 Eval 함수 에서 실행 되 는 코드 입 니 다.
인터넷 에서 역할 영역 을 논술 하 는 자원 을 많이 찾 을 수 있 습 니 다.이 글 을 이해 하기 위해 우 리 는'상하 문 실행'을 현재 코드 의 운행 환경 이나 역할 영역 으로 볼 수 있 습 니 다.다음은 전역 및 함수 단계 의 실행 상하 문 을 포함 하 는 예 시 를 살 펴 보 겠 습 니 다.

위의 그림 에서 모두 4 개의 상하 문 을 사용한다.보라색 은 전체 국면 을 대표 하 는 문맥 입 니 다.녹색 은 person 함수 내의 상하 문 을 대표 합 니 다.파란색 과 주황색 은 person 함수 내의 다른 두 함수 의 상하 문 을 대표 한다.어떤 경우 에 도 하나의 전체적인 컨 텍스트 만 존재 합 니 다.이 컨 텍스트 는 다른 컨 텍스트 에 접근 할 수 있 습 니 다.즉,person 의 컨 텍스트 에서 전체 컨 텍스트 의 sayHello 변 수 를 방문 할 수 있 습 니 다.물론 함수 firstName 이나 lastName 에서 도 이 변 수 를 방문 할 수 있 습 니 다.
함수 컨 텍스트 의 개 수 는 제한 이 없습니다.하나의 함 수 를 호출 할 때마다 엔진 은 함수 컨 텍스트 를 자동 으로 새로 만 듭 니 다.다시 말 하면 부분 적 인 역할 도 메 인 을 새로 만 들 고 이 부분 적 인 역할 도 메 인 에서 개인 변 수 를 설명 할 수 있 습 니 다.외부 컨 텍스트 에 서 는 이 부분 적 인 역할 도 메 인 안의 요 소 를 직접 방문 할 수 없습니다.상기 예 에서 내부 함 수 는 외부 문맥 에 있 는 성명 의 변 수 를 방문 할 수 있 고 그렇지 않 으 면 통 하지 않 습 니 다.그렇다면 이 는 도대체 무슨 이유 일 까?엔진 내 부 는 어떻게 처리 합 니까?
상하 문 스 택 실행
브 라 우 저 에서 자바 script 엔진 의 작업 방식 은 단일 스 레 드 입 니 다.즉,어느 순간 유일한 사건 만 활성화 되 어 처리 되 고 다른 사건 은 대기 열 에 넣 어 처 리 될 때 까지 기다 리 는 것 이다.다음 예제 도 는 이러한 스 택 을 설명 합 니 다.

자바 script 코드 파일 이 브 라 우 저 에 불 러 온 후에 기본 값 으로 가장 먼저 들 어 가 는 것 은 전체 실행 컨 텍스트 라 는 것 을 알 고 있 습 니 다.전체 컨 텍스트 에서 함 수 를 호출 할 때 프로그램 흐름 은 호출 된 함수 에 들 어 갑 니 다.이 때 엔진 은 이 함수 에 새로운 실행 컨 텍스트 를 만 들 고 컨 텍스트 스 택 의 맨 위 에 눌 러 줍 니 다.브 라 우 저 는 현재 스 택 상단 에 있 는 컨 텍스트 를 항상 실행 합 니 다.실행 이 완료 되면 스 택 상단 에서 팝 업 된 다음 아래 컨 텍스트 실행 코드 에 들 어 갑 니 다.이렇게 하면 스 택 의 컨 텍스트 가 전체 컨 텍스트 로 돌아 갈 때 까지 순서대로 실행 되 고 스 택 이 팝 업 됩 니 다.다음 예 를 보십시오.

(function foo(i) {
   if (i === 3) {
    return;
   }
   else {
    foo(++i);
   }
  }(0));

상기 foo 가 성명 되 었 을 때()연산 자 를 통 해 강제로 직접 실행 되 었 습 니 다.함수 코드 는 그 자신 을 세 번 호출 한 것 으로 매번 국부 변수 i 가 1 증가 합 니 다.foo 함수 가 자신 에 게 호출 될 때마다 새로운 실행 컨 텍스트 가 생 성 됩 니 다.상하 문 이 실 행 될 때마다 이 상하 문 은 다시 전체 상하 문 으로 돌아 갈 때 까지 창 고 를 팝 업 하고 이전 상하 문 으로 돌아간다.실제 과정 은 다음 그림 과 같이 추상 적 이다.

이 를 통 해 알 수 있 듯 이 상하 문 이라는 추상 적 인 개념 을 집행 하 는 데 있어 다음 과 같은 몇 가지 로 요약 할 수 있다.
단일 스 레 드
동기 실행
유일한 전역 상하 문
함수 의 실행 문맥 의 개 수 는 제한 이 없습니다.
어떤 함수 가 호출 될 때마다 새로운 실행 컨 텍스트 가 생 성 됩 니 다.호출 된 자체 함수 라 도 마찬가지 입 니 다.
상하 문장의 구축 과정 을 실행 하 다
함수 가 호출 될 때마다 새로운 실행 컨 텍스트 가 만들어 진 다 는 것 을 우 리 는 이미 알 고 있다.그러나 자바 script 엔진 내부 에서 이 문맥 의 생 성 과정 은 구체 적 으로 두 단계 로 나 뉜 다.
수립 단계(함수 호출 시 발생 하지만 함수 내 구체 적 인 코드 를 실행 하기 전에)
변수,함수,arguments 대상,매개 변수 만 들 기
역할 도 메 인 체인 구축
this 값 확인
코드 실행 단계:
변수 할당,함수 참조,기타 코드 실행
실제로 실행 상하 문 을 하나의 대상 으로 볼 수 있 으 며 그 아래 에는 상기 3 개의 속성 이 포함 되 어 있다.

 (executionContextObj = {
   variableObject: { /*     arguments  ,   ,             */ },
   scopeChain: { /* variableObject             variableObject */ },
   this: {}
   }

구축 단계 및 코드 실행 단계 에 대한 상세 한 분석
정확히 말 하면 상하 문 대상(상기 execution ContextObj)을 실행 하 는 것 은 함수 가 호출 될 때 이지 만 함수 체 가 실제로 실행 되 기 전에 만들어 진 것 이다.함수 가 호출 되 었 을 때,바로 내 가 상술 한 두 단계 중의 첫 번 째 단계 인 C 구축 단계 이다.이 시간 에 엔진 은 함수 의 매개 변수,성명 의 변수 와 내부 함 수 를 검사 한 다음 에 이 정 보 를 바탕 으로 상하 문 대상(executionContextObj)을 만 듭 니 다.이 단계 에서 variable Object 대상,역할 도 메 인 체인,그리고 this 가 가리 키 는 대상 이 모두 확 정 됩 니 다.
상기 첫 번 째 단계 의 구체 적 인 과정 은 다음 과 같다.
현재 컨 텍스트 의 호출 함수 코드 를 찾 습 니 다.
호출 된 함수 체 의 코드 를 실행 하기 전에 실행 컨 텍스트 를 만 들 기 시작 합 니 다.
첫 단계 진입-수립 단계:
variableObject 대상 만 들 기:
arguments 대상 을 만 들 고 현재 컨 텍스트 의 인 자 를 검사 하 며 이 대상 의 속성 과 속성 값 을 만 듭 니 다.
현재 컨 텍스트 의 함수 설명 검사:
함수 성명 을 찾 을 때마다 variableObject 아래 함수 이름 으로 속성 을 만 듭 니 다.속성 값 은 이 함수 가 메모리 에 있 는 주 소 를 가리 키 는 참조 입 니 다.
위 함수 이름 이 variable Object 에 존재 한다 면 해당 하 는 속성 값 은 새로운 참조 로 덮어 씁 니 다.
역할 영역 체인 초기 화
상하 문 에서 this 의 지향 대상 을 확정 하 다
코드 실행 단계:
함수 체 의 코드 를 실행 하고 한 줄 한 줄 코드 를 실행 하 며 variable Object 의 변수 속성 에 값 을 부여 합 니 다.
다음은 구체 적 인 코드 예 시 를 살 펴 보 겠 습 니 다.

 function foo(i) {
   var a = 'hello';
   var b = function privateB() {
  
   };
   function c() {
  
   }
  }
  
  foo(22);

foo(22)를 호출 할 때 구축 단 계 는 다음 과 같 습 니 다.

  fooExecutionContext = {
   variableObject: {
    arguments: {
     0: 22,
     length: 1
    },
    i: 22,
    c: pointer to function c()
    a: undefined,
    b: undefined
   },
   scopeChain: { ... },
   this: { ... }
  }

이 를 통 해 알 수 있 듯 이 구축 단계 에서 arguments,함수 의 성명,그리고 매개 변 수 는 구체 적 인 속성 값 을 부 여 받 았 고 다른 변수 속성 은 기본적으로 undefined 입 니 다.상기 구축 단계 가 끝나 면 엔진 은 코드 실행 단계 에 들 어 갑 니 다.이 단계 가 완 료 된 후에 상기 실행 컨 텍스트 대상 은 다음 과 같 습 니 다.

  fooExecutionContext = {
   variableObject: {
    arguments: {
     0: 22,
     length: 1
    },
    i: 22,
    c: pointer to function c()
    a: 'hello',
    b: pointer to function privateB()
   },
   scopeChain: { ... },
   this: { ... }
  }

코드 실행 단계 에서 만 변수 속성 이 구체 적 인 값 을 부여 하 는 것 을 볼 수 있 습 니 다.
부분 변수 역할 영역 향상 의 원인
인터넷 에서 이러한 정 리 를 볼 수 있 습 니 다.함수 에서 설명 한 변수 와 함수,그 역할 도 메 인 은 함수 상단 으로 향상 되 었 습 니 다.다시 말 하면 함수 체 에 들 어가 면 그 중에서 설명 한 변수 와 함수 에 접근 할 수 있 습 니 다.이것 은 옳 은 데,그 이 유 를 아 십 니까?당신 이 상술 한 설명 을 통 해 알 게 될 것 이 라 고 믿 습 니 다.근 데 여기 서 다시 분석 해 봐.
다음 코드 를 보십시오.

 (function() {
   console.log(typeof foo); // function pointer
   console.log(typeof bar); // undefined
  
   var foo = 'hello',
    bar = function() {
     return 'world';
    };
  
   function foo() {
    return 'hello';
   }
  
  }());​

상기 코드 는 익명 함 수 를 정의 하고()연산 자 를 통 해 강제 적 으로 실행 합 니 다.그러면 이 럴 때 실행 컨 텍스트 가 생 성 될 것 이라는 것 을 알 고 있 습 니 다.예 를 들 어 foo 와 bar 변 수 를 바로 방문 할 수 있 고 type:of 를 통 해 foo 를 함수 로 참조 할 수 있 습 니 다.bar 는 undefined 입 니 다.
왜 우 리 는 foo 변 수 를 설명 하기 전에 foo 에 접근 할 수 있 습 니까?
상하 문장의 구축 단계 에서 먼저 arguments,파 라미 터 를 처리 하고 그 다음은 함수 의 성명 이 며 마지막 은 변수의 성명 이기 때문이다.그러면 foo 함수 의 성명 을 발견 하면 variable Object 아래 에 foo 속성 을 만 듭 니 다.그 값 은 지향 함수 의 참조 입 니 다.변수 성명 을 처리 할 때 var foo 의 성명 이 있 는 것 을 발 견 했 지만 variable Object 는 foo 속성 을 가지 고 있 기 때문에 바로 건 너 뛰 었 습 니 다.코드 실행 단계 에 들 어 갔 을 때 foo 속성 에 접근 할 수 있 습 니 다.이미 존재 하고 함수 참조 이기 때 문 입 니 다.
왜 바 가 undefined 인가요?
bar 는 변수의 성명 이기 때문에 구축 단계 에서 부 여 된 기본 값 은 undefined 입 니 다.코드 실행 단계 에서 만 구체 적 인 값 을 부여 하기 때문에 type of(bar)를 호출 할 때 출력 하 는 값 은 undefined 입 니 다.
자,여기까지 입 니 다.상하 문 을 집행 하 는 것 에 대해 이해 해 야 한다 고 믿 습 니 다.이 상하 문 을 집행 하 는 개념 은 매우 중요 합 니 다.반드시 잘 이해 해 야 합 니 다!
이상 의 이 편 은 자 바스 크 립 트 의 상하 문 에 대한 전면적 인 이 해 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 저희 도 많이 응원 해 주시 기 바 랍 니 다.