자바스크립트 작동 방식

亚连원래의: 2018-06-06 14:56:021589검색

이 기사에서는 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);
```

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 변수 선언 찾기

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 여러분에게 도움이 되기를 바랍니다.

자바스크립트 작동 방식

생성 단계

실행 단계

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

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

관련 기사