브라우저는 JavaScript를 어떻게 구문 분석합니까? 분석 원리 소개
- 青灯夜游앞으로
- 2019-01-05 10:46:274355검색
브라우저는 JavaScript를 어떻게 구문 분석하나요? 이 글은 브라우저가 자바스크립트를 파싱하는 원리를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. [추천 동영상 튜토리얼: JavaScript 동영상 튜토리얼]
브라우저 구문 분석 JavaScript 원리 기능:
1. 약한 유형의 자바스크립트는 정의할 때 데이터 유형을 정의할 필요가 없습니다. 데이터 유형은 변수 값에 따라 결정됩니다.
var a = 10; //数字类型 var a = true //boolean类型
(강한 유형: 변수를 정의할 때 변수 유형을 정의해야 합니다. 예를 들어 java, C#에서는 int a = 10 boolean a = true 입니다. , 데이터 유형을 직접 결정)
3. 설명 실행,
javascript 실행 프로세스 1. 문법 감지
는 다음과 같은 기본적인 문법 오류가 있는지 확인하는 것입니다. 중국어, 키워드 오류...
2. 어휘분석(사전컴파일)
3. 라인별 실행
사전컴파일 과정(2가지 상황) 1. Global(함수 실행 제외 스크립트 태그의 코드 직접)
다음 데모를 예로 들어 보겠습니다.
console.log(a); console.log(b)
var a = 100;
console.log(a) var b = 200 var c = 300 function a(){
} function fun(){
}
실행 전: 1) 먼저 GO(전역 개체) 개체를 생성합니다. 볼 수 있지만
GO = { //自带的属性都不写
}
2) 및
변수 선언을 분석할 수 있습니다. 변수 이름은 속성 이름이고 값은 정의되지 않습니다.
GO = {
a : undefined,
b : undefined,
c : undefined
}
3) 함수 이름을 분석합니다. 속성 이름이고 값은 함수 본문입니다. 함수 이름과 변수 이름이 동일하면 무자비하게 덮어쓰게 됩니다.
GO = {
a : function a(){
},
b : undefined,
c : undefined,
fun : function fun(){
}
}
이때 GO가 사전 컴파일되고 어휘 분석이 완료됩니다. 끝납니다. 4) 한줄씩 실행하고, 분석하고(변수선언, 함수선언), 신경쓰지 말고 그냥 값만 할당(변수할당)
a赋了一次值,值改变为100
GO = {
a : 100,
b : undefined,
c : undefined,
fun : function fun(){
}
}
2,
local(함수실행시)
이 데모를 예시로 사용하세요: num = 100510)
1), 사전 컴파일 시간 GO = {
num : undefined,
fun : function
} 2), 실행 프로세스
GO = {
num : 100,
fun : function
}
3), 함수 호출은 자체 범위(AO: 활성 개체), AO 활성 개체도 생성합니다. . 실행 직전에 생성된 함수가 호출되면 여러 개의 함수 호출이 있는 경우 함수가 실행되기 직전에 AO 활성 객체
fun.AO = {
}
ⅱ가 생성됩니다. 분석 매개변수, 객체로서의 형식 매개변수 속성 이름, 실제 매개변수는 객체
fun.AO = {
num : 5
}
ⅲ의 속성 값으로 사용됨, 분석 변수 선언, 변수 이름은 속성 이름, 속성이 동일한 경우 값은 정의되지 않음 AO 객체의 이름이 발견되면 변경되지 않습니다
fun.AO = {
num : 5
}
ⅳ, 분석 함수 선언, 함수 이름은 속성 이름이고 값은 함수 본문입니다. AO 객체에서 동일한 이름을 가진 속성이 발견되면. , 무자비하게 덮어쓰게 됩니다(여기에는 함수 선언이 없습니다. 건너뛰세요)
4) 한 줄씩 실행합니다
예:여기서 몇 가지 예를 살펴보겠습니다.
예 1: 76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
8019067d09615e43c7904885b5246f0a
console.log(test); //function
function test(test){
console.log(test); //function
var test = 123;
console.log(test); //123
function test(){
}
console.log(test); //123
var test = function(){}
console.log(test); //function
}
test(10);
var test = 456;
/*1.分析变量
GO={
test:undefined
}
2.分析函数{
test:function
}
3.逐行执行
第21行函数的调用
3.1test.AO={}
3.2参数
test.AO={
test:10
}
3.3变量声明
test.AO={
test:10
}
3.4函数的声明
test.AO={
test:function
}
4逐行执行
*/
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
예 2:
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
8019067d09615e43c7904885b5246f0a
function test(){
console.log(b); //undefined
if(a){ //undefined转换成false
var b = 100;
}
c = 123;
console.log(c); //123
}
var a;
test();
a = 20;
test();
console.log(c); //123
// 1.生成GO
// GO = {
//
// }
// 2.var
// GO = {
// a : undefined
// }
// 3.函数声明
// GO = {
// a : undefined,
// test : function
// }
// 4.逐行执行
// 4.1.1 18行,test调用,生成test.AO ={}
// 4.1.2 参数 没有,跳过
// 4.1.3 var
// test.AO = {
// b : undefined
// }
// 4.1.4 函数声明 没有,跳过
// 4.1.5 结果
// test.AO = {
// b : undefined
// }
// 4.1.6 逐行执行
// 14行,改变GO
// GO = {
// a : undefined,
// test : function,
// c : 123
// }
//
// 4.2 19行 a值发生了改变
// GO = {
// a : 20,
// test : function,
// c : 123
// }
//
// 4.3 20行,test调用 生成test.AO={}
// 4.3.1 参数 没有
// 4.3.2 变量声明
// test.AO = {
// b : undefined
// }
// 4.3.3 函数声明 没有
// 4.3.4 结果
// test.AO = {
// b : undefined
// }
// 4.3.5 逐行执行
// test.AO = {
// b : 100
// }
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
위는 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! ! 위 내용은 브라우저는 JavaScript를 어떻게 구문 분석합니까? 분석 원리 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!