JavaScript の高度な機能 - スコープのサンプルコードの詳細-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-03-13 16:48:52

オリジナル

1173 人が閲覧しました

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

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

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

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

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