브라우저는 JavaScript를 어떻게 구문 분석합니까? 분석 원리 소개-JS 튜토리얼-php.cn

브라우저는 JavaScript를 어떻게 구문 분석합니까? 분석 원리 소개

青灯夜游

풀어 주다： 2019-01-05 10:46:27

앞으로

4363명이 탐색했습니다.

브라우저는 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(){
                
             }
        }

로그인 후 복사

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:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            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逐行执行
                */
        </script>
    </body>
</html>

로그인 후 복사

예 2:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            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
//                }
        </script>
    </body>
</html>

로그인 후 복사

위는 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !

위 내용은 브라우저는 JavaScript를 어떻게 구문 분석합니까? 분석 원리 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!