JavaScript işlevinde genel değişkeni tanımlama

511

JavaScript işlevinde genel bir değişken tanımlamak mümkün müdür?

Diğer işlevlerde trailimage( makeObjişlevde bildirilen) değişkeni kullanmak istiyorum .

<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
kaynak
19
bir küresel ilan etmek için sadece "var" anahtar kelimesini kullanmayın
— Ibu
20
@Ibrahim: "bir global ilan etmek için sadece" var "anahtar kelimesi" Gak! Korku ! ;-) Neyse ki, katı mod örtülü küreselleri ortadan kaldırır.
— TJ Crowder
28
@Ibrahim Diallo - kullanmayan vargelmez beyan global bir değişken. Bildirilmemiş bir değişkene değer atamanın bir sonucu, global nesne üzerinde bir değişkenin bildirilmesinden oldukça farklı bir özellik oluşturulmasıdır.
— RobG
1
bu cevapta faydalı bilgiler de stackoverflow.com/a/4862268/1356098 :)
— Erenor Paz

Yanıtlar:

739

Evet, diğerlerinin söylediği gibi, varglobal bir değişkeni bildirmek için global kapsamda (tüm işlevlerin dışında) kullanabilirsiniz:

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

Alternatif olarak, şu özelliklere sahip bir mülke atayabilirsiniz window:

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

