ホームページ ウェブフロントエンド jsチュートリアル jsの解析順序、スコープ、厳密モードの解析

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

Oct 23, 2017 am 09:10 AM
javascript 範囲 注文

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

C言語でのtypedef構造体の使い方 C言語でのtypedef構造体の使い方 May 09, 2024 am 10:15 AM

typedef struct は、構造体の使用を簡素化するために構造体型のエイリアスを作成するために C 言語で使用されます。構造体の別名を指定することで、新しいデータ型を既存の構造体に別名付けします。利点としては、可読性の向上、コードの再利用、型チェックなどが挙げられます。注: エイリアスを使用する前に構造体を定義する必要があります。エイリアスはプログラム内で一意であり、宣言されているスコープ内でのみ有効である必要があります。

Javaで期待される変数を解決する方法 Javaで期待される変数を解決する方法 May 07, 2024 am 02:48 AM

Java における変数の期待値の例外は、変数の初期化、null 値の使用、およびローカル変数のスコープの認識によって解決できます。

JSのクロージャーの長所と短所 JSのクロージャーの長所と短所 May 10, 2024 am 04:39 AM

JavaScript クロージャーの利点には、変数スコープの維持、モジュール化コードの有効化、遅延実行、およびイベント処理が含まれますが、欠点としては、メモリ リーク、複雑さの増加、パフォーマンスのオーバーヘッド、およびスコープ チェーンの影響が挙げられます。

C++ で include は何を意味しますか C++ で include は何を意味しますか May 09, 2024 am 01:45 AM

C++ の #include プリプロセッサ ディレクティブは、外部ソース ファイルの内容を現在のソース ファイルに挿入し、その内容を現在のソース ファイル内の対応する場所にコピーします。主に、コード内で必要な宣言を含むヘッダー ファイルをインクルードするために使用されます。たとえば、標準入出力関数を組み込むための #include <iostream> などです。

C++ スマート ポインター: ライフサイクルの包括的な分析 C++ スマート ポインター: ライフサイクルの包括的な分析 May 09, 2024 am 11:06 AM

C++ スマート ポインターのライフ サイクル: 作成: スマート ポインターは、メモリが割り当てられるときに作成されます。所有権の譲渡: 移動操作を通じて所有権を譲渡します。リリース: スマート ポインターがスコープ外に出るか、明示的に解放されると、メモリが解放されます。オブジェクトの破壊: ポイントされたオブジェクトが破壊されると、スマート ポインターは無効なポインターになります。

C++ での関数の定義と呼び出しはネストできますか? C++ での関数の定義と呼び出しはネストできますか? May 06, 2024 pm 06:36 PM

できる。 C++ では、ネストされた関数の定義と呼び出しが可能です。外部関数は組み込み関数を定義でき、内部関数はスコープ内で直接呼び出すことができます。ネストされた関数により、カプセル化、再利用性、スコープ制御が強化されます。ただし、内部関数は外部関数のローカル変数に直接アクセスすることはできず、戻り値の型は外部関数の宣言と一致している必要があります。内部関数は自己再帰的ではありません。

Vueのletとvarの違い Vueのletとvarの違い May 08, 2024 pm 04:21 PM

Vue では、let と var の間で変数を宣言するときのスコープに違いがあります。 スコープ: var にはグローバル スコープがあり、let にはブロック レベルのスコープがあります。ブロックレベルのスコープ: var はブロックレベルのスコープを作成しません。let はブロックレベルのスコープを作成します。再宣言: var は同じスコープ内の変数の再宣言を許可しますが、let は許可しません。

js の this が指す状況がいくつかあります。 js の this が指す状況がいくつかあります。 May 06, 2024 pm 02:03 PM

JavaScript では、this のポインティング タイプには、1. グローバル オブジェクト、2. 関数呼び出し、4. イベント ハンドラー、5. アロー関数 (this の外側の継承) が含まれます。さらに、bind()、call()、および apply() メソッドを使用して、これが何を指すかを明示的に設定できます。

See all articles