JS 파싱 순서 및 범위에 대한 자세한 설명

이 기사는 주로 JS의 구문 분석 순서와 범위에 대한 자세한 설명을 공유하며 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라가서 살펴보겠습니다.

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

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

1 alert(a);
2 var a = 1;

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

1. ES5

var의 선언적 키워드에는 변수 승격

기능과 변수 선언 기능도 있습니다.

2. 구문 분석 순서

1. var 선언, 함수 선언 찾기: 할당을 포함하지 않고 변수만 선언합니다.

2. 실행

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

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

下面多来几个例子解析一下就清楚许多了，但是看例子之前要知道一下什么叫作用域。

二、作用域

作用域就是：起作用的范围分为下面两种

1.全局作用域

2.函数作用域

他们两个的区别看下面的例子仔细分析。

三、看几个例子解析一下执行顺序的步骤

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在函数作用域中存在，并且还没有执行到赋值的那一步,那么弹出的东西就是undefined;

x = 10;

alert(x) 这里弹窗是全局变量 5；

所以浏览器弹窗的内容是 undefined 5

2.　第二个例子

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

解析过程 按照上面的例子一样分析

1. 寻找声明

function a(){}

2.执行

a()------------------------->函数

1.寻找声明

var x;

2.执行

alert(x) 弹出未定义

x = 10；

alert(x); 这里的x会从全局中寻找x，但是发现并没有x，所 以浏览器会 报错 x is not defined x没有被定义

所以浏览器的弹出的内容是 undefined 报错

我相信看了这两个例子的人都对这个解析过程都有了清除的了解，如果还是不太了解，建议重新看一次。

下面介绍几个需要注意的地方， 直接上例子

3. 第三个例子

前面讲到了当function声明的变量和var声明的变量重名时，function的变量权重会比var声明的要高。来一个例子证明一下

alert(a)function a() { alert("函数")}var a = 1; alert(a)

解析过程

1.寻找声明

function a(){}

var a;

2. 执行

alert（a） 前面说到了function的声明比var声明的权重高，所有执行这个的时候他会弹出这个 函数块（函数体）

a = 1;

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

所以最后的结果就是 函数块 1；

4.第四个例子

子作用域可以向父级作用域找变量，直到全局作用域为止，反之不行。 如果子作用域有同样的变量，那么他就会使用自己的，不会去找爸爸要。

var a = 5;function fn() { alert(a)}fn()

解析过程

1.寻找声明

var a;

function fn(){}

2.执行

a = 5;

fn()--------------------------------------> 函数

1.找声明

2.执行

alert(a); 他这里没有a 所以去找爸爸要。 a = 5； 所以弹窗是 5

所以最后结果为 弹窗5

下面看一下爸爸会不会去找儿子要东西

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

1.寻找声明

function fn(){}

2. 执行

fn（）----------------------------------------> 函数

1.寻找声明

1.var b;

2.执行

return b;

alert(b); //我们看一下返回值是多少 b is not defined 他说b没有被定义，说明父作用域不可以向自作用域去寻找变量。

5. 第五个例子

当一个变量无中生有时，不管从哪个作用域出来的，统统归到window下，下面看两个例子

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

这一个例子应该可以自己分析了 最后的结果是 undefined 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!