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

511

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>
javascript  function  variables  scope  declaration 
— ハムゼ
ソース
19
グローバルを宣言するには、単に "var"キーワードを使用しないでください
— Ibu
20
@イブラヒム：「グローバルを宣言するには、単に「var」キーワードを使用しないでください」 Gak！ホラー！;-)ありがたいことに、strictモードは暗黙的なグローバルを取り除きます。
— TJクラウダー、
28
@Ibrahim Diallo-使用varしない場合、グローバル変数は宣言されません。宣言されていない変数に値を割り当てると、グローバルオブジェクトにプロパティが作成されます。これは、変数の宣言とはかなり異なります。
— RobG 2011
1
この回答にも役立つ情報、stackoverflow.com
— a / 4862268/1356098

回答:

739

はい、他の人が言ったようにvar、グローバルスコープ（すべての関数の外）で使用してグローバル変数を宣言できます。

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

または、次のプロパティに割り当てることができますwindow。

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

...ブラウザでは、で宣言されたすべてのグローバル変数グローバル変数varはwindowオブジェクトのプロパティだからです。（最新の仕様、ECMAScriptの2015年、新しいlet、constし、classグローバルスコープでのステートメントは、グローバルオブジェクトのプロパティではありませんグローバルを作成します。ES2015の新しいコンセプト。）

（暗黙のグローバルの恐怖もありますが、故意にそれを行わないでください"use strict"。おそらくES5を使用するなどして、誤って行わないように最善を尽くしてください。）

つまり、可能であれば（そしてほぼ確実に）、グローバル変数は避けます。私が述べたように、彼らはのプロパティをされてしまうwindowと、windowすでにされてたくさんの十分な混雑を持つすべての要素で何id（だけで多くのname今後の仕様は、IEがちょうどと何でもダンプという）にかかわらず、それに投棄されている（とnameそこに）。

代わりに、コードをスコープ関数でラップし、そのスコープ関数にローカルな変数を使用して、その中に他の関数をクロージャーにします。

<script>
(function() { // Begin scoping function
    var yourGlobalVariable; // Global to your code, invisible outside the scoping function
    function foo() {
        // ...
    }
})();         // End scoping function
</script>
— TJクラウダー
ソース
98
+1ウィンドウに明示的に宣言するのが最も読みやすい方法です。
— Caspar Kleijne
8
windowノードではを使用できないことに注意してください。ここで最も簡単なトリックは、以下を設定することです。- この関連質問でGLOBAL.window = GLOBAL;説明されているように。もちろん、それはかなり概念的ではありません。私は逆に物事をやりたいので、のGLOBAL代わりに使用できますwindow。
— ドミ2014
4
@CasparKleijne、わかりません。文字通りウィンドウオブジェクトが実際に存在する証拠がないのに、なぜウィンドウに割り当てるのでしょうか。あなたはあなたのコードが将来どのように使われるかについて何も知りません。ノードの代わりに、MongoDB環境またはrinoで使用されることもあります。また、たとえばWebワーカーを使用している場合、ウィンドウオブジェクトはブラウザにも表示されません。これにより、再利用性が完全に失われます。
— ガーマン、2016
4
window.yourGlobalVariable = ...;スタックサイトで5〜6個の質問を読んだ後は、魅力のように動作します。
— Ahmed Syed 2016
6
@JacquesKoekemoer：そこで使用する理由はまったくありませんeval。代わりに：window[dynamic_variable_name] = dynamic_variable_value;
— TJ Crowder 2016年
19

UPDATE1：コメントを読んだ場合、この特定の命名規則についての良い議論があります。

UPDATE2：私の回答が投稿されて以来、命名規則がより正式になったようです。教え、本を書く人などは、var宣言とfunction宣言について話します。

UPDATE3：これは私のポイントをサポートする追加のウィキペディア投稿です：http : //en.wikipedia.org/wiki/Declaration_( computer_programming)#Declarations_and_Definitions

...そして主な質問に答えます。関数の前に変数を宣言します。これは機能し、スコープの上部で変数を宣言するという良い習慣に準拠します:)

