JS와 엄격 모드의 구문 분석 순서와 범위에 대한 간략한 소개

1. 자바스크립트의 파싱 순서

우리 모두는 코드의 실행 순서가 위에서 아래인 것으로 알고 있지만 실제로는 그렇지 않습니다. 아래 코드를 살펴보겠습니다.

alert(a);
var a = 1;

실행 순서가 위에서 아래로 되어 있는데 거기에 a가 나타나면 브라우저는 위에서 아래로 실행된다고 생각하고 경고(a)가 나오면 거기에 있다는 것을 알게 됩니다. 그런 것이 아니라면 그는 오류를 보고할 것이지만 실제로 그가 나타나는 결과는 정의되지 않았습니다. 반환 값은 정의되지 않았습니다. 이는 a가 정의되지 않았음을 나타냅니다. 즉, 값이 할당되지 않았습니다. 이제 자바스크립트의 파싱 순서를 설명하겠습니다.

1. ES5의 선언적 키워드

var에는 변수 승격 기능이 있습니다.

함수에는 변수 선언 기능도 있습니다.

2. 구문 분석 순서

1. var 선언, 함수 선언 찾기: 할당은 제외하고 변수만 선언합니다.

2. 실행

참고: 위의 두 단계는 위에서 아래로 진행됩니다. 실행 중에 등호가 나타나면 먼저 등호의 오른쪽을 살펴보세요.

참고: 함수에서 선언한 변수와 var에서 선언한 변수의 이름이 같은 경우 함수의 변수 가중치는 var에서 선언한 변수보다 높습니다.

몇 가지 예를 더 보면 훨씬 더 명확해지지만 예를 보기 전에 범위가 무엇인지 알아야 합니다.

2. 범위

동작 범위는 다음 두 가지로 구분됩니다

1. 전역 범위

2. 둘 사이의 차이점은 다음과 같습니다. 아래 예를 주의 깊게 분석해 보세요.

3. 실행 순서의 단계를 분석하기 위해 몇 가지 예를 살펴보겠습니다. 1. 첫 번째 예:

var x = 5;
 a();
 function a(){
  alert(x);
  var x = 10;
 }
alert(x);

파싱 프로세스

1. 전역 범위)

var x;

function a(){}

2. 실행

x = 5;

a() -------------> 위의 두 단계를 다시

1단계에서 var x;(함수 범위)

2.실행

alert(x); 이 x는 함수 범위에 존재하며 할당 단계는 아직 실행되지 않았습니다. 그렇다면 무엇이 나타나는지는 정의되지 않습니다;

x = 10;

alert(x) 여기서 팝업 창은 전역 변수 5;

따라서 브라우저 팝업 창의 내용은 정의되지 않습니다 5

2 . 두 번째 예시

 a()
 function a(){
  alert(x);
  var x = 10;
 }
alert(x);

분석 위 예시와 같이 프로세스를 분석합니다

1. 구문

　function a(){}

a()----를 찾습니다. -------------- ------> 함수

1.

var x

2를 실행하고 undefed를 띄웁니다.

x = 10;

alert(x); 여기 x 전 세계에서 x를 검색하지만 x가 없으므로 브라우저는 x가 정의되지 않음 오류를 보고합니다. 이 구문 분석 과정을 이해하고 여전히 이해가 되지 않는다면 다시 읽어 보시기 바랍니다.

다음은 주의해야 할 몇 가지 사항을 소개합니다.

3. 세 번째 예

앞서 언급한 것처럼 function에서 선언한 변수와 var에서 선언한 변수의 이름이 같을 경우, 함수의 가중치는 var에 의해 선언된 변수의 가중치보다 높습니다. 이를 증명하기 위해 예를 들어보겠습니다

alert(a)

function a() {
 alert("函数")
}

var a = 1; 
alert(a)

parsing process

1. 문장을 찾으세요

　function a(){}

　var a;

2. 이전에 함수 선언문보다 가중치가 높습니다. 이것을 실행하면 이 함수 블록(함수 본문)이 나타납니다.

a = 1;

alert(a); 따라서 최종 결과는 함수 블록 1입니다.

4. 네 번째 예

하위 범위는 전역 범위에 도달할 때까지 상위 범위에서 변수를 찾을 수 있지만 그 반대는 아닙니다. 자식 범위에 동일한 변수가 있으면 그는 자신의 변수를 사용하고 아버지에게 요청하지 않습니다.

var a = 5;

function fn() {
 alert(a)
}

fn()

파싱 프로세스

1.

var a;

function fn(){}

2. 실행

a = 5;

fn() ------을 찾습니다. - --------------------> 기능

1. 문장 찾기

2.

alert(a ); 그는 여기에 가 없어서 그것을 가지러 아버지에게 갑니다. a = 5; 그래서 팝업창은 5

그래서 최종 결과는 팝업창 5

아버지가 아들에게 뭔가를 하러 갈지 볼까요

function fn(){
  var b = 5; 
  return b;  
}
fn();
alert(b);

1.

function fn(){}

2. 실행

fn()-------------------------------- -------- >

1.

1.var b; 실행

alert(b); b는 정의되지 않았습니다. 그는 b가 정의되지 않았다고 말했습니다. 이는 상위 범위가 자체 범위에서 변수를 찾을 수 없음을 나타냅니다.

5. 다섯 번째 예

변수가 어떤 범위에서 나오든 상관없이 모두 창으로 반환됩니다. 아래 두 가지 예를 살펴보겠습니다.

fn();
 alert(a);
 var a = 0;
 alert(a);
 function fn(){
  var a = 1;
 }

이 예를 스스로 분석할 수 있습니다. 최종 결과는 정의되지 않았습니다. 0

다음을 보면 놀랄 것입니다

 fn()
 alert(a)
 var a = 0;
 alert(a);
 function fn(){
   a = 1;
 }

明明都一样，我吃惊什么 返回值不是还是 undefined 和 0 吗

但是你有没有发现倒数第二行 上面的声明了 下面的没有声明，来解析一波

1.寻找变量

var a;

function fn(){}

2.fn()---------------------------->函数

a = 1; 这个时候就说到了那一点，无中生有的变量，统统归到window下面

所以下面的执行过程

alert(a) 这里的弹窗就是 1 了

a = 0;

　alert(a) 弹出 0

所以最后的结果是 1 0

四、严格模式

严格模式下的代码执行时，非常严格

变量不允许无中生有

意义：规范代码开发的流畅，逻辑

"use strict"
a = 1；
alert(a);

当我们写后面两句代码的时候不会报错和出现问题，但是当我们加上第一句代码的时候，我们在这样写的时候就会报错了。所以我们还是按照规范的标准来,提高自己的能力

五、可能好多人做了上面的例子感觉不太过瘾，下面我再给出几个例子，可以自己去分析分析，我会在最后面给出答案。

1.　第一个例子　 // 10 报错

var a = 10;
alert(a);
a()
function a(){
 alert(20);
}

2.第二个例子 undefined 1 0

var a = 0;
 function fn(){
  alert(a);
  var a = 1;
  alert(a);
 }
 fn();
 alert(a);

3.第三个例子 当同样的声明同样的名字重复时，后面写的会覆盖前面写的 //2 1 1 3

a()
 var a = function(){
  alert(1)
 }
 a();
 function a(){
  alert(2);
 }
 a();
 var a = function(){
  alert(3);
 }
 a()

如果你看到我的文章可以收获一些知识，那么我会非常高兴的。

위 내용은 JS와 엄격 모드의 구문 분석 순서와 범위에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!