>웹 프론트엔드 >JS 튜토리얼 >JavaScript 사전 해석이란 무엇입니까? JavaScript 사전 해석 구문 분석(코드 포함)

JavaScript 사전 해석이란 무엇입니까? JavaScript 사전 해석 구문 분석(코드 포함)

不言
不言앞으로
2018-11-16 14:58:231814검색

이 기사에서는 JavaScript 사전 해석이 무엇인지 설명합니다. JavaScript 사전 해석(코드 포함) 분석에는 특정 참고 가치가 있으므로 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

JavaScript는 해석된 언어입니다. JavaScript 코드를 실행하려면 두 단계가 필요합니다.

  • 컴파일 단계: 컴파일 단계는 흔히 JavaScript 사전 해석(전처리) 단계라고 부르는 단계입니다. JavaScript 스크립트 코드를 바이트코드로

  • 실행 단계: 컴파일 단계에서 JavaScript 인터프리터는 실행 환경을 사용하여 바이트코드에서 기계어 코드를 생성하고 위에서 아래로 순차적으로 실행합니다

이 기사에서는 Pre에 중점을 둡니다. -해석, 프레임워크 다이어그램은 다음과 같습니다.

JavaScript 사전 해석이란 무엇입니까? JavaScript 사전 해석 구문 분석(코드 포함)

1. 사전 해석이란

사전 해석: JavaScript 코드가 실행되기 전에 브라우저는 먼저 var 및 함수로 모두 미리 선언하거나 정의합니다. 기본적으로

1. 선언 및 정의 이해

선언(선언): 예를 들어, var num;=>는 변수가 선언되기만 하고 할당되지 않은 경우 전역 범위에 num 변수가 있음을 알려줍니다. 값, 기본값은 정의되지 않았습니다

정의(정의): 예를 들어 num=12;=>

2.var 및 function 키워드가 있는 경우 사전 해석 중에 작업이 다릅니다.

var => 사전 해석 중에만 미리 선언됩니다.

function => 사전 해석 중에 미리 선언됩니다. +정의가 모두 완료되었습니다

3. 사전 해석은 현재 범위에서만 발생합니다.

예를 들어 처음에는 window 아래의 항목만 사전 해석되고, 함수에 포함된 항목은 함수 실행 시에만 사전 해석됩니다.

2. 범위 체인

1. 그리고 전역 변수?

1) 전역 범위에 선언된 변수(사전 해석된 경우)는 전역 변수입니다

2) 함수 실행만 for(){}, if(){}와 같은 비공개 범위를 생성합니다. ){}는 비공개 범위를 생성합니다

3) "비공개 범위(var 선언)에 선언된 변수"와 "함수의 공식 매개변수"는 모두 비공개 변수입니다. 프라이빗 범위에서는 코드가 실행되고 변수가 발견되면 먼저 프라이빗 변수인지 여부를 확인해야 합니다. 현재 범위의 상위 범위 검색으로 이동합니다. 상위 범위가 없으면 창이 발견될 때까지 계속 검색합니다. 이것이 범위 체인입니다.

프라이빗 변수와 글로벌 변수를 구별하는 예를 들어보겠습니다:

//=>变量提升:var a;var b;var c;test=AAAFFF111;
var a=10,b=11,c=12;
function test(a){
//=>私有作用域:a=10 var b;
a=1;//=>私有变量a=1
var b=2;//=>私有变量b=2
c=3;//=>全局变量c=3
}
test(10);
console.log(a);//10
console.log(b);//11
console.log(c);//3

프라이빗 변수인지 판단하는 기준 중 하나는 함수에서 var로 선언한 변수와 함수의 형식 매개변수가 모두 프라이빗 변수인지 여부입니다. . 이 질문에서 테스트 함수에서 a는 형식 매개변수이고 var b에 의해 정의된 변수 b는 전용 변수입니다.

2. 함수 매개변수

함수가 실행되면 먼저 새로운 비공개 범위가 형성되고 다음 단계에 따라 실행되기 때문입니다.

1) 형식 매개변수가 있는 경우 할당 먼저 형식 매개변수 값을

2) Private 범위에서 사전 해석 수행

3) Private 범위의 코드는 위에서 아래로 실행됩니다

예제 질문을 살펴보겠습니다

var total=0;
function fn(num1,num2){
console.log(total);//->undefined 外面修改不了私有的
var total=num1 +num2;
console.log(total);//->300
}
fn(100,200);
console.log(total);//->0 私有的也修改不了外面的

3. JS에서의 메모리 분류

스택 메모리: JS 코드 실행을 위한 환경, 즉 범위(전역 범위/프라이빗 범위)를 제공하는 데 사용됩니다.
힙 메모리: 참조 데이터 유형의 값을 저장하는 데 사용됩니다. 객체는 속성 이름과 속성 값을 저장하고, 함수는 코드 문자열을 저장합니다.

3. 전역 범위에서 var와 var가 없는 경우의 차이점

