javascript 핵심 -- 해석 과정
8047 단어 JavaScript
하나의 문서 흐름 에 여러 개의 script 코드 세그먼트 (script 태그 로 구 분 된 js 코드 나 도 입 된 js 파일) 가 포함 되 어 있다 면, 실행 순 서 는 다음 과 같 습 니 다.
STEP 1. 첫 번 째 읽 기
코드 세그먼트 (js 실행 엔진 은 한 줄 한 줄 실행 프로그램 이 아니 라 한 줄 분석 하여 실 행 된 것)
단계 2. 하 다
문법 분석, 오류 가 있 으 면 문법 오류 (예 를 들 어 괄호 가 일치 하지 않 는 등) 를 보고 하고 5 단계 로 넘 어 갑 니 다.
STEP 3. var 변수 와 function 에 대한 정의 "
"예비 해석" (정확 한 성명 만 해석 하기 때문에 영원히 틀 리 지 않 습 니 다)
단계 4. 실행 코드 세그먼트,
오 류 는 오 류 를 보고 합 니 다 (예 를 들 어 변수 가 정의 되 지 않 았 습 니 다)
단계 5. 다음 코드 세그먼트 가 있다 면 다음 코드 세그먼트 를 읽 고 2 단 계 를 반복 합 니 다.
단계 6. 끝
javascript 해석 시 뮬 레이 션
1. 해석 할 js
/* （window） */
var i = 1,j = 2,k = 3;
function a(o,p,x,q){
var x = 4;
alert(i);
// a b, i,y
function b(r,s) {
var i = 11,y = 5;
alert(i);
// b c, z
function c(t){
var z = 6;
alert(i);
};
// b d
var d = function(){
alert(y);
};
c(60);
d();
};
b(40,50);
}
a(10,20,30);
2. 분석 트 리 만 들 기
위의 코드 는 매우 간단 합 니 다. 바로 전역 변수 와 전역 방법 을 정 의 했 습 니 다. 그 다음 에 방법 에서 국부 변수 와 국부 방법 을 정 의 했 습 니 다. 지금 JS 해석 기 는 이 코드 를 읽 고 해석 하기 시 작 했 습 니 다. 앞에서 언급 한 JS 엔진 은 문법 분석 과 예비 분석 을 통 해 문법 분석 트 리 를 얻 을 수 있 습 니 다. 문법 분석 트 리 가 어떻게 생 겼 는 지 에 대해 어떤 정보 가 있 습 니까?
다음은 간단 한 구조 로 JS 대상 (여러 대상 간 의 인용 관 계 를 명확 하 게 표시 하기 위해 여 기 는 가짜 대상 만 표시 하고 실행 할 수 없 을 수도 있 습 니 다) 을 묘사 하여 문법 분석 트 리 (이것 은 우리 가 비교적 익숙 한 것 입 니 다. 실제 구 조 는 깊이 연구 하지 않 고 훨씬 복잡 할 것 입 니 다. 여 기 는 해석 과정 을 이해 하 는 데 도움 을 주기 위해 특별히 간소화 한 것 입 니 다) 를 설명 합 니 다.
/**
* ， function
*/
var SyntaxTree = {
//
window: {
variables:{
i:{ value:1},
j:{ value:2},
k:{ value:3}
},
functions:{
a: this.a
}
},
a:{
variables:{
x:'undefined'
},
functions:{
b: this.b
},
scope: this.window
},
b:{
variables:{
y:'undefined'
},
functions:{
c: this.c,
d: this.d
},
scope: this.a
},
c:{
variables:{
z:'undefined'
},
functions:{},
scope: this.b
},
d:{
variables:{},
functions:{},
scope: {
myname:d,
scope: this.b
}
}
};
위 는 바로 문법 분석 트 리 에 대한 간단 한 표현 이다. 앞에서 분석 한 바 와 같이 문법 분석 트 리 는 각 function 의 변수 집합 (variables), 방법 집합 (functions) 과 역할 영역 (scope) 을 기록 했다.
문법 분석 트 리 관건
변수 집합 (variables) 에서,
변수 만 정의 되 고 변수 값 이 없습니다. 이때 변수 값 은 모두 "undefined" 입 니 다.
작용 역 (scope), 어법 작용 역 의 특징 에 따라 이때
모든 변수의 역할 영역 은 실행 시의 환경 에 따라 바 뀌 지 않 고 명확 해 졌 다.[무슨 뜻 일 까요? 우 리 는 항상 하나의 방법 을 return 한 다음 에 다른 방법 에서 실행 합 니 다. 실행 할 때 방법 에서 변수의 역할 도 메 인 은 방법 에 따라 정 의 될 때의 역할 도 메 인 입 니 다. 사실 여기 서 표현 하고 자 하 는 뜻 은 아무리 복잡 하고 먼 곳 에서 이 방법 을 실행 하 더 라 도 최종 적 으로 방법 에서 변수 가 접근 할 수 있 는 지, 되 돌아 갈 수 있 는 지 를 판단 하 는 것 입 니 다.방법 이 정 의 된 곳 으로 가서 확인 하 세 요.]
역할 영역 (scope) 생 성 규칙:
a. 함수 성명 과 익명 함수 표현 식 에 있어 서 [scope] 는 생 성 시의 역할 영역 입 니 다.
b. 이름 이 있 는 함수 표현 식 에 대해 [scope] 상단 은 새로운 JS 대상 (즉 Object. prototype 을 계승 한 것) 입 니 다. 이 대상 은 두 가지 속성 이 있 습 니 다. 첫 번 째 는 자신의 이름 이 고 두 번 째 는 정 의 된 역할 영역 입 니 다. 첫 번 째 함수 이름 은 함수 내부 의 코드 가 자신의 함수 이름 에 잘못 접근 하여 재 귀 할 수 있 도록 하 는 것 입 니 다.
3. 실행 환경
문법 분석 이 완료 되 어 코드 를 실행 하기 시작 합 니 다.우리 가 모든 방법 을 호출 할 때 JS 엔진 은 자동 으로 실행 환경 과 활동 대상 을 구축 합 니 다. 그들 은 방법 인 스 턴 스 의 생명 주기 와 일치 하고 방법 집행 에 필요 한 실행 지원 을 제공 합 니 다. 위의 몇 가지 방법 에 대해 우 리 는 모두 활동 대상 을 만 들 었 습 니 다.(이 치 는 방법 을 실행 할 때 만 활동 대상 을 생 성 하 는 것 이다. 프레젠테이션 을 편리 하 게 하기 위해 모든 방법의 활동 대상 을 단번에 정의 했다) 구체 적 으로 다음 과 같다.
/**
* :
*/
var ExecutionContext = {
window: {
type: 'global',
name: 'global',
body: ActiveObject.window
},
a:{
type: 'function',
name: 'a',
body: ActiveObject.a,
scopeChain: this.window.body
},
b:{
type: 'function',
name: 'b',
body: ActiveObject.b,
scopeChain: this.a.body
},
c:{
type: 'function',
name: 'c',
body: ActiveObject.c,
scopeChain: this.b.body
},
d:{
type: 'function',
name: 'd',
body: ActiveObject.d,
scopeChain: this.b.body
}
}
위의 모든 방법의 실행 환경 은 해당 방법의 유형 (function), 방법 이름 (funName), 활동 대상 (ActiveObject), 역할 도 메 인 체인 (scopeChain) 등 정 보 를 저장 하고 그 관건 은 다음 과 같다.
body 속성, 현재 방법의 활동 대상 을 직접 가리 키 기
scopeChain 속성, 역할 도 메 인 체인 은 링크 구조 로 문법 분석 트 리 에서 현재 방법 에 따라 대응 합 니 다.
scope 속성 은 scope 에 대응 하 는 방법의 활동 대상 (ActivceObject) 을 가리 키 며 변 수 를 찾 는 것 은 이 체인 을 따라 찾 는 것 입 니 다.
4. 이벤트 대상
/**
* ：
*/
var ActiveObject = {
window: {
variables:{
i: { value:1},
j: { value:2},
k: { value:3}
},
functions:{
a: this.a
}
},
a:{
variables:{
x: {value:4}
},
functions:{
b: SyntaxTree.b
},
parameters:{
o: {value: 10},
p: {value: 20},
x: this.variables.x,
q: 'undefined'
},
arguments:[this.parameters.o,this.parameters.p,this.parameters.x]
},
b:{
variables:{
y:{ value:5}
},
functions:{
c: SyntaxTree.c,
d: SyntaxTree.d
},
parameters:{
r:{value:40},
s:{value:50}
},
arguments:[this.parameters.r,this.parameters.s]
},
c:{
variables:{
z:{ value:6}
},
functions:{},
parameters:{
u:{value:70}
},
arguments:[this.parameters.u]
},
d:{
variables:{},
functions:{},
parameters:{},
arguments:[]
}
}
위의 모든 활동 대상 은 해당 방법의 내부 변수 집합 (variables), 내장 함수 집합 (functions), 형 삼 (parameters), 실 삼 (arguments) 등 실행 에 필요 한 정 보 를 저장 하고 활동 대상 의 관건 점
활성 대상 을 만 들 고 문법 분석 트 리 복사 방법의 내부 변수 집합 (variables) 과 내장 함수 집합 (functions) 을 만 듭 니 다.
방법 이 실행 되 기 시 작 했 습 니 다. 활동 대상 의 내부 변수 집합 은 모두 undefined 로 초기 화 되 었 습 니 다.
형 삼 (parameters) 과 실 삼 (arguments) 대상 을 만 들 고,
동명 의 실 삼, 형 삼 과 변수 사 이 는 [인용] 관계 이다.
실행 방법 내의 할당 문 구 를 실행 해 야 변수 가 집 중 된 변 수 를 할당 처리 할 수 있 습 니 다.
변수 찾기 규칙 은 현재 실행 환경의 ActiveObject 에서 먼저 찾 습 니 다. 찾 지 못 하면 실행 환경 에 따라 속성 을 찾 습 니 다.
ScopeChain 이 가리 키 는 ActiveObject 에서 글로벌 Object (window) 까지 찾 습 니 다.
방법 이 실 행 된 후 내부 변수 값 은 리 셋 되 지 않 습 니 다. 변수 가 언제 소각 되 는 지 다음 을 참고 하 십시오.
방법 내 변수의 생존 주 기 는 방법 인 스 턴 스 에 활동 인용 이 존재 하 는 지 여부 에 달 려 있 으 며, 없 으 면 활동 대상 을 소각 합 니 다.
6 과 7 은 패 킷 을 외부 변수 에 접근 할 수 있 게 하 는 근본 적 인 원인 이다.
이상 의 내용 은 대부분 인터넷 으로 옮 겨 져 개인 오리지널 이 아니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