... çünkü tarayıcılarda, global değişkenler ile bildirilen tüm global değişkenler nesnenin varözellikleridir window. (En son spesifikasyonda, ECMAScript 2015, küresel kapsamdaki yeni let, constve classifadeler, küresel nesnenin özellikleri olmayan küreseller oluşturur; ES2015'te yeni bir kavram.)

( Örtülü küresellerin dehşeti var , ama bunu bilerek yapmayın ve yanlışlıkla ES5'leri kullanarak bunu yapmaktan kaçınmak için elinizden gelenin en iyisini yapın "use strict".)

Tüm bunlar dedi: Eğer mümkünse küresel değişkenlerden kaçınırdım (ve neredeyse kesinlikle yapabilirsiniz). Bahsettiğim gibi, onlar sonunda özellikleri windowve windowzaten yeterince bol kalabalık bir id(ve birçok sadece bir ile name) içine dökülme ile (ve yaklaşan şartname ne olursa olsun, IE nameorada bir şey hakkında hemen hemen her şeyi dökümü ile ).

Bunun yerine, kodunuzu bir kapsam belirleme işlevine sarın ve kapsam belirleme işlevi için yerel değişkenleri kullanın ve içindeki diğer işlevlerin kapatılmasını sağlayın:

<script>
(function() { // Begin scoping function
    var yourGlobalVariable; // Global to your code, invisible outside the scoping function
    function foo() {
        // ...
    }
})();         // End scoping function
</script>
— TJ Kalabalık
kaynak
98
+1 Açıkça pencereye bildirilmesi en okunabilir yoldur.
— Caspar Kleijne
8
Düğümde kullanmanın windowçalışmadığını unutmayın . Buradaki en kolay numara: GLOBAL.window = GLOBAL;- bu ilgili soruda açıklandığı gibi . Tabii ki, kavramsal olarak pek de iyi değil. İşleri başka şekilde yapmayı tercih ederim, GLOBALbunun yerine kullanabilirsiniz window.
— Domi
4
@CasparKleijne, anlamıyorum. Pencere nesnesinin gerçekten var olduğuna dair hiçbir kanıt olmadığında neden pencereye atayacaksınız? Kodunuzun gelecekte nasıl kullanılacağı hakkında hiçbir şey bilmiyorsunuz. Düğümünüz yerine MongoDB ortamında veya rino'da bile kullanılabilir. Örneğin, web çalışanlarını kullanıyorsanız, pencere nesnesi tarayıcıda bile görünmez. Bu yeniden kullanılabilirliği tamamen öldürecektir.
— Gherman
4
window.yourGlobalVariable = ...;yığın sitesinde 5-6 soru okuduktan sonra bir cazibe gibi çalışır.
— Ahmed Syed
6
@JacquesKoekemoer: Orada kullanmak için hiçbir sebep yok eval. Bunun yerine:window[dynamic_variable_name] = dynamic_variable_value;
— TJ Crowder
19

GÜNCELLEME1: Yorumları okursanız, bu özel adlandırma kuralı hakkında güzel bir tartışma var.

GÜNCELLEME2: Görünüşe göre cevabım gönderildiği için adlandırma kuralı daha resmi hale geldi. Öğreten, kitap yazan vb. İnsanlar varbeyan ve functionbeyan hakkında konuşurlar .

GÜNCELLEME3: İşte benim amacımı destekleyen ek wikipedia yazısı: http://en.wikipedia.org/wiki/Declaration_(computer_programming)#Declarations_and_Definitions

... ve ana soruyu cevaplamak için. Fonksiyonunuzdan önce DECLARE değişkeni. Bu işe yarayacak ve değişkenlerinizi kapsamın üstünde bildirmenin iyi uygulamalarına uygun olacaktır :)

— op1ekun
kaynak
7
Değişkenlerinizi başka bir yerde tanımlamak istiyorsanız, kaldırma işleminin ne olduğunu anladığınızdan emin olun. İşte bununla ilgili çok güzel bir makale yeterligood.com/2010/2/JavaScript-Scoping-and-Hoisting . İyi şanslar!
— op1ekun
1
C'de bunun anlamı definitionve declarationanlamı değildir . İlk satırınız bir bildirim veya tanım olabilir (nerede olduğuna bağlı olarak); ikincisi sadece bir ödevdir. Bir deklarasyon sadece tanımlayıcının yorumunu belirtir (yani myVarbir int); deklarasyon ayrıca depolama alanı ayırıyorsa, a definition. Bu yazı yazmakla ilgisi yoktur; derleme birimlerinin diğer derleme birimlerine yapılan referansları anlama biçiminin bir parçasıdır.
— EML
4
Hatta JS, var myVardenir beyan (Daktilo edilmesi gerekmez) ve myVar = 10bir atama . Bileşik ( var myVar = 10;) için "tanım" terimini duydum .
— Bergi
2
Bu, sorunun yanıtlanmasına yardımcı olmaz. Bu bir yorum olmalı, cevap değil.
— Stuntddude
2
@Stuntddude muhtemelen haklısın :( Soruyu cevaplamaya başladım ve sonra biraz sapmaya karar verdim ve bu da elimizde olan şey. Hala bazı insanlar hala yararlı buluyorlar, bu yüzden burada bıraktım. geribildirim!
— op1ekun
15

Sadece beyan et 

var trialImage;

dışarıda. Sonra

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

Bu yardımcı olur umarım.

— harihb
kaynak
12

Hayır, yapamazsınız. Değişkeni fonksiyonun dışında bildirmeniz yeterlidir. Değeri atarken aynı zamanda beyan etmek zorunda değilsiniz:

var trailimage;

function makeObj(address) {
  trailimage = [address, 50, 50];
— Guffa
kaynak
1
Afedersiniz! "Bir JavaScript işlevinde genel bir değişken tanımlamak mümkün mü?" - İlk cevabın gösterdiği gibi "Hayır, yapamazsın" doğru değil!
— mustafa.0x
5
@ mustafa.0x: Yanılıyorsunuz. Sen olamaz tanımlamak Bir fonksiyon içerisinde bir küresel değişkeni. Sen olabilir örtük oluşturmak global değişkeni veya oluşturmak pencere özelliğini bir işlev içinde, ancak bir fonksiyon içerisinde global bir değişken tanımlamak mümkün değil.
— Guffa
1
Tarayıcı ortamındaki JavaScript ile ilgili olarak, global bir değişken ve bir özelliği windoweşanlamlıdır. Her iki durumda da, yaptığınız anlamsal ayrım açıktır, bu yüzden aşağı oylamayı umursamıyorum. Düzenleme: oyumu değiştiremiyorum, üzgünüm!
— mustafa.0x
2
Eğer sıkı kullanmıyorsanız (ama neden sıkı kullanmıyorsunuz?), aslında olabilir beyan ve işlevi içinde küresel değişkenler tanımlamak hepsi iyi uygulamalara karşı olacak ve sadece kullanmayarak varGuffa neyi kastettiğini olan örtülü oluşturmak (@DhruvPathak da oraya işaret etti gibi).
— cregox
11

Sadece fonksiyonların dışında ilan edin ve fonksiyonların içine değerler atayın. Gibi bir şey:

<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

Ya da "var" değişken isminin içindeki fonksiyondan kaldırılması da global olmasını sağlar, ancak daha temiz kod için bir kez dışarıda beyan etmek daha iyidir. Bu da işe yarayacaktır:

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

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

Umarım bu örnek daha fazla açıklar: 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
kaynak
3

Sürecin değişkenini fonksiyonun dışında tanımlamak ve değerini makeObj fonksiyonunda ayarlamak çok basittir. Artık değerine her yerden erişebilirsiniz.

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

Muhtemelen bu sözdizimi hataları bir sürü olduğunu fark ama onun genel fikir ... Bunu işaret ettiğiniz için çok LayZee teşekkürler ... Yerel ve oturum Depolama ne olduğunu bulabilirsiniz http: //www.w3schools. com.tr / html / html5_webstorage.asp . Kodum için aynı şeye ihtiyacım vardı ve bu gerçekten iyi bir fikirdi.

— ShanerM13
kaynak
Şimdiye kadar işe yarayan tek cevap bu, ancak sayfayı yeniden yüklemeyi ve location.reload(false);sayfayı tekrar tekrar yenilemeyi gerektiriyor .
— iyrin
1

Klasik örnek:

window.foo = 'bar';

IIFE kullanarak en iyi uygulamaları izleyen modern, güvenli örnek :

;(function (root) {
    'use strict'

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

Günümüzde WebStorage API'sını kullanma seçeneği de var 

localStorage.foo = 42;

veya

sessionStorage.bar = 21;

Performans açısından, değerleri değişkenlerde saklamaktan fark edilir derecede yavaş olup olmadığından emin değilim.

Belirtildiği gibi yaygın tarayıcı desteği Kullanabilir miyim ...

— Lars Gyrup Brink Nielsen
kaynak
localStorage ve sessionStorage yalnızca dize değerleri için çalışır.
— HereToLearn_
Bu doğru, @ HereToLearn_, ama sonra localStorage.foo = JSON.stringify({ arbitrary: 'object', meaning: 42, awesome: true });ve kullanabilirsiniz var foo = JSON.decode(localStorage.foo);.
— Lars Gyrup Brink Nielsen
localStorageGlobal değişkenlerle ne ilgisi var?
— Michał Perłakowski
1
OP bu soruna çözüm arıyor: "Ben trailikage değişkeni (makeObj işlevinde bildirilen) diğer işlevlerde kullanmak istiyorum." Çözümün küresel değişkenleri içermesi gerektiğini kim söylüyor? Global değişkenler nadiren her şeye iyi bir çözümdür.
— Lars Gyrup Brink Nielsen
0

Fonksiyon içindeki değişkenin fonksiyonun dışında olmasını mı istiyorsunuz? Neden işlevin içindeki değişkenin sonuçlarını döndürmüyorsunuz? var x = function returnX { var x = 0; return x; }fikir ...

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

Bunu test etmedim, ancak kodunuz bu küçük değişiklikten önce çalıştıysa, o zaman çalışmalıdır.

— ShanerM13
kaynak
-1

İşte size yardımcı olabilecek bir örnek kod.

  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

Burada güzel bir cevap buldum JavaScript nasıl-bir-küresel-değişken-bildirimi

— Shohanur Rahaman
kaynak
Bu teorik olarak soruyu cevaplayabilse de , cevabın temel kısımlarını buraya dahil etmek ve referans için bağlantı sağlamak tercih edilir.
— Rohit Gupta
-1

Global değişkenleri kullanmak zorunda kalmadan değişkeni diğer işlevlerde kullanılabilir yapmak için başka bir kolay yöntem:

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

makeObj();
someOtherFunction();
Snippet'i genişlet

— am2124429
kaynak
-2

bir başlatma işlevi yapıyorsanız, global işlevleri ve değişkenleri şu şekilde tanımlayabilirsiniz:

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

İşlev bu argümanla küresel olarak çağrıldığı için buradaki küresel kapsam budur. Yani, bir şey küresel bir şey olmalı.

— Konstantin Isaev
kaynak
thisolan undefinedbir fonksiyon katı mod dışarıdan ve genel nesneyi ifade etmek kullanılmamalıdır.
— Michał Perłakowski
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.