먼저 다음 두 가지 예를 살펴보겠습니다.

//例题1
console.log(num);//->undefined
var num=12;
//例题2
console.log(num2);//->Uncaught ReferenceError:num2 is not defined 
num2=12;//不能预解释

var num=12를 보면 단순한 명령문이라고 생각할 수 있습니다. 그러나 JavaScript는 실제로 이를 두 개의 선언문으로 처리합니다: var num; 및 num=12; 첫 번째 정의문은 사전 해석 단계에서 작성됩니다. 두 번째 할당문은 실행 단계 를 기다리며 그대로 유지됩니다. num2=12는 num2라는 속성 이름을 window에 추가하는 것과 동일하며, 속성 값은 12이며, var num=12는 전역 변수 num을 전역 범위에 추가하는 것과 같습니다. 속성 이름은 num2이고 속성 값은 12입니다. 둘의 가장 큰 차이점은 var가 있는 것은 사전 해석이 가능하므로 할당 전에 실행하면 오류가 보고되지 않고, var가 없는 것은 사전 해석이 불가능하고 이전에 실행되면 오류가 보고된다는 것입니다.

아래 예를 들어보겠습니다.

//例题1
var total=0;
function fn(){
console.log(total);//undefined
var total=100;
}
fn();
console.log(total);//0
//例题2
var total=0;
function fn(){
console.log(total);//0
total=100;
}
fn();
console.log(total);//100

예제 1의 var 변수는 개인 범위에서 미리 해석될 수 있으므로 첫 번째 콘솔에서 인쇄되는 값은 정의되지 않습니다. private 범위에 나타나는 변수가 private이 아니면 상위 범위에서 검색하세요. 상위 범위가 없으면 window를 찾을 때까지 위쪽으로 계속 검색하세요. 예제 2에서는 없는 변수입니다. var는 비공개이므로 상위 범위를 찾아보세요

4. 사전 설명의 5가지 비윤리적 발현

1. 사전 설명 시에는 조건 성립 여부에 관계없이 var를 미리 선언해야 합니다.

다음 예시 질문을 살펴보세요:

if(!("num" in  window)){
var num=12;//这句话会被提到大括号之外的全局作用域:var num;->window.num; 
}
console.log(num);//undefined

2.预解释的时候只预解释”=”左边的,右边的值,不参与预解释

请看下面这道例题:

fn();//报错
var fn=function (){  //window下的预解释:var fn;
console.log("ok");
};

3.自执行函数:定义和执行一起完成了。

自执行函数定义的那个function在全局作用域下不进行预解释,当代码执行到这个位置的时候定义和执行一起完成了。常见有以下几种形式:

(function(num){})(10);
~function(num){}(10);
+function(num){}(10);
-function(num){}(10);
!function(num){}(10);

4.函数体中return下面的代码虽然不再执行了,但是需要进行预解释;return后面跟着的都是我们返回的值,所以不进行预解释;

function fn(){
//预解释:var num;
console.log(num);//->undefined
return function(){};
var num=100;
}

5.函数声明和变量声明都会被提升。但是一个值得注意的细节(这个细节可以出现在有多个“重复”声明的代码中)是函数会首先被提升,然后才是变量。在预解释的时候,如果名字已经声明过了,不需要从新的声明,但是需要重新的赋值;

我们先来看下两个简单的例子:

//例题1
 function a() {}
  var a
  console.log(typeof a)//'function'
//例题2
  var c = 1
  function c(c) {
    console.log(c)
    var c = 3
  }
  c(2)//Uncaught TypeError: c is not a function

当遇到存在函数声明和变量声明都会被提升的情况,函数声明优先级比较高,最后变量声明会被函数声明所覆盖,但是可以重新赋值,所以上个例子可以等价为

 function c(c) {
  console.log(c)
    var c = 3
  }
 c = 1
 c(2)

接下来我们看下两道比较复杂的题目:

//例题3
fn();
function fn(){console.log(1);};
fn();
var fn=10;
fn();
function fn(){console.log(2);};
fn();

1.一开始预解释,函数声明和赋值一起来,fn 就是function fn(){console.log(1);};遇到var fn=10;不会重新再声明,但是遇到function fn(){console.log(2);}就会从重新赋值,所以一开始fn()的值就是2

2.再执行fn();值不变还是2

3.fn重新赋值为10,所以运行fn()时报错,接下去的语句就没再执行。

//例题4
alert(a);
a();
var a=3;
function a(){
alert(10)
}
alert(a);
a=6;
a()

1.函数声明优先于变量声明,预解释时候,函数声明和赋值一起来,a就是function a(){alert(10)} ,后面遇到var a=3,也无需再重复声明,所以先弹出function a(){alert(10)}

2.a(),执行函数,然后弹出10

3.接着执行了var a=3; 所以alert(a)就是显示3

4.由于a不是一个函数了,所以往下在执行到a()的时候, 报错。


위 내용은 JavaScript 사전 해석이란 무엇입니까? JavaScript 사전 해석 구문 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제