JS と strict モードの解析順序と範囲の簡単な紹介

1. JavaScript の解析順序

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

alert(a);
var a = 1;

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

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

varは変数昇格を持ちます

functionには変数を宣言する機能もあります。

2. 解析順序

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

2. 実行

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

注: function で宣言された変数が var で宣言された変数と同じ名前を持つ場合、function の変数の重みは var で宣言された変数よりも大きくなります。

さらにいくつかの例を使用すると、より明確になりますが、例を見る前に、スコープがどのようなものかを知る必要があります。

2. スコープ

スコープは以下の 2 種類に分かれます

1. グローバルスコープ

2. 両者の違いは例に示します。以下を注意深く分析してください。

3. 実行シーケンスのステップを分析するためにいくつかの例を見てみましょう 1. 最初の例:

解析プロセス

1.グローバルスコープ)

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

2.

x = 5;

a() -------------> を実行します。上記の 2 つのステップを再度実行します ステップ

1、宣言 var x; (関数スコープ) を探します

2. この x は関数スコープ内に存在しますが、代入ステップはまだ実行されていません。次に何がポップアップしますか それは未定義です;

x = 10;

alert(x) ここでのポップアップウィンドウはグローバル変数 5;

したがって、ブラウザのポップアップウィンドウの内容は未定義です 5

2 . 2 番目の例

var x;

function a(){}

分析 上記の例のようにプロセスを分析します

関数 a(){}

2 を実行します。 -------------- ------> 関数

1. 宣言

を見つけて

alert(x) を実行します。

x = 10;

alert(x); ここで x 全世界から x を検索しますが、x が存在しないことが判明したため、ブラウザはエラーを報告します x は定義されていませんこの解析プロセスをまだ理解していない場合は、もう一度読むことをお勧めします。

以下では、注意が必要な点をいくつか紹介します

3. 3 番目の例に進みます

前述したように、関数で宣言された変数が var で宣言された変数と同じ名前である場合、その変数は関数の重みは、var で宣言された変数の重みよりも高くなります。それを証明するために例を挙げてみましょう

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

解析プロセス

1. ステートメントを見つけます

function a(){}

var a;

2. を実行します

alert(a)先ほどの関数のステートメント var 宣言よりも重みが高くなります。 これを実行すると、この関数ブロック(関数本体)がポップアップします

a = 1;

alert(a); ここでポップアップするのは 1

です。したがって、最終結果は関数ブロック 1;

4 です。 4 番目の例

子スコープは、グローバル スコープに到達するまで親スコープから変数を検索できますが、その逆はできません。 子スコープに同じ変数がある場合、子スコープは自分の変数を使用し、父親にそれを要求しません。

alert(a)

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

var a = 1; 
alert(a)

解析プロセス

1. ステートメント

var a;

function fn(){}

2.

a = 5;

fn() を実行します。 - ----------------------------------> 関数

1. ステートメントを検索します

2.

alert(a ); 彼はここを持っていないので、父親のところに取りに行きます。 a = 5; したがって、ポップアップ ウィンドウは 5 です

したがって、最終結果はポップアップ ウィンドウ 5 です

父親が何かをしに息子のところに行くかどうか見てみましょう

var a = 5;

function fn() {
 alert(a)
}

fn()

1。

関数 fn(){}

2.

fn() を実行します。 -------- > 関数

1.

2. 戻り値を見てみましょう。 b は定義されていません 彼は、b は定義されていないと言いました。これは、親スコープが自己スコープから変数を探すことができないことを示しています。

5. 5 番目の例

変数が何もないところから出てきた場合、それがどのスコープから来たものであっても、それはすべてウィンドウに返されます。以下の 2 つの例を見てみましょう

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

。この例は自分で分析できます 最終結果は未定義です 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 と strict モードの解析順序と範囲の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。