BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] JavaScriptの関数でグローバル変数を定義する

2022-03-16 15:02:02

質問

JavaScriptの関数内でグローバル変数を定義することは可能ですか？

を使いたいのですが trailimage 変数( makeObj 関数)を他の関数で使用することができます。 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <script type="text/javascript">
            var offsetfrommouse = [10, -20];
            var displayduration = 0;
            var obj_selected = 0;
            function makeObj(address) {
                **var trailimage = [address, 50, 50];**
                document.write('<img id="trailimageid" src="' + trailimage[0] + '" border="0"  style=" position: absolute; visibility:visible; left: 0px; top: 0px; width: ' + trailimage[1] + 'px; height: ' + trailimage[2] + 'px">');
                obj_selected = 1;
            }

            function truebody() {
                return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
            }
            function hidetrail() {
                var x = document.getElementById("trailimageid").style;
                x.visibility = "hidden";
                document.onmousemove = "";
            }
            function followmouse(e) {
                var xcoord = offsetfrommouse[0];
                var ycoord = offsetfrommouse[1];
                var x = document.getElementById("trailimageid").style;
                if (typeof e != "undefined") {
                    xcoord += e.pageX;
                    ycoord += e.pageY;
                }
                else if (typeof window.event != "undefined") {
                    xcoord += truebody().scrollLeft + event.clientX;
                    ycoord += truebody().scrollTop + event.clientY;
                }
                var docwidth = 1395;
                var docheight = 676;
                if (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight) {
                    x.display = "none";
                    alert("inja");
                }
                else
                    x.display = "";
                x.left = xcoord + "px";
                x.top = ycoord + "px";
            }

            if (obj_selected = 1) {
                alert("obj_selected = true");
                document.onmousemove = followmouse;
                if (displayduration > 0)
                    setTimeout("hidetrail()", displayduration * 1000);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <img alt="" id="house" src="Pictures/sides/right.gif" style="z-index: 1; left: 372px;
            top: 219px; position: absolute; height: 138px; width: 120px" onclick="javascript:makeObj('Pictures/sides/sides-not-clicked.gif');" />
        </form>
    </body>
</html>

解決方法は？

他の方もおっしゃっているように var をグローバルスコープ（すべての関数とモジュールの外側）で宣言して、グローバル変数を作成します。 

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

(でしか成立しないことに注意してください）。 グローバル スコープを使用します。もしそのコードがモジュールの中にあったなら <script type="module">...</script>  - はグローバルスコープではないので、グローバルは生成されません)。

あるいは

最近の環境では、オブジェクトのプロパティに割り当てることで globalThis が参照している ( globalThis が ES2020 で追加された)。 

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

ブラウザ上では、同じことを、グローバルに呼ばれる window : 

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

...なぜなら、ブラウザでは すべてのグローバル変数 で宣言されたグローバル変数は var のプロパティです。 window オブジェクトを作成します。(最新仕様であるECMAScript 2015では、新たに let , const および class ステートメントをグローバル・スコープで使用すると、グローバル・オブジェクトのプロパティではないグローバルが作成されます（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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します