집 > 기사 > 웹 프론트엔드 > JavaScript 작동 방식에 대한 자세한 설명

JavaScript 작동 방식에 대한 자세한 설명

小云云원래의: 2018-02-11 09:31:533864검색

이 글은 주로 JavaScript의 작동 원리에 대한 자세한 이론적 분석과 지식 포인트 공유를 제공합니다. 이에 관심이 있으시면 꼭 배워보세요.

JavaScript는 객체 기반의 동적, 약한 유형의 스크립팅 언어(이하 JS)입니다. 이는 Java/C++ 및 기타 컴파일된 언어와 같은 다른 프로그래밍 언어와 다릅니다. 전체 기사가 먼저 컴파일되고 바이트 코드(머신 코드)로 컴파일됩니다. 그런 다음 실행하십시오. JS는 이를 수행하지 않으며 중간 코드로 컴파일할 필요가 없지만 브라우저에서 직접 실행할 수 있습니다. JS 실행 프로세스는 컴파일과 실행의 두 단계로 나눌 수 있습니다. (JS You Don't Know 책을 참고하세요) JS 컨트롤러가 실행 가능한 코드 조각으로 전환되면(이 실행 가능한 코드는 컴파일 단계에서 생성됩니다) 해당 실행 컨텍스트(Excution)가 생성됩니다. EC로 축약된 컨텍스트). 실행 컨텍스트는 실행 환경으로 이해될 수 있습니다(실행 컨텍스트는 JS 인터프리터에서만 생성되고 JS 인터프리터에서만 사용할 수 있습니다. 사용자는 '객체'를 조작할 수 없습니다).

JS의 실행 환경은 세 가지 범주로 나뉩니다.

전역 환경: JS 엔진이 코드 블록에 들어갈 때 3f1c4e4b6b16bbbd69b2ee476dc4f83axxx2cacc6d41bbb37262a98f745aa00fbf0 전역 실행 환경
함수 환경: 함수 호출 시 함수 내부에 함수 실행 환경이 형성됩니다
eval(): 문자열을 JS 코드로만 실행하는 것은

권장되지 않습니다.

JS 코드에서는 여러 실행 컨텍스트가 생성될 수 있습니다. JS에서는 스택과 같은 데이터 구조를 사용하여 실행 컨텍스트를 관리합니다. "선입, 후, 후". 이러한 종류의 스택을 함수 호출 스택이라고 합니다.

실행 컨텍스트의 특징

스택의 맨 아래에는 항상 전역 실행 컨텍스트가 있습니다.
전역 실행 컨텍스트는 브라우저가 닫힐 때만 스택을 팝업합니다
기타 실행 컨텍스트
개수에는 제한이 없습니다. 스택의 맨 위는 항상 현재 활성 실행 컨텍스트이고 나머지는 실행이 완료되면 즉시 스택이 팝되며, 그런 다음 제어는 다음 실행 컨텍스트로 반환됩니다.
함수는 각 함수에만 있습니다. 함수가 호출될 때만 실행 컨텍스트가 생성됩니다.

실행 컨텍스트는 일반적인 JS 객체로 생생하게 이해될 수 있습니다. 실행 컨텍스트의 수명 주기는 대략 두 단계로 구성됩니다.

생성 단계

이 단계는 주로 세 가지 이벤트를 완료합니다. 1. 변수 객체 생성 2. , 스코프 체인 설정 3. 이 단계의 요점을 결정합니다

실행 단계

이 단계는 주로 변수 할당, 함수 호출 및 기타 작업을 완료합니다.

변수 객체 생성 프로세스(VO)

1. 함수 매개변수에 대한 인수 객체 생성 및 초기화, 초기값이 정의되지 않은 인수 객체에 속성 "0", "1", "2", "3" 및 기타 속성을 추가하고 인수.길이 값을 설정합니다. 전달된 실제 매개변수 수에 적용됩니다.
2. 함수 함수 선언을 찾아 변수 개체에 속성을 추가합니다. 속성 이름은 함수 이름이고 속성 값은 해당 함수의 참조 값입니다. 직접
3.var 변수 선언 찾기(변수 검색 시 함수의 매개변수는 var 선언과 동일하므로 매개변수 이름과 동일한 속성이 VO에 추가되며 초기값은 변수 객체에 속성을 추가합니다. 속성 값은 정의되지 않습니다. 동일한 이름의 식별자(함수, 변수)가 있으면 처리되지 않습니다. 동일한 이름이 존재하면 함수가 변수보다 우선순위가 더 높습니다. 변수 개체(OV)와 활성화 개체(AO)는 동일한 것입니다. 두 이름은 서로 다릅니다. 생성 기간에는 변수 개체, 실행 기간에는 활성화 개체라고 합니다.
실행 컨텍스트의 구조는 대략 다음과 같습니다.

var g_name="tom";
var g_age=20;
function g_fn(num){
 var l_name="kity";
 var l_age=18;
 function l_fn(){
  console.log(g_name + &#39;===&#39; + l_name + &#39;===&#39; + num);
 }
}
g_fn(10);

일단 실행 컨텍스트는 다음과 같습니다. 생성되면 즉시 함수 호출 스택에 푸시됩니다. 이 때 인터프리터는 조용히 현재 VO에 함수를 추가합니다. 위의 스코프 체인을 가리키는 내부 속성 [[scope]]입니다.

G_EC = {
 VO   : {},
 Scope_chain : [],
 this  : {}
}

/* VO的结构大概 */
VO = {
 g_name : undefined,
 g_age : undefined,
 g_fn : <函数在内存中引用值>
}

/* Scope_chain的大概结构如下 */
Scope_chain = [ G_EC.VO ] // 数组中第一个元素是当前执行上下文的VO，第二个是父执行上下文的VO,最后一个是全局执行上下文的VO,在执行阶段，会沿着这个作用域链一个一个的查找标识符，如果查到则返回，否知一直查找到全局执行上下文的VO

/* this */
this = undefined // 此时this的值是undefined

실행 단계

코드는 한 줄씩 실행됩니다. 표현식이 발견되면 현재 범위 체인에서 VO 객체를 검색합니다. 찾을 수 없으면 전역 VO 객체가 종료될 때까지 VO 객체를 계속 검색합니다.

이 단계에는 변수 할당, 함수 호출 및 기타 작업이 포함될 수 있습니다. 인터프리터는 g_fn()을 발견하면 이것이 함수 호출이라는 것을 알고 즉시 이에 대한 함수 실행 컨텍스트인 fn_EC를 생성합니다.

두 단계는 생성 단계와 실행 단계입니다.

생성 단계에서 함수 실행 컨텍스트의 경우 변수 개체를 생성할 때 추가 인수 개체가 생성된 다음 인수 개체에 "0", "1", "2" 속성이 추가됩니다. 값이 정의되지 않았습니다.

함수 함수 선언 찾기
var 변수 선언 찾기

JavaScript 작동 방식에 대한 자세한 설명

생성 단계

실행 단계

변수 객체 생성 프로세스(VO)

코드는 한 줄씩 실행됩니다. 표현식이 발견되면 현재 범위 체인에서 VO 객체를 검색합니다. 찾을 수 없으면 전역 VO 객체가 종료될 때까지 VO 객체를 계속 검색합니다.

관련 기사