만화로 JavaScript를 이해하는 엔진

* Codeburst에서 최초로 발표되었습니다.라지 아인라(Raji Ayinla)의 io는 코드를 어떻게 개발하는지 알고 있다.일반 도메인 이름 형식입니다.JavaScript를 재미있는 방식으로 배우고 싶으세요?다음은 howtocodejs를 살펴보겠습니다.일반 도메인 이름 형식입니다.

개요

JavaScript가 컴파일되었습니다.네, 잘 읽었어요.그러나 초기 최적화를 허용하는 구축 단계를 가진 다른 언어 컴파일러와 달리 자바스크립트 컴파일러는 마지막 초에 코드를 컴파일해야 한다 - 표면상JavaScript를 컴파일하는 기술은 실시간 (JIT) 으로 적절히 명명되었습니다.이러한'인스턴트 컴파일'은 브라우저를 가속화하기 위해 현대 자바스크립트 엔진에 나타난다.
개발자가 자바스크립트를 해석 언어라고 할 때 약간 곤혹스러울 수 있다.최근까지 JavaScript 엔진이 해석기와 연결되어 있었기 때문이다.이제 구글 V8 엔진 같은 엔진이 생기면 개발자도 케이크를 먹을 수 있다 - 엔진은 해석기와 컴파일러를 동시에 가지고 있다.
새로운 JIT 컴파일러 중 하나로 JavaScript 코드를 처리하는 방법을 보여 드리겠습니다.새로운 JavaScript 엔진 최적화 코드의 복잡한 메커니즘을 보여 드리지 않겠습니다.이러한 메커니즘은 내연 (공백 삭제), 숨겨진 클래스 이용, 군더더기 제거 등 기술을 포함한다.반대로 본고는 컴파일링 이론의 광범위한 개념을 개괄하여 자바스크립트의 현대 엔진이 내부에서 어떻게 작동하는지 이해하도록 하겠습니다.
면책 성명: 당신은 코드 채식주의자가 될 수 있습니다.

언어와 코드

컴파일러가 코드를 어떻게 읽는지 탐구하기 위해 본문을 읽을 때 사용하는 언어를 생각해 보는 것이 도움이 된다. 영어다.우리는 모두 개발 컨트롤러에서 눈부신 빨간색 문법 오류를 겪은 적이 있지만, 우리가 머리를 긁어 잃어버린 번호를 찾았을 때, 우리는 노 촘스키에 대해 멈추지 않았을 것이다.촘스키는 구문을 다음과 같이 정의합니다.

"the study of principles and processes by which sentences are constructed in particular languages."

우리는 노엄 촘스키의 정의에 따라 내장 simplify(); 함수를 호출할 것이다.

simplify(quote, "grossly");

//Result: Languages order their words differently.

물론 촘스키는 자바스크립트와 루비가 아닌 독일어와 스와힐리어를 가리킨다.그러나 고급 프로그래밍 언어는 우리가 말하는 언어를 모델로 한다.본질적으로 자바스크립트 컴파일러는 이미 똑똑한 엔지니어들에게 자바스크립트를 읽는 것을 가르쳐 주었다. 마치 우리 부모님과 선생님이 우리의 뇌를 훈련시켜 문장을 읽는 것과 같다.
컴파일러에 대해 우리는 세 가지 언어학 연구 분야인 어휘 단원, 문법과 의미를 관찰할 수 있다.다시 말하면 단어의 의미와 그 관계를 연구하고 단어의 배열을 연구하며 문장의 의미를 연구한다(우리는 의미의 정의를 제한하여 우리의 목적에 적합하게 한다).
예를 들어 우리는 소고기를 먹었다.

어휘 단위

문장의 모든 단어가 어떻게 의미 단위로 분해되는지 주의하세요: We/ate/beef

문법

이 기본 문장은 문법상 주어/동사/목적어의 일치성을 따른다.모든 영어 문장은 반드시 이렇게 구성해야 한다고 가정합시다.왜?컴파일러는 반드시 엄격한 준칙에 따라 일을 해야만 문법 오류를 검출할 수 있기 때문이다.그래서 우리가 먹는 쇠고기는 이해할 수 있지만 너무 간단한 영어에서는 옳지 않다.

어의학

어의적으로 말하자면, 이 문장은 적당한 의의가 있다.우리는 과거에 많은 사람들이 소고기를 먹은 적이 있다는 것을 안다.우리는 이 문장을 We+beef-ate로 고쳐서 그 뜻을 없앨 수 있다.
이제 원본 영어 문장을 JavaScript 표현식으로 번역해 보겠습니다.

let sentence = "We ate beef";

어휘 단위

표현식은 어소로 분해할 수 있다: let/문장/=/'We sate beef'/;

문법

우리의 표현은 한 문장과 같아서 반드시 문법이어야 한다.JavaScript 및 대부분의 다른 프로그래밍 언어는 유형/변수/할당/값 순서를 따릅니다.유형은 컨텍스트에 따라 적용됩니다.만약 우리와 같이 유형 성명의 느슨함에 괴로워하신다면, "use strict"를 간단하게 추가할 수 있습니다.당신의 계획의 전 세계로'엄격히 사용';자바스크립트의 문법을 강제적으로 집행하는 전횡적인 문법학자이다.그것의 사용의 장점은 번거로움보다 크다.우리를 믿어라.

어의학

의미에서 말하자면, 우리의 코드는 우리의 기계가 최종적으로 컴파일러를 통해 이해될 것을 의미한다.코드에서 의미를 얻기 위해서는 컴파일러가 코드를 읽어야 합니다.우리는 다음 절에서 이에 대해 깊이 있게 연구할 것이다.
주: 상하문과 범위가 다르다.진일보한 해석은 본문의'범위'를 초과할 것이다.

