JavaScript実行環境とスコープについて話してください.

14796 ワード

JavaScript

グローバル実行環境は、最も周辺的な実行環境である.

はウェブブラウザにおいて、グローバル実行環境はwindowオブジェクトである.

グローバル実行環境は、アプリケーションが終了するまで廃棄される.

各関数には、それぞれの実行環境があります.関数を実行すると、関数の環境が環境スタックに押し入れられます.関数が実行されると、関数の環境が現在のスタックからイジェクトされ、制御権が前の実行環境に戻ります.

コードが環境で実行されると、変数オブジェクトの作用ドメインチェーンが作成されます.その用途は、実行環境がすべての変数と関数にアクセスできるようにすることです.

グローバル実行環境の変数オブジェクトは、作用ドメインチェーンの最後のオブジェクトである.

識別子の解析は、スコープの一級に沿って検索され、その検索プロセスは、スコープの先端から開始され、その後、識別子が見つかるまで段階的に後戻りする(エラーが発生しない).


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>                     title>
head>
<body>

<script type="text/javascript">
    var color = "blue";

    function changeColor(){
        if (color === "blue"){
            color = "green";
        } else {
            color = "blue";
        }
    }

    changeColor();
    console.log("Color is now " + color);//green
script>
body>
html>

関数内部では、作用領域チェーンにおいて祖先環境下の変数を見つけることができる.


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>                      title>
head>
<body>

<script type="text/javascript">
    var color = "blue";

    function changeColor(){
        var anotherColor = "green";

        function swapColors(){
            var tempColor = anotherColor;
            anotherColor = color;
            color =tempColor;
            //      color、anotherColor   tempColor
        }

        swapColors();
        //      color、anotherColor
    }

    changeColor();
    console.log("Color is now " + color);//green
    //      color
script>
body>
html>

作用分域チェーンの概略図:

関数の内部環境は、ドメインチェーンを介してすべての外部環境にアクセスすることができ、これらの環境間の連絡は線形であり、順序がある.

の各環境は、ロールドメインチェーンを上に検索することができる.

関数パラメータも変数として扱われるので、アクセス規則は実行環境の他の変数と同じです.

1延長作用分域チェーン
次のステートメントにフローが入ると、スコープは延長されます.＊try-catch文のcatchブロック*with文
これらのステートメントは、コード実行後に削除される変数オブジェクトを、フィールドの先頭に一時的に追加します.

は、catch文に対して、ドロップされたエラーオブジェクトの宣言を含む新しい変数オブジェクトを作成します.

対with文:


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>      title>
head>
<body>

<script type="text/javascript">
    function buildUrl(){
        var qs = "?debug=true";

        with (location){
            var url = href + qs;
        }
        return url;
    }

    console.log(buildUrl());
script>
body>
html>

例におけるwith文はlocationオブジェクトを受信するので、その変数オブジェクトはlocationオブジェクトのすべての属性と方法を含んでいる.

IE 8および以前のバージョンでは、catch文でキャプチャされたエラーオブジェクトは、catch文の変数オブジェクトではなく、実行環境の変数オブジェクトに追加されます.IE 9はこの問題を修復しました.
2ブロックレベルのスコープがない

他の種類のCの言語では、かっこで閉じられたコードブロックはブロックレベルの機能領域がありますが、JavaScriptはありません.

if (true){
    var color = "blue";
}

console.log(color); //"blue"

if文で宣言された変数は、現在の実行環境に変数を追加します.for文を使う時は特にこのことを覚えておきましょう.

for (var i=0; i < 10; i++){
    doSomething(i);
}

alert(i);//10

2.1宣言変数

var宣言を使用する変数は、最も近い環境に自動的に追加されます.関数の内部で、最も近い環境まで関数の局所環境です.with文では、関数環境です.

関数の局所変数は、関数の外部ではアクセスできません.


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>       ，         title>
head>
<body>

<script type="text/javascript">
    function add(num1, num2){
        var sum = num1 + num2;
        return sum;
    }

    console.log(add(10,20));//30
    console.log(sum);//  
script>
body>
html>

初期化変数がvar宣言を使用していない場合、変数は自動的にグローバル環境に追加されます.


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>        （    var），         title>
head>
<body>

<script type="text/javascript">
    function add(num1, num2){
        sum = num1 + num2;
        return sum;
    }

    console.log(add(10,20));//30
    console.log(sum);//30（    ）
script>
body>
html>

は、変数を初期化する前に、これらの問題を避けるために、必ず先に声明することを提案しています.

は、厳密なモードでは、初期化されていない変数がエラーとして報告されます.

2.2クエリ識別子

検索は、ロールドメインチェーンのフロントエンドから開始され、レベル別に識別子を照会する.グローバル環境においても発見されていない場合、すなわちこの変数はまだ宣言されていないことを意味する.


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>              title>
head>
<body>

<script type="text/javascript">
    var color = "blue";

    function getColor(){
        return color;
    }

    console.log(getColor());//blue
script>
body>
html>

ローカル環境に同名の識別子が存在する場合、親環境における識別子は使用されない.


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>              ，        title>
head>
<body>

<script type="text/javascript">
    var color = "blue";

    function getColor(){
        var color = "green";
        return color;
    }

    console.log(getColor());//green
script>
body>
html>

0から1までの段階で、出生日の正規表現を実現します.(JavaScript)