Cara mendeklarasikan variabel global di JavaScript


Jawaban:


215

Jika Anda harus menghasilkan variabel global dalam kode produksi (yang harus dihindari), selalu nyatakan secara eksplisit :

window.globalVar = "This is global!";

Meskipun dimungkinkan untuk mendefinisikan variabel global dengan hanya menghilangkan var(dengan asumsi tidak ada variabel lokal dengan nama yang sama), hal itu menghasilkan global implisit , yang merupakan hal yang buruk untuk dilakukan dan akan menghasilkan kesalahan dalam mode ketat .


windowhanya tersedia di browser. Bisakah Anda mengedit jawaban Anda untuk membuatnya bekerja di semua lingkungan? Lihat Bagaimana cara mendapatkan objek global di JavaScript?
Michał Perłakowski

52

Jika ini adalah satu-satunya aplikasi tempat Anda akan menggunakan variabel ini, pendekatan Felix sangat bagus. Namun, jika Anda menulis plugin jQuery, pertimbangkan variabel "namespacing" (detail tentang tanda kutip nanti ...) dan fungsi yang diperlukan di bawah objek jQuery. Misalnya, saya sedang mengerjakan menu popup jQuery yang saya sebut miniMenu. Jadi, saya telah mendefinisikan "namespace" di miniMenubawah jQuery, dan saya menempatkan semuanya di sana.

Alasan saya menggunakan tanda kutip ketika saya berbicara tentang ruang nama JavaScript adalah karena mereka sebenarnya bukan ruang nama dalam arti normal. Sebagai gantinya, saya hanya menggunakan objek JavaScript dan menempatkan semua fungsi dan variabel saya sebagai properti objek ini.

Selain itu, untuk kenyamanan, saya biasanya memberi sub-spasi pada namespace plugin dengan inamespace untuk hal-hal yang seharusnya hanya digunakan secara internal di dalam plugin, untuk menyembunyikannya dari pengguna plugin.

Begini Cara kerjanya:

// An object to define utility functions and global variables on:
$.miniMenu = new Object();
// An object to define internal stuff for the plugin:
$.miniMenu.i = new Object();

Sekarang saya bisa melakukannya $.miniMenu.i.globalVar = 3atau $.miniMenu.i.parseSomeStuff = function(...) {...}kapan pun saya perlu menyimpan sesuatu secara global, dan saya masih menyimpannya di luar namespace global.


Terima kasih untuk itu Tomas, Di situs yang saya sebutkan di atas, pendekatan Felix berfungsi dengan baik, tetapi saya memiliki situs lain yang juga saya kerjakan yang menggunakan beberapa plugin dan pendekatan Anda akan ideal jika saya bisa membuatnya berfungsi. Bersulang untuk bantuanmu.
Penari

Ini bekerja dengan sangat baik! Pastikan seperti yang dikatakan @Tomas, Buat kelas / tempat Anda sendiri untuk fungsi atau variabel kustom Anda sendiri. +1
Pierre

Terima kasih Tomas! Jika tidak diperlukan lagi, hapus objek induk (misalnya:) delete $.miniMenu. Apakah ini oke?
Kunj

1
@KunJ: Tentu, seperti apa pun: jika Anda dapat menjamin bahwa itu tidak akan digunakan lagi, maka aman untuk menghapusnya. Namun, JavaScript akan mengumpulkan sampah untuk Anda, jadi Anda tidak perlu melakukannya delete $.miniMenu.
Tomas Aschan

20

Catatan: Pertanyaannya adalah tentang JavaScript, dan jawaban ini tentang jQuery, itu salah. Ini adalah jawaban lama, sejak jQuery tersebar luas.

Sebagai gantinya, saya merekomendasikan untuk memahami cakupan dan closure di JavaScript.

Jawaban lama dan buruk

Dengan jQuery Anda bisa melakukan ini, di mana pun deklarasinya:

$my_global_var = 'my value';

Dan akan tersedia di mana saja.

Saya menggunakannya untuk membuat galeri gambar cepat, saat gambar tersebar di berbagai tempat, seperti:

$gallery = $('img');
$current = 0;

