JSの解析順序とスコープの詳細説明

この記事では主に JS の解析順序とスコープについて詳しく説明しますので、参考になると思います。編集者をフォローして見てみましょう。

1. JavaScript の解析順序

コードの実行順序は上から下であることは誰もが理解していますが、実際はそうではありません。以下のコードを見てみましょう。

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

実行順序が上から下で、その上に a が表示された場合、ブラウザはそれが上から下に実行されると認識します。その後、(a) を警告すると、そのようなものは存在しないことがわかります。 、その後、エラーが報告されますが、実際には、ポップアップされる結果は未定義です。戻り値は未定義で、 a が定義されていない、つまり値が割り当てられていないことを示します。 JavaScriptの解析順序について説明します。

1. ES5の宣言型キーワード

varは変数昇格

機能を持ち、変数を宣言する機能も持ちます。

2. 解析順序

1. 宣言 var と関数宣言を検索します。変数のみを宣言します。代入は含まれません。

2. 実行

注: 上記の 2 つの手順は上から下に続きます。実行中に等号に遭遇した場合は、まず等号の右側に注目してください。

注: function で宣言された変数が var で宣言された変数と同じ名前を持つ場合、function の変数の重みは 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 中国語 Web サイトの他の関連記事を参照してください。