Une brève introduction à l'ordre d'analyse et à la portée de JS et du mode strict

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 pas comme ça. Jetons un coup d'œil au code ci-dessous.

alert(a);
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, alors lorsqu'il alerte (a), il constatera qu'une telle chose n'existe pas, puis il signalera une erreur, mais en fait le résultat qu'il affiche 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. Maintenant, laissez-moi vous expliquer l'ordre d'analyse de javascript.

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

var auront une promotion de variable

la fonction a également pour 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.

Quelques exemples supplémentaires rendront les choses plus claires, mais avant de regarder les exemples, vous devez savoir quelle est la portée.

2. Portée

La portée est la suivante : la portée effective est divisée en deux types suivants

1. Portée

2. Portée de la fonction

La différence entre les deux est analysée en détail dans l'exemple ci-dessous.

3. Regardons quelques exemples pour analyser les étapes de la séquence d'exécution

1. >

Processus d'analyse

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

1. Rechercher la déclaration (voir portée globale)

var x;

function a(){}

2. Exécuter

x = 5;

a() -------------> ; Pendant l'exécution de cette fonction, répétez les deux étapes ci-dessus

1, recherchez l'instruction var x; (portée de la fonction)

2. ) ; Ce x existe dans la portée de la fonction, et l'étape d'affectation n'a pas encore été exécutée, donc la pop-up n'est pas définie ;

x = 10;

alert(x) La pop -up window ici C'est la variable globale 5

donc le contenu de la fenêtre pop-up du navigateur est indéfini 5

2 Le deuxième exemple

.

Le processus d'analyse est analysé comme dans l'exemple ci-dessus

1 Trouvez l'instruction

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

　fonction a(){}

2. Exécutez

a()- -------------------------->Fonction

1. déclaration

var x;

2. Exécuter

alert(x) et afficher undefined

x = 10

alert; (x); Le x ici recherchera x dans le global, mais il s'avère qu'il n'y a pas de x, donc le navigateur signalera une erreur. x n'est pas défini. Tout le monde a une compréhension claire de ce processus d'analyse. Je ne le comprends pas, il est recommandé de le relire.

Ce qui suit présente quelques éléments qui nécessitent une attention particulière. Passons directement à l'exemple

3 Le troisième exemple

Comme mentionné précédemment, lorsque les variables déclarées par fonction et. les variables déclarées par var se chevauchent. Lorsqu'elle est nommée, le poids variable de la fonction sera supérieur à celui déclaré par var. Prenons un exemple pour prouver le

Processus d'analyse

1 Trouvez l'instruction

fonction a(). {}

　var a;

alert(a)

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

var a = 1; 
alert(a)

2. Exécuter

alert (a) Comme mentionné précédemment, la déclaration de fonction a un poids plus élevé que la déclaration var, donc quand c'est le cas exécuté, cela apparaîtra Function block (function body)

a = 1;

alert(a); Ce qui apparaît ici est 1

Donc le résultat final est bloc fonctionnel 1 ;

4. Le quatrième exemple

La portée enfant peut rechercher des variables de la portée parent jusqu'à ce qu'elle atteigne la portée globale, mais pas l'inverse. Si la portée enfant a la même variable, alors il utilisera la sienne et ne la demandera pas à son père.

Processus d'analyse

1. Recherchez l'instruction

var a;

fonction fn(). { >

var a = 5;

function fn() {
 alert(a)
}

fn()

2. Exécuter

a = 5;

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

1. Rechercher la déclaration

2. Exécuter

alerte ( a); Il n’en avait pas ici, alors il est allé voir son père pour le demander. a = 5 ; Donc la fenêtre pop-up est 5

Donc le résultat final est la fenêtre pop-up 5

Voyons si le père ira voir son fils pour lui demander quelque chose

1. Recherchez la déclaration

fonction fn(){}

2. Exécutez

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

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

1. Rechercher la déclaration

1.var b;

2 Exécuter

return b;

alert(b); la valeur de retour est que b n'est pas défini, il a dit que b n'est pas défini, indiquant que la portée parent ne peut pas rechercher de variables dans la portée autonome.

5. Le cinquième exemple

Lorsqu'une variable est créée à partir de rien, quelle que soit la portée dont elle provient, elle sera entièrement renvoyée dans la fenêtre. Regardons deux exemples ci-dessous. 🎜>

Vous devriez pouvoir analyser cet exemple vous-même. Le résultat final est indéfini 0

Jetons un coup d'œil à ce qui suit et. vous serez surpris

 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!