$gallery.each(function(i,v){
    // preload images
    (new Image()).src = v;
});
$('div').eq(0).append('<a style="display:inline-block" class="prev">prev</a> <div id="gallery"></div> <a style="display:inline-block" class="next">next</a>');
$('.next').click(function(){
    $current = ( $current == $gallery.length - 1 ) ? 0 : $current + 1;
    $('#gallery').hide().html($gallery[$current]).fadeIn();
});
$('.prev').click(function(){
    $current = ( $current == 0 ) ? $gallery.length - 1 : $current - 1;
    $('#gallery').hide().html($gallery[$current]).fadeIn();
});

Tip : jalankan seluruh kode ini di konsol di halaman ini ;-)


3
Bukankah $ gallery dan $ current hanyalah variabel global normal? Mereka berfungsi karena Anda mendefinisikannya sebagai variabel global dengan menghilangkan 'var', tetapi tanda dolar di depannya tidak menjadikannya 'variabel jQuery' ... Ini secara harfiah seperti meletakkan garis bawah atau tanda lain apa pun darinya ... Mereka akan menjadi variabel jQuery jika Anda menggunakan objek jQuery ($) dan menambahkan properti ke dalamnya: $ .myGlobalVariable = 'my value' ...
Andres Elizondo

Anda mungkin benar, tetapi yang perlu diperhatikan adalah bahwa menggunakan sintaks $ myVar Anda mendapatkan 2 peningkatan, 1) variabel bersifat global tanpa deklarasi khusus (selain $); dan 2) Anda dapat melacak variabel global Anda dengan sangat mudah di dalam kode. Namun terbuka untuk diskusi ...
aesede

Jawaban yang menyesatkan. Setuju dengan Andres, itu BUKAN variabel jQuery sama sekali. Jika Anda tidak menentukan $current = 0;di awal fungsi, fungsi selanjutnya tidak akan berfungsi.
harrrrrrry

15

Berikut adalah contoh dasar variabel global yang dapat diakses oleh fungsi Anda lainnya. Berikut adalah contoh langsung untuk Anda: http://jsfiddle.net/fxCE9/

var myVariable = 'Hello';
alert('value: ' + myVariable);
myFunction1();
alert('value: ' + myVariable);
myFunction2();
alert('value: ' + myVariable);


function myFunction1() {
    myVariable = 'Hello 1';
}

function myFunction2() {
    myVariable = 'Hello 2';
}

Jika Anda melakukan ini dalam fungsi jQuery ready (), pastikan variabel Anda berada di dalam fungsi ready () bersama dengan fungsi lainnya.


Jawaban terbaik untuk bagaimana variabel global bekerja di jQuery.
Clinton Green

1
Saya tahu saya sedang menggali lebih dalam, tetapi ini bahkan bukan variabel global eksplisit. Ini lebih selaras dengan variabel publik bersama yang tidak termasuk dalam penutupan untuk skrip yang sangat kecil. Mereka adalah dua metode / penggunaan yang sangat berbeda dan yang satu ini akan membuat Anda mendapat masalah besar jika Anda mendeklarasikan global eksplisit dalam skrip yang berada di tengah-tengah beberapa skrip yang berbeda. Saya hanya bisa membayangkan ujung depan tim saya mendeklarasikan variabel global di bagian atas skrip yang ke-10 dipanggil ke DOM.
Brian Ellis

4

Deklarasikan variabel di luar fungsi

function dosomething(){
  var i = 0; // Can only be used inside function
}

var i = '';
function dosomething(){
  i = 0; // Can be used inside and outside the function
}

3

Cara terbaik adalah menggunakan closures, karena windowobjek menjadi sangat, sangat berantakan dengan properti.

HTML

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="init.js"></script>
    <script type="text/javascript">
      MYLIBRARY.init(["firstValue", 2, "thirdValue"]);
    </script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello !</h1>
  </body>
</html>

init.js (berdasarkan jawaban ini )

var MYLIBRARY = MYLIBRARY || (function(){
    var _args = {}; // Private

    return {
        init : function(Args) {
            _args = Args;
            // Some other initialising
        },
        helloWorld : function(i) {
            return _args[i];
        }
    };
}());

script.js

// Here you can use the values defined in the HTML content as if it were a global variable
var a = "Hello World " + MYLIBRARY.helloWorld(2);

alert(a);

Berikut plnkr tersebut . Semoga membantu!

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.