JavaScript の高度な機能 - スコープのサンプル コードの詳細

javascriptではスコープはグローバルスコープとローカルスコープに分かれており、ローカルスコープとは実際には関数のスコープを指しており、JavaScriptでは関数をスコープの最小のスコープとみなします。

グローバルスコープ ウィンドウオブジェクトやウィンドウオブジェクトの

プロパティ

など、コード内のどこからでもアクセスできるオブジェクトにはグローバルスコープがあります。 1. 最も外側のレイヤーで定義されている変数は、デフォルトではすべてウィンドウ オブジェクトの属性です。
2. 未定義の変数はデフォルトでグローバルであり、デフォルトではウィンドウ オブジェクトの属性です。ブラウザはこの問題を解決しました!
例は次のとおりです:

var firstName = "leo";
function changeName() {
    var secondName = "jut";
    fullName = "jutleo";
    function getName() {
        console.log(secondName);
    }
    getName();
}
console.log(firstName);
console.log(fullName);//报错
// console.log(secondName);//报错
changeName();
// getName();//报错

ローカル スコープ/関数スコープ (ローカル スコープ/関数スコープ)

関数内で変数を定義する場合、この変数は現在の関数にのみ表示され、JavaScript は現在の関数のスコープを検索します。見つからない場合は、グローバル スコープ内で unfineed が見つからなくなるまで上方向に検索を続け、f1 関数で

var version = "version_1";
var f1 = function() {
    console.log(version);//version_1
}
f1();

が見つからない場合は、上方向に検索を続けて、f2 関数で

var version = "version_1";
var f2 = function() {
    var version = "version_2";
    console.log(version);//version_2
}
f2();

を直接見つけます。なぜ毛織物なのか？ JavaScript は f3 関数内でスコープ変数を検索し、それを見つけます。ただし、ネストを実行するときも同じルールに従う必要があります。上の階を探し続けてください。

えー

これはなぜですか？ JavaScript 関数がネストされている場合、スコープはネスト関係によって決定され、呼び出しの順序は無視されることがわかりました。

console.log(scope)时，scope还没有被初始化，所以返回undefined ここまで述べましたが、このスコープはどのように使用するのでしょうか?上記の例から、JavaScript が変数を検索するときに、順番に上がっていくチェーンがスコープ チェーンであることがわかります。実際のアプリケーションでは、変数の位置が深くなるほど、グローバル スコープで見つかるまでの読み取りおよび書き込みの速度が遅くなります。

例を見てください:

var socpe = "scope_01";
var f3 = function() {
    console.log(scope); //undefined
    var scope = "scope_02";
}
f3();

スコープ チェーンの検索ロジックによると、ドキュメント変数の検索は、グローバル オブジェクトで最終的に見つかるまでスコープ チェーン全体を横断する必要があります。この関数は 2 回参照されます。最適化は次のとおりです:

var f4 = function() {
    var scope = "scope_02";
    (function(){
        var scope = "scope_03";
        (function(){
            console.log(scope); //scope_03
        })();
    })();
}
f4();

これは単なる例であり、これを実行してもパフォーマンスが大幅に向上するわけではありません。ただし、実際の使用においては、グローバル変数へのアクセスが大量に行われる事態を避ける必要があります。

var x_scope = "leo";
var f5 = function() {
    console.log(x_scope); //leo
}
var f6 = function() {
    var x_scope = "jut";
    f5();
}
f6();

考えてみてください、なぜあなたが目にするすべてのライブラリやフレームワークはこのように始まっているのでしょうか?

以上がJavaScript の高度な機能 - スコープのサンプル コードの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。