Explication détaillée de l'ordre et de la portée d'analyse JS

Cet article partage principalement une explication détaillée de l'ordre d'analyse et de la portée de JS. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l’éditeur et jetons un coup d’œil.

1. L'ordre d'analyse de javascript

Nous comprenons tous que l'ordre d'exécution du code est de haut en bas, mais en fait Ce n’est effectivement pas le cas. Jetons un coup d'œil au code ci-dessous.

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

Si l'ordre d'exécution est de haut en bas, et qu'un a apparaît dessus, le navigateur pensera qu'il est exécuté de haut en bas, puis lorsqu'il alertera (a), il le fera découvrez Sans cette chose, il signalera une erreur, mais en fait le résultat qui apparaît n'est pas défini. La valeur de retour est indéfinie, ce qui indique que a n'est pas défini, c'est-à-dire qu'aucune valeur ne lui est attribuée. Expliquons l'ordre d'analyse de javascript.

1. Les mots-clés déclaratifs dans ES5

var auront une fonction de promotion de variable

et auront également la fonction de déclarer des variables.

2. Ordre d'analyse

1. Recherchez la déclaration var, déclaration de fonction : déclarez uniquement les variables, sans compter les affectations.

2. Exécuter

Remarque : Les deux étapes ci-dessus sont suivies de haut en bas. Lors de l'exécution du signe égal, regardez d'abord le côté droit du signe égal.

Remarque : Lorsqu'une variable déclarée par fonction a le même nom qu'une variable déclarée par var, le poids variable de la fonction sera supérieur à celui déclaré par 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()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!