JavaScript関数でグローバル変数を定義する質問する

Question

他の人が言っているように、varグローバルスコープ (すべての関数とモジュールの外側) を使用してグローバル変数を宣言できます。

<script>
var yourGlobalVariable;
function foo() {
    // ...
}
</script>

(これはグローバルスコープでのみ当てはまることに注意してください。そのコードがモジュール内にある場合は、<script type="module">...</script> グローバルスコープではないため、グローバルは作成されません。)

あるいは:

現代の環境では、オブジェクトのプロパティにglobalThis（globalThisES2020で追加されました）を参照します。

<script>
function foo() {
    globalThis.yourGlobalVariable = ...;
}
</script>

ブラウザでは、というグローバルを使用して同じことを行うことができますwindow。

<script>
function foo() {
    window.yourGlobalVariable = ...;
}
</script>

...ブラウザでは、で宣言された ~~すべてのグローバル変数~~ varはオブジェクトのプロパティであるためですwindow。(グローバルスコープでの新しいlet、const、classステートメント (ES2015 で追加) は、グローバルオブジェクトのプロパティではないグローバルを作成します。これは ES2015 の新しい概念です。)

（また、暗黙のグローバルの恐ろしさただし、意図的に行うのではなく、ES5 のを使用するなどして、誤って行うことがないように最善を尽くしてください"use strict"。

とはいえ、可能であればグローバル変数は避けた方が良いでしょう（そして、ほぼ確実にそうできるでしょう）。前述したように、グローバル変数はのプロパティとなりwindow、windowすでに十分に混雑しているを含むすべての要素id(およびのみを含む多くの要素name) がそこにダンプされます (今後の仕様に関係なく、IE はを含むほぼすべての要素をnameそこにダンプします)。

代わりに、最新の環境ではモジュールを使用します。

<script type="module">
let yourVariable = 42;
// ...
</script>

モジュール内の最上位レベルのコードはグローバルスコープではなくモジュールスコープにあるため、そのモジュール内のすべてのコードから参照できる変数が作成されますが、これはグローバルではありません。

モジュールサポートのない古い環境では、コードをスコープ関数でラップし、そのスコープ関数に対してローカルな変数を使用して、他の関数をその内部でクロージャにします。

<script>
(function() { // Begin scoping function
    var yourGlobalVariable; // Global to your code, invisible outside the scoping function
    function foo() {
        // ...
    }
})();         // End scoping function
</script>

Answer 1