Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der JS-Parsing-Reihenfolge und des Umfangs

Detaillierte Erläuterung der JS-Parsing-Reihenfolge und des Umfangs

零到壹度
Freigeben: 2018-03-28 10:38:53
Original
1227 Leute haben es durchsucht

Dieser Artikel enthält hauptsächlich eine detaillierte Erklärung der Analysereihenfolge und des Umfangs von JS. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

1. Die Analysereihenfolge von Javascript

Wir alle verstehen, dass die Ausführungsreihenfolge des Codes von oben nach unten erfolgt, aber tatsächlich Dies ist in der Tat nicht der Fall. Schauen wir uns den folgenden Code an.

1 alert(a);
2 var a = 1;
Nach dem Login kopieren

Wenn die Ausführungsreihenfolge von oben nach unten ist und ein a darauf erscheint, geht der Browser davon aus, dass die Ausführung von oben nach unten erfolgt. Wenn er dann eine Warnung (a) ausgibt, wird dies der Fall sein Finden Sie es heraus Ohne dieses Ding wird ein Fehler gemeldet, aber tatsächlich ist das angezeigte Ergebnis undefiniert. Der Rückgabewert ist undefiniert, was darauf hinweist, dass a nicht definiert ist, dh ihm kein Wert zugewiesen ist. Lassen Sie uns die Analysereihenfolge von Javascript erklären.

1. Die deklarativen Schlüsselwörter in ES5

var haben eine Variablenheraufstufungsfunktion

und haben auch die Funktion, Variablen zu deklarieren.

2. Parsing-Reihenfolge

1. Finden Sie die Deklarationsvariable, Funktionsdeklaration: Deklarieren Sie nur Variablen, ohne Zuweisungen.

2. Ausführen

Hinweis: Wenn Sie das Gleichheitszeichen ausführen, achten Sie zuerst auf die rechte Seite.

Hinweis: Wenn eine von der Funktion deklarierte Variable denselben Namen hat wie eine von var deklarierte Variable, ist das Variablengewicht der Funktion höher als das von var deklarierte.

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

二、作用域

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

1.全局作用域

2.函数作用域

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

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

1. 第一个例子:

var x = 5; 
a(); 
function a(){ 
alert(x); var x = 10;
 }
 alert(x);
Nach dem Login kopieren

解析过程

1,.寻找声明 (看全局作用域)

var x;
function a(){}
Nach dem Login kopieren

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);
Nach dem Login kopieren

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

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)
Nach dem Login kopieren

解析过程

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()
Nach dem Login kopieren

解析过程

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);
Nach dem Login kopieren

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; }
Nach dem Login kopieren

这一个例子应该可以自己分析了 最后的结果是 undefined 0

我们再来看一下下面这个你会很吃惊

fn() alert(a) var a = 0; alert(a); function fn(){ a = 1; }
Nach dem Login kopieren

明明都一样,我吃惊什么 返回值不是还是 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);
Nach dem Login kopieren

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

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

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

var a = 10;alert(a);a()function a(){ alert(20);}
Nach dem Login kopieren

2.第二个例子 undefined 1 0

var a = 0; function fn(){ alert(a); var a = 1; alert(a); } fn(); alert(a);
Nach dem Login kopieren

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

a() var a = function(){ alert(1) } a(); function a(){ alert(2); } a(); var a = function(){ alert(3); } a()
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JS-Parsing-Reihenfolge und des Umfangs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage