자바스크립트 컴파일 과정

Javascript는 브라우저에만 국한되지 않고 Node.js, 모바일 터미널, 데스크톱 터미널, 임베디드 디바이스 등 다양한 애플리케이션 시나리오에서 널리 사용되는 웹 개발에 필수적인 기술이 되었습니다. Javascript를 실행하는 동안 매우 중요한 개념이 있는데, 바로 컴파일 과정이다. 이번 글에서는 컴파일 과정의 관점에서 자바스크립트의 실행과정을 소개하겠습니다.

편집 과정은 어떻게 되나요?

컴파일 프로세스는 소스 코드를 실행 가능한 코드로 변환하는 프로세스입니다. Javascript에서 컴파일 프로세스는 구문 분석 단계와 실행 단계의 두 단계로 나눌 수 있습니다.

파싱 단계

파싱 단계는 어휘 분석과 구문 분석의 두 부분으로 나뉩니다.

어휘 분석

어휘 분석의 작업은 소스 코드를 언어의 가장 작은 단위인 어휘 단위(토큰)로 분해하는 것입니다. 어휘 단위에는 키워드(예: 함수, var), 식별자(예: 변수 이름 및 함수 이름) 및 연산자(예: +, -, *, / 등)가 포함됩니다.

예를 들어 다음은 간단한 함수 선언입니다.

function add(x, y) {
  return x + y;
}

이 함수 선언은 다음 어휘 단위로 분해됩니다.

Keyword 'function'
Identifier 'add'
Punctuator '('
Identifier 'x'
Punctuator ','
Identifier 'y'
Punctuator ')'
Punctuator '{'
Keyword 'return'
Identifier 'x'
Punctuator '+'
Identifier 'y'
Punctuator ';'
Punctuator '}'

문법 분석

문법 분석 작업은 어휘 단위를 추상 구문 트리로 변환하는 것입니다. (AST) . 추상 구문 트리는 코드의 구문 구조를 트리 구조로 표현한 데이터 구조입니다. 각 노드는 문법 구조의 구성을 나타내고 하위 노드는 구성의 하위 구성을 나타냅니다.

예를 들어, 위 함수 선언의 경우 생성된 추상 구문 트리는 다음과 같습니다.

{
  "type": "FunctionDeclaration",
  "id": {
    "type": "Identifier",
    "name": "add"
  },
  "params": [
    {
      "type": "Identifier",
      "name": "x"
    },
    {
      "type": "Identifier",
      "name": "y"
    }
  ],
  "body": {
    "type": "BlockStatement",
    "body": [
      {
        "type": "ReturnStatement",
        "argument": {
          "type": "BinaryExpression",
          "operator": "+",
          "left": {
            "type": "Identifier",
            "name": "x"
          },
          "right": {
            "type": "Identifier",
            "name": "y"
          }
        }
      }
    ]
  }
}

실행 단계

파싱 단계가 완료된 후 Javascript 프로그램은 실행 단계에 들어갑니다. 실행 단계의 작업은 추상 구문 트리를 실행하는 것입니다.

추상 구문 트리를 실행하는 프로세스는 사전 컴파일과 실행의 두 단계로 나눌 수 있습니다.

사전 컴파일

사전 컴파일 작업은 변수 및 함수 선언을 처리하는 것입니다. 실행 단계가 시작되기 전에 Javascript 엔진은 프로그램의 추상 구문 트리를 스캔하고 현재 범위에 해당 변수와 함수를 생성합니다. 이 프로세스를 범위 전처리라고 합니다.

먼저 모든 함수 선언이 고급화되었습니다. 이 프로세스를 함수 선언 호이스팅이라고 합니다. 함수 선언 호이스팅의 핵심은 함수 이름과 함수 본문을 현재 범위의 최상위로 올려 함수가 선언되기 전에 함수를 호출할 수 있도록 하는 것입니다.

예를 들어 다음 코드:

add(1, 2);

function add(x, y) {
  return x + y;
}

는

function add(x, y) {
  return x + y;
}

add(1, 2);

와 동일합니다. 둘째, 모든 변수를 미리 선언하는 과정을 변수 호이스팅이라고 합니다. 변수 승격은 변수 선언만 승격하고 변수 할당 문은 승격하지 않는다는 점에 유의해야 합니다.

예를 들어 다음 코드:

console.log(a);
var a = 1;

는

var a;
console.log(a);
a = 1;

Execution

과 동일합니다. 실행 프로세스는 명령문이 나타나는 순서대로 실행됩니다. 실행 중에 변수가 할당되고, 함수가 호출되며, 코드 블록이나 함수에 따라 범위가 지정될 수 있습니다.

요약

Javascript의 컴파일 과정에는 파싱 단계와 실행 단계가 포함됩니다. 구문 분석 단계에는 어휘 분석 및 구문 분석이 포함되고 실행 단계에는 사전 컴파일 및 실행이 포함됩니다. 실행 단계 이전에 자바스크립트 엔진은 범위를 전처리하고, 함수 선언 호이스팅과 변수 호이스팅을 수행한 후, 명령문이 나타나는 순서대로 코드를 실행합니다.

위 내용은 자바스크립트 컴파일 과정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!