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

黄舟
リリース: 2017-03-13 16:48:52
オリジナル
1153 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート