ホームページ  >  記事  >  ウェブフロントエンド  >  jsの解析順序、スコープ、厳密モードの解析

jsの解析順序、スコープ、厳密モードの解析

一个新手
一个新手オリジナル
2017-10-23 09:10:171523ブラウズ

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 で宣言された変数よりも大きくなります。

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

2. スコープ

スコープは: アクションのスコープは次の 2 種類に分けられます

1. グローバル スコープ

2. 関数スコープ

それらの違いは、以下の例で注意深く分析されています。

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

1. 最初の例:


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

解析プロセス

1. 宣言を見つけます(グローバルスコープを参照)

var x ;

function a(){}

2.

ステップ

を実行する 1. ステートメントを探す var It's unfineed;

<p style="margin-bottom: 7px;">a() function a(){<br/>    alert(x);    <br/>    var x = 10;<br/> }<br/>alert(x);<br/></p>

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

1. 宣言を見つける

関数a(){}

2.実行

a() --------------------------------- - ----->関数

1.文を見つける

var x = 10;

alert(x); ここでxを全世界から探しますが、xが無いことがわかります。なので、ブラウザは「x が定義されていません」というエラーを報告します。まだ理解できない場合は、もう一度読むことをお勧めします。

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

3. 3番目の例

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

alert(a)function a() {
    alert("函数")
}var a = 1;  
alert(a)

解析過程

1.文を見つけます

function a(){}

var a;

2.実行

alert(a) 前述の通り、関数の宣言の方が重みが高いです これを実行すると関数ブロック(関数本体)がポップアップします

a = 1;

alert(a); が表示されます。

最終結果は function block 1 です ;

4. 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。