Tentukan variabel global dalam fungsi JavaScript

511

Apakah mungkin untuk mendefinisikan variabel global dalam fungsi JavaScript?

Saya ingin menggunakan trailimagevariabel (dideklarasikan dalam makeObjfungsi) di fungsi lain.

<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 hamze
sumber
19
untuk mendeklarasikan global, jangan gunakan kata kunci "var"
Ibu
20
@Ibrahim: "untuk mendeklarasikan global, jangan gunakan kata kunci" var "" Gak! Horor ! ;-) Untungnya, mode ketat menghilangkan global implisit.
TJ Crowder
28
@Ibrahim Diallo - tidak menggunakan vartidak mendeklarasikan variabel global. Konsekuensi dari penetapan nilai ke variabel yang tidak dideklarasikan adalah pembuatan properti pada objek global, yang sangat berbeda dengan mendeklarasikan variabel.
RobG
1
info berguna dalam jawaban ini, juga stackoverflow.com/a/4862268/1356098 :)
Erenor Paz

Jawaban:

739

Ya, seperti yang dikatakan orang lain, Anda dapat menggunakan vardi lingkup global (di luar semua fungsi) untuk mendeklarasikan variabel global:

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

Sebagai alternatif, Anda dapat menetapkan untuk sebuah properti di window:

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

... karena di browser, semua variabel global yang dideklarasikan dengan variabel global varadalah properti windowobjek. (Dalam spesifikasi terbaru, ECMAScript 2015, baru let, constdan classpernyataan di lingkup global membuat global yang bukan properti dari objek global; konsep baru dalam ES2015.)

(Ada juga ketakutan global yang tersirat , tetapi jangan lakukan itu dengan sengaja dan lakukan yang terbaik untuk menghindari melakukannya secara tidak sengaja, mungkin dengan menggunakan ES5 "use strict".)

Semua itu mengatakan: Saya akan menghindari variabel global jika Anda bisa (dan Anda hampir pasti bisa). Seperti yang saya sebutkan, mereka akhirnya menjadi properti window, dan windowsudah cukup ramai apa dengan semua elemen dengan id(dan banyak hanya dengan name) dibuang di dalamnya (dan terlepas dari spesifikasi yang akan datang, IE kesedihan apa saja dengan nameada di sana ).

Alih-alih, bungkus kode Anda dalam fungsi pelingkupan dan gunakan variabel lokal untuk fungsi pelingkupan itu, dan tutuplah fungsi-fungsi Anda yang lain di dalamnya:

<script>
(function() { // Begin scoping function
    var yourGlobalVariable; // Global to your code, invisible outside the scoping function
    function foo() {
        // ...
    }
})();         // End scoping function
</script>
TJ Crowder
sumber
98
+1 Secara eksplisit mendeklarasikannya ke jendela adalah cara yang paling mudah dibaca.
Caspar Kleijne
8
Perhatikan bahwa menggunakan windowtidak akan berfungsi di Node. Trik termudah di sini adalah mengatur: GLOBAL.window = GLOBAL;- seperti yang dijelaskan dalam pertanyaan terkait ini . Tentu saja, itu tidak cantik secara konseptual. Saya lebih suka melakukan hal-hal di sekitar jalan lain, sehingga saya dapat menggunakan GLOBALbukan window.
Domi
4
@CasparKleijne, saya tidak mengerti. Mengapa Anda menetapkannya di jendela ketika Anda benar-benar tidak memiliki bukti bahwa objek jendela sebenarnya ada. Anda tidak tahu apa-apa tentang bagaimana kode Anda akan digunakan di masa depan. Ini bahkan dapat digunakan di lingkungan MongoDB atau rino alih-alih simpul Anda. Dan objek jendela juga tidak terlihat bahkan di browser jika Anda menggunakan pekerja web misalnya. Ini benar-benar akan membunuh penggunaan kembali.
Gherman
4
window.yourGlobalVariable = ...;bekerja seperti pesona setelah membaca 5 hingga 6 pertanyaan di situs tumpukan.
Ahmed Syed
6
@ JacquesKoekemoer: Tidak ada alasan apa pun untuk menggunakannya di evalsana. Sebagai gantinya:window[dynamic_variable_name] = dynamic_variable_value;
TJ Crowder
19

UPDATE1: Jika Anda membaca komentar ada diskusi yang bagus di sekitar konvensi penamaan khusus ini.

UPDATE2: Sepertinya jawaban saya telah diposting konvensi penamaan menjadi lebih formal. Orang yang mengajar, menulis buku dll berbicara tentang vardeklarasi, dan functiondeklarasi.

UPDATE3: Ini adalah posting wikipedia tambahan yang mendukung maksud saya: http://en.wikipedia.org/wiki/Declaration_(computer_programming)#Declarations_and_Definitions

... dan untuk menjawab pertanyaan utama. DECLARE variabel sebelum fungsi Anda. Ini akan berhasil dan akan mematuhi praktik yang baik dalam mendeklarasikan variabel Anda di bagian atas lingkup :)

op1ekun
sumber
7
Jika Anda ingin mendefinisikan variabel Anda di tempat lain, pastikan untuk memahami apa itu mengangkat. Berikut ini adalah artikel yang sangat bagus tentang hal ini dengan memadaigood.com/2010/2/JavaScript-Scoping-and-Hoisting . Semoga berhasil!
op1ekun
1
Ini bukan apa definitiondan declarationartinya di C. Baris pertama Anda bisa berupa deklarasi atau definisi (tergantung di mana tempatnya); yang kedua hanyalah tugas. Deklarasi hanya menentukan interpretasi pengidentifikasi (mis. myVarAdalah an int); jika deklarasi juga menyimpan cadangan, itu adalah a definition. Ini tidak terkait dengan mengetik; itu adalah bagian dari bagaimana unit kompilasi memahami referensi ke unit kompilasi lainnya.
EML
4
Bahkan di JS, var myVardisebut deklarasi (tidak perlu diketik) dan myVar = 10sebuah tugas . Saya pernah mendengar istilah "defintion" untuk senyawa ( var myVar = 10;).
Bergi
2
Ini tidak membantu menjawab pertanyaan. Seharusnya komentar, bukan jawaban.
Stuntddude
2
@Stuntddude Anda mungkin benar :( Saya mulai menjawab pertanyaan dan kemudian memutuskan untuk menyimpang sedikit, dan yah inilah yang kami punya. Masih ada beberapa orang yang masih merasa berguna jadi saya meninggalkannya di sini. Terima kasih untuk Anda umpan balik!
op1ekun
15

Nyatakan saja 

var trialImage;

di luar. Kemudian

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

Semoga ini membantu.

harihb
sumber
12

Tidak bisa. Cukup deklarasikan variabel di luar fungsi. Anda tidak harus mendeklarasikannya secara bersamaan saat Anda menetapkan nilainya:

var trailimage;

function makeObj(address) {
  trailimage = [address, 50, 50];
Guffa
sumber
1
Maaf! "Apakah mungkin untuk mendefinisikan variabel global dalam fungsi JavaScript?" - "Tidak, kamu tidak bisa" tidak benar, seperti yang ditunjukkan oleh jawaban pertama!
mustafa.0x
5
@ mustafa.0x: Anda salah. Anda tidak dapat menentukan variabel global di dalam suatu fungsi. Anda dapat secara implisit membuat variabel global, atau membuat properti jendela di dalam suatu fungsi, tetapi Anda tidak bisa mendefinisikan variabel global di dalam suatu fungsi.
Guffa
1
Berkenaan dengan JavaScript di lingkungan browser, variabel global dan properti windowadalah sama. Either way, perbedaan semantik yang Anda buat jelas, jadi saya tidak keberatan un-downvoting. Sunting: tidak dapat mengubah suara saya, maaf!
mustafa.0x
2
jika Anda tidak menggunakan ketat (tapi mengapa Anda tidak menggunakan ketat?), Anda benar - benar dapat mendeklarasikan dan mendefinisikan global vars di dalam suatu fungsi dengan melawan semua praktik yang baik dan tidak menggunakan var, itulah yang Guffa maksudkan dengan secara implisit menciptakan (seperti @DhruvPathak menunjuk ke sana, juga).
cregox
11

Hanya mendeklarasikannya di luar fungsi, dan menetapkan nilai di dalam fungsi. Sesuatu seperti:

<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

Atau hanya menghapus "var" dari nama variabel Anda di dalam fungsi juga membuatnya global, tetapi lebih baik untuk mendeklarasikannya di luar sekali untuk kode pembersih. Ini juga akan berfungsi:

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

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

Saya harap contoh ini menjelaskan lebih lanjut: 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
sumber
3

Sangat mudah mendefinisikan variabel trailimage di luar fungsi dan menetapkan nilainya dalam fungsi makeObj. Sekarang Anda dapat mengakses nilainya dari mana saja.

var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
var trailimage;
function makeObj(address) {
      trailimage = [address, 50, 50];
      ....
}
Bharath
sumber
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;

Saya menyadari mungkin ada banyak kesalahan sintaksis dalam hal ini tetapi ini adalah ide umum ... Terima kasih banyak LayZee untuk menunjukkan ini ... Anda dapat menemukan apa Penyimpanan lokal dan sesi adalah di http: //www.w3schools. com / html / html5_webstorage.asp . Saya memerlukan hal yang sama untuk kode saya dan ini adalah ide yang sangat bagus.

ShanerM13
sumber
Sejauh ini ini adalah satu-satunya jawaban yang berfungsi sama sekali, tetapi membutuhkan memuat ulang halaman dan location.reload(false);menyegarkan halaman berulang kali.
iyrin
1

Contoh klasik:

window.foo = 'bar';

Contoh modern dan aman yang mengikuti praktik terbaik dengan menggunakan IIFE :

;(function (root) {
    'use strict'

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

Saat ini, ada juga opsi untuk menggunakan WebStorage API 

localStorage.foo = 42;

atau

sessionStorage.bar = 21;

Performancewise, saya tidak yakin apakah itu terasa lebih lambat daripada menyimpan nilai dalam variabel.

Dukungan peramban yang luas seperti yang disebutkan pada Dapatkah saya menggunakan ...

Lars Gyrup Brink Nielsen
sumber
localStorage dan sessionStorage hanya berfungsi untuk nilai string.
HereToLearn_
Itu benar, @HereToLearn_, tetapi kemudian Anda dapat menggunakan localStorage.foo = JSON.stringify({ arbitrary: 'object', meaning: 42, awesome: true });dan var foo = JSON.decode(localStorage.foo);.
Lars Gyrup Brink Nielsen
Apa yang localStorageharus dilakukan dengan variabel global?
Michał Perłakowski
1
OP sedang mencari solusi untuk masalah ini: "Saya ingin menggunakan variabel trailimage (dideklarasikan dalam fungsi makeObj) dalam fungsi lainnya." Siapa bilang solusi harus melibatkan variabel global? Variabel global jarang merupakan solusi yang baik untuk apa pun.
Lars Gyrup Brink Nielsen
0

Jadi Anda ingin variabel di dalam fungsi tersedia di luar fungsi? Mengapa tidak mengembalikan hasil variabel di dalam fungsi? var x = function returnX { var x = 0; return x; }adalah idenya ...

    <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>

Saya belum menguji ini, tetapi jika kode Anda berfungsi sebelum perubahan kecil itu, maka itu harus bekerja.

ShanerM13
sumber
-1

Berikut adalah contoh kode yang mungkin dapat membantu.

  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

Di sini saya menemukan jawaban yang bagus Bagaimana-bisa-satu-menyatakan-global-variabel-dalam-JavaScript

Shohanur Rahaman
sumber
Sementara ini secara teoritis dapat menjawab pertanyaan, akan lebih baik untuk memasukkan bagian-bagian penting dari jawaban di sini, dan menyediakan tautan untuk referensi.
Rohit Gupta
-1

Berikut adalah metode mudah lain untuk membuat variabel tersedia di fungsi lain tanpa harus menggunakan variabel global:

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

makeObj();
someOtherFunction();
Luaskan cuplikan

am2124429
sumber
-2

jika Anda membuat fungsi startup, Anda dapat mendefinisikan fungsi dan variabel global sedemikian rupa:

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

Karena fungsi dipanggil secara global dengan argumen ini, ini adalah ruang lingkup global di sini. Jadi, sesuatu itu harus menjadi hal global.

Konstantin Isaev
sumber
thisadalah undefineddalam mode luar ketat fungsi dan tidak boleh digunakan untuk merujuk pada objek global.
Michał Perłakowski