좌/우

우리는 왼쪽에서 오른쪽으로 영어를 읽고, 컴파일러는 두 방향으로 코드를 읽는다.어떻게왼쪽(LHS) 찾기와 오른쪽(RHS) 찾기가 있습니다.그것들을 분해합시다.
왼쪽 찾기 초점은 작업의 왼쪽입니다.이것은 사실상 그것이 임무를 맡는 목표를 의미한다.LHS가 찾는 목표가 그 위치에서 변화할 수 있기 때문에 우리는 위치가 아니라 목표를 개념화해야 한다.그 밖에 부치는 부치 연산자를 명확하게 가리키지 않는다.
다음 예제를 참조하여 설명하십시오.\

function square(a){
    return a*a;
}
square(5);

함수 호출 트리거 a의 LHS 찾기. 왜?매개 변수로 5를 전달하면 은밀하게 값을 a에 부여할 수 있기 때문입니다. 목표는 첫 번째 위치를 통해 확정할 수 없습니다. 반드시 추정해야 합니다.
반면 RHS는 값 자체에 중점을 둡니다.따라서 만약에 우리가 이전 예시로 돌아가면 RHS 찾기는 표현식 a*a에서 a의 값을 찾을 것이다.
중요한 것은 이러한 검색은 컴파일의 마지막 단계, 즉 코드 생성 단계에서 발생한다는 것을 기억해야 한다.일단 그 단계에 이르면 우리는 한층 더 논술할 것이다.이제 컴파일러를 연구해 봅시다.

컴파일러

컴파일러를 육류 가공 공장으로 상상하면 코드를 우리 컴퓨터가 먹을 수 있거나 실행할 수 있다고 생각하는 몇 가지 메커니즘이 있다.이 예에서 우리는 표현식을 처리할 것이다.

분사기

우선, 영패 생성기는 코드를 영패라고 불리는 단원으로 분해한다.
그리고 이 영패들은 영패 부여기에 의해 식별된다.표기기가 이 언어에 속하지 않는 알파벳을 발견하면 어휘 오류가 발생합니다.기억해라, 이것은 문법 오류와 다르다.예를 들어, 만약 우리가 값 연산자가 아닌 @ 기호를 사용한다면, 영패 부여기는 @ 기호를 보고 "음...이 단어는 자바스크립트 사전에서 찾을 수 없습니다...모든 내용을 닫으십시오. 빨간색 코드입니다."라고 말할 것이다.
주의: 같은 시스템이 하나의 영패와 다른 영패 사이에 연결을 맺고 해석기처럼 그것들을 조합할 수 있다면, 그것은lexer로 간주될 것입니다.

해상도

해석기가 구문 오류를 찾습니다.오류가 없으면 해석 트리라고 불리는 데이터 구조에 영패를 포장합니다.컴파일하는 과정에서 이 점에서 자바스크립트 코드는 해석을 거친 다음에 의미 분석을 하는 것으로 여겨진다.마찬가지로 JavaScript 규칙을 따를 경우 AST(추상 구문 트리)라는 새로운 데이터 구조가 생성됩니다.
원본 코드를 중간 코드로 바꾸는 중간 절차가 있다 - 보통 바이트 - 통역사가 한 구절씩 번역하다.그런 다음 가상 시스템에서 바이트 코드를 실행합니다.
그리고 코드를 최적화시켰다.이것은 공백, 죽은 코드와 불필요한 코드를 삭제하고 많은 다른 최적화 과정을 포함한다.

코드 생성기

일단 코드가 최적화되면 코드 생성기의 작업은 중간 코드를 기계가 쉽게 이해할 수 있는 저급 어셈블리 언어로 바꾸는 것이다.이때 발전기는 다음을 담당합니다.
(1) 저급 코드가 원본 코드와 같은 명령을 유지하도록 확보
(2) 바이트 코드를 대상 시스템에 매핑
(3) 값이 레지스터나 메모리에 저장되어야 하는지, 그리고 어디에서 값을 검색해야 하는지를 결정한다.
코드 생성기가 LHS 및 RHS 검색을 수행하는 곳입니다.간단히 말해 LHS 찾기는 대상 값을 메모리에 쓰고 RHS 찾기는 메모리에서 값을 읽습니다.
만약 값이 캐시와 레지스터에 동시에 저장된다면, 생성기는 레지스터에서 값을 가져와 최적화해야 한다.메모리에서 값을 얻는 것이 가장 바람직하지 않은 방법일 것이다.
마지막으로...
(4) 명령의 실행 순서를 결정한다.

마지막 생각

JavaScript 엔진을 이해하는 또 다른 방법은 뇌를 보는 것입니다.이 글을 읽을 때, 뇌는 망막에서 데이터를 얻고 있다.이 데이터는 당신의 시신경에 의해 전송되며, 이 페이지의 반전 버전입니다.당신의 뇌는 이미지를 뒤집어서 해석할 수 있도록 컴파일합니다.
이미지를 뒤집고 착색하는 것 외에 당신의 뇌는 패턴을 식별하는 능력에 따라 공백을 메울 수 있다. 마치 컴파일러가 캐시 메모리에서 값을 읽는 능력과 같다.
따라서 만약 우리가 작성한다면, 우리의 사이트를 방문하십시오. 당신은 이 코드를 쉽게 실행할 수 있을 것입니다.
오, 렉스에게 안부 전해 주세요.Interactive JavaScript 편집기가 내장되어 있습니다.

리소스

제임스 앨런 팔레어의 컴파일러 분석
JS 1장 몰라요.
JavaScript의 작동 방식
컴파일러 디자인