— op1ekun
ソース
7
他の場所で変数を定義する場合は、巻き上げとは何かを理解してください。ここに、それについての非常に良い記事があります。good.com/2010/2/JavaScript-Scoping-and-Hoisting。幸運を！
— op1ekun 2012
1
これはC では何definitionをdeclaration意味しているのではありません。最初の行は、宣言または定義のいずれかになります（場所によって異なります）。2番目は単なる割り当てです。宣言は、識別子の解釈を指定するだけです（つまりmyVar、ですint）。宣言がストレージも予約する場合、それはdefinitionです。これはタイピングとは関係ありません。これは、コンパイルユニットが他のコンパイルユニットへの参照を理解する方法の一部です。
— EML 2014
4
でもJSで、var myVar呼び出された宣言（それは入力する必要はありません）と割り当て。化合物（）の「定義」という用語を聞いたことがあります。myVar = 10var myVar = 10;
— ベルギ2014
2
これは質問に答えるのに役立ちません。それは答えではなくコメントであるべきだった。
— Stuntddude 2016年
2
@Stuntddudeあなたはおそらく正しい:(私は質問に答え始め、それから少し分岐することを決めました、そしてこれは私たちが得たものです。それでもいくつかのpplはまだそれが役に立つと思うのでここに残しました。ありがとうフィードバック！
— op1ekun 2016年
15

宣言するだけ 

var trialImage;

外側。その後

function makeObj(address) {
    trialImage = [address, 50, 50];
..
..
}

お役に立てれば。

— ハリフ
ソース
12

いいえ、できません。関数の外で変数を宣言するだけです。値を割り当てると同時に、それを宣言する必要はありません。

var trailimage;

function makeObj(address) {
  trailimage = [address, 50, 50];
— グッファ
ソース
1
ごめんなさい！「JavaScript関数でグローバル変数を定義することは可能ですか？」-最初の答えが示すように、「いいえ、できません」は正しくありません。
— mustafa.0x 2013年
5
@ mustafa.0x：間違いです。関数内でグローバル変数を定義することはできません。あなたはできる暗黙的に作成するグローバル変数を、または作成ウィンドウのプロパティを関数内で、しかし、あなたは、関数の内部でグローバル変数を定義することはできません。
— Guffa 2013年
1
ブラウザ環境のJavaScriptに関して、グローバル変数とプロパティwindowは同義です。どちらにしても、あなたがしているセマンティックの区別は明確なので、私は反対票を投じなくてもかまいません。編集：投票を変更できません、申し訳ありません！
— mustafa.0x 2013年
2
strictを使用していない場合（しかし、strictを使用していないのはなぜですか）、実際には 、すべての適切な方法に反しvar、Guffaが暗黙的に作成することを意味するを使用しないことで、関数内でグローバル変数を宣言および定義できます。（たとえば、@ DhruvPathakがそこでポイントされています）。
— cregox 2017
11

関数の外側で宣言し、関数の内側に値を割り当ててください。何かのようなもの：

<script type="text/javascript">
    var offsetfrommouse = [10, -20];
    var displayduration = 0;
    var obj_selected = 0;
    var trailimage = null ;  // GLOBAL VARIABLE
    function makeObj(address) {
        trailimage = [address, 50, 50];  //ASSIGN VALUE

または、関数内の変数名から「var」を削除するだけでもグローバルになりますが、コードを簡潔にするために、一度外部で宣言することをお勧めします。これも機能します：

var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;

function makeObj(address) {
    trailimage = [address, 50, 50];  //GLOBAL VARIABLE , ASSIGN VALUE

この例でもっと説明できるといいのですが：http : //jsfiddle.net/qCrGE/

var globalOne = 3;
testOne();

function testOne()
{
    globalOne += 2;
    alert("globalOne is : " + globalOne );
    globalOne += 1;
}

alert("outside globalOne is : " + globalOne);

testTwo();

function testTwo()
{
    globalTwo = 20;
    alert("globalTwo is " + globalTwo);
    globalTwo += 5;
}

alert("outside globalTwo is :" + globalTwo);
— DhruvPathak
ソース
3

関数の外でTrailimage変数を定義し、その値をmakeObj関数に設定するのは非常に簡単です。これで、どこからでもその値にアクセスできます。

var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
var trailimage;
function makeObj(address) {
      trailimage = [address, 50, 50];
      ....
}
— バーラト
ソース
2 
    var Global = 'Global';

    function LocalToGlobalVariable() {

    //This creates a local variable.

    var Local = '5';

    //Doing this makes the variable available for one session
    //(a page refresh - Its the session not local)

    sessionStorage.LocalToGlobalVar = Local;

    // It can be named anything as long as the sessionStorage references the local variable.
    // Otherwise it won't work
    //This refreshes the page to make the variable take effect instead of the last variable set.

    location.reload(false);
    };

    //This calls the variable outside of the function for whatever use you want.

    sessionStorage.LocalToGlobalVar;

これにはおそらく多くの構文エラーがあると思いますが、それは一般的な考えです...これを指摘してくれたLayZeeに感謝します...ローカルストレージとセッションストレージはhttp：//www.w3schoolsにあります。 com / html / html5_webstorage.asp。私のコードにも同じものが必要でしたが、これは本当に良いアイデアでした。

— シャナーM13
ソース
これまでのところ、これはまったく機能する唯一の答えですが、ページをリロードしてlocation.reload(false);繰り返しページを更新する必要があります。
— iyrin
1

古典的な例：

window.foo = 'bar';

IIFEを使用したベストプラクティスに従った最新の安全な例：

;(function (root) {
    'use strict'

    root.foo = 'bar';
)(this));

最近では、WebStorage APIを使用するオプションもあります 

localStorage.foo = 42;

または

sessionStorage.bar = 21;

パフォーマンスに関しては、変数に値を格納するよりも著しく遅いかどうかはわかりません。

「使用できますか？」に記載されている広範なブラウザサポート

— Lars Gyrup Brink Nielsen
ソース
localStorageおよびsessionStorageは、文字列値に対してのみ機能します。
— HereToLearn_
@HereToLearn_のとおりですが、localStorage.foo = JSON.stringify({ arbitrary: 'object', meaning: 42, awesome: true });and を使用できますvar foo = JSON.decode(localStorage.foo);。
— Lars Gyrup Brink Nielsen、2015
localStorageグローバル変数と何が関係していますか？
— のMichałPerłakowski
1
OPはこの問題の解決策を探しています。「他の関数でTrailImage変数（makeObj関数で宣言）を使用したい」ソリューションにはグローバル変数を含める必要があると誰が言っていますか？グローバル変数がほとんどの場合に良い解決策になることはめったにありません。
— Lars Gyrup Brink Nielsen 2016
0

では、関数の外で使用できる関数内の変数が必要ですか？関数内の変数の結果を返さないのはなぜですか？ var x = function returnX { var x = 0; return x; }アイデアです...

    <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;
            return trailimage;
        }

        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>

私はこれをテストしていませんが、コードがその小さな変更の前に機能していれば、機能するはずです。

— シャナーM13
ソース
-1

以下は、役に立つかもしれないサンプルコードです。

  var Human = function(){
   name = "Shohanur Rahaman";  // global variable
   this.name = "Tuly"; // constructor variable 
   var age = 21;
 };

  var shohan = new Human();

 document.write(shohan.name+"<br>");
 document.write(name);
 document.write(age); // undefined cause its local variable

ここに私は良い答えを見つけましたHow-can-one-declare-a-global-variable-in-JavaScript

— ショハヌールラハマン
ソース
これは理論的には質問の答えになるかもしれませんが、ここに答えの本質的な部分を含めて、参照用のリンクを提供することが望ましいでしょう。
— Rohit Gupta
-1

次に、グローバル変数を使用せずに変数を他の関数で使用できるようにする簡単な方法を示します。

function makeObj() {
  // var trailimage = 'test';
  makeObj.trailimage = 'test';
}
function someOtherFunction() {
  document.write(makeObj.trailimage);
}

makeObj();
someOtherFunction();
スニペットを展開

— am2124429
ソース
-2

スタートアップ関数を作成する場合は、グローバル関数と変数を次のように定義できます。

function(globalScope)
{
     //define something
     globalScope.something() { 
         alert("It works");
     };
}(window)

関数はこの引数でグローバルに呼び出されるため、ここではグローバルスコープです。したがって、何かはグローバルなものでなければなりません。

— コンスタンティン・イサエフ
ソース
thisあるundefined関数外厳密モードで、グローバルオブジェクトを参照するために使用すべきではありません。
— のMichałPerłakowski
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.