Визначте глобальну змінну у функції 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"
— Ібу,
20
@Ibrahim: "для оголошення глобального просто не використовуйте ключове слово" var "" Gak! Жах ! ;-) На щастя, суворий режим усуває неявні глобалі.
— TJ Crowder
28
@Ibrahim Diallo - не використовуючи varне оголошує глобальну змінну. Наслідком присвоєння значення незадекларованій змінній є створення властивості на глобальному об'єкті, що зовсім відрізняється від оголошення змінної.
— RobG
1
корисна інформація в цій відповіді теж stackoverflow.com/a/4862268/1356098 :)
— Erenor Паз

Відповіді:

739

Так, як говорили інші, ви можете використовувати varв глобальному масштабі (за межами всіх функцій) для оголошення глобальної змінної:

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

Крім того, ви можете призначити властивість на window:

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

... тому що у браузерах усі глобальні змінні глобальні змінні, оголошені з, varє властивостями windowоб'єкта. (В останній специфікації, ECMAScript 2015, нові let, constта classвисловлювання в глобальному масштабі створюють глобалі, які не є властивостями глобального об'єкта; нова концепція в ES2015.)

(Існує також жах неявних глобалів , але не робіть цього навмисно і робіть усе можливе, щоб уникнути цього випадково, можливо, використовуючи ES5 "use strict".)

Все, що було сказано: Я б уникав глобальних змінних, якщо це можливо (і ви майже напевно можете). Як я вже згадував, вони в кінцевому підсумку є властивостями window, і windowвже досить багато переповнених тим, що з усіма елементами, в яких id(і багато хто з просто a 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 Crowder
джерело
98
+1 Явно оголосити його у вікні - це найбільш читабельний спосіб.
— Caspar Kleijne
8
Зауважте, що використання windowне буде працювати у Вузлі. Тут найпростіший трюк - встановити: GLOBAL.window = GLOBAL;- як пояснено в цьому пов'язаному питанні . Звичайно, це не зовсім концептуально. Я вважаю за краще робити речі навпаки, тому можу використовувати GLOBALзамість цього window.
— Домі
4
@CasparKleijne, я цього не розумію. Чому б ви призначили це на вікні, коли у вас буквально немає доказів того, що об’єкт вікна насправді існує. Ви нічого не знаєте про те, як використовувати ваш код у майбутньому. Він може бути використаний навіть у середовищі MongoDB або рино замість вашого вузла. І об’єкт вікна також не видно навіть у браузері, якщо ви, наприклад, використовуєте веб-працівників. Це повністю знищить повторне використання.
— Герман
4
window.yourGlobalVariable = ...;працює як шарм після прочитання 5 - 6 питань на сайті стека.
— Ахмед Сайд
6
@JacquesKoekemoer: Тут немає жодної причини використовувати eval. Натомість:window[dynamic_variable_name] = dynamic_variable_value;
— TJ Crowder
19

ОНОВЛЕННЯ1: Якщо ви читаєте коментарі, приємна дискусія навколо цієї конкретної конвенції про іменування.

ОНОВЛЕННЯ2: Схоже, з моменту опублікування моєї відповіді конвенція про іменування стала більш формальною. Люди, які навчають, пишуть книги тощо, говорять про varдекларацію та functionдекларацію.

ОНОВЛЕННЯ3: Ось додатковий пост у Вікіпедії, який підтримує мою думку: http://en.wikipedia.org/wiki/Declaration_(computer_programming)#Declarations_and_Definitions

... і відповісти на головне питання. ВИЗНАЧИТИ змінну перед функцією. Це спрацює, і це буде відповідати належній практиці оголошення ваших змінних у верхній частині області :)

— оп1екун
джерело
7
Якщо ви хочете визначити свої змінні в іншому місці, не забудьте зрозуміти, що таке підйом. Ось дуже приємна стаття про це adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting . Удачі!
— op1ekun
1
Це не те, що definitionі declarationозначає у C. Перший рядок може бути або декларацією, або визначенням (залежно від того, де він знаходиться); друге - це просто завдання. Декларація просто вказує інтерпретацію ідентифікатора (тобто myVarє an int); якщо декларація також зберігає сховище, це a definition. Це не пов'язано з набором тексту; це частина того, як підрозділи компіляції розуміють посилання на інші одиниці компіляції.
— EML
4
Навіть в JS, var myVarназивається декларацією (вона не повинна бути набрана) і призначення . Я чув термін "визначення" для сполуки ( ). myVar = 10var myVar = 10;
— Бергі
2
Це не допомагає відповісти на питання. Це мав бути коментар, а не відповідь.
— Stuntddude
2
@Stuntddude ти, мабуть, маєш рацію :( я почав відповідати на запитання, а потім вирішив трохи розійтися, і добре, що це у нас є. Але все-таки деякі ppl все ще вважають його корисним, тому я залишив його тут. Дякую за ваш зворотній зв'язок!
— op1ekun
15

Просто задекларуйте 

var trialImage;

зовні. Тоді

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

Сподіваюсь, це допомагає.

— харібб
джерело
12

Ні, ти не можеш. Просто оголосіть змінну за межами функції. Вам не потрібно оголошувати це одночасно, коли ви присвоюєте значення:

var trailimage;

function makeObj(address) {
  trailimage = [address, 50, 50];
— Гуффа
джерело
1
Вибачте! "Чи можна визначити глобальну змінну у функції JavaScript?" - "Ні, ти не можеш" не вірно, як показує перша відповідь!
— mustafa.0x
5
@ mustafa.0x: Ви помиляєтесь. Ви не можете визначити глобальну змінну всередині функції. Ви можете неявно створити глобальну змінну або створити властивість вікна всередині функції, але ви не можете визначити глобальну змінну всередині функції.
— Гуффа
1
Що стосується JavaScript у середовищі браузера, то глобальна змінна та властивість windowє синонімами. Так чи інакше, семантичне розрізнення, яке ви робите, є зрозумілим, тому я не заперечую проти запоруки. Редагувати: неможливо змінити свій голос, вибачте!
— mustafa.0x
2
якщо ви не використовуєте строгий (але чому ви не використовуєте строгий?), ви насправді можете оголосити та визначити глобальну варс усередині функції , протидіявши всім передовим практикам і просто не використовуючи var, що означає, що Гуффа мається на увазі під імпліцитним створенням (наприклад, @DhruvPathak вказував і там).
— Крего
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);
— ДрувПатак
джерело
3

Дуже просто визначити змінну сліду за межами функції та встановити її значення у функції 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 . Мені потрібно було те саме для свого коду, і це була справді гарна ідея.

— ShanerM13
джерело
Поки що це єдина відповідь, яка взагалі працює, але вона потребує перезавантаження сторінки та location.reload(false);оновлення сторінки кілька разів.
— Ійрін
1

Класичний приклад:

window.foo = 'bar';

Сучасний, безпечний приклад, керуючись кращою практикою з використанням IIFE :

;(function (root) {
    'use strict'

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

На сьогоднішній день також існує можливість використання API WebStorage 

localStorage.foo = 42;

або

sessionStorage.bar = 21;

Я також не впевнений, чи помітно повільніше він зберігає значення у змінних.

Широка підтримка браузера, як зазначено в Чи можна використовувати ...

— Ларс Гіруп Брінк Нільсен
джерело
localStorage і sessionStorage працює тільки для рядкових значень.
— HereToLearn_
Це правильно, @HereToLearn_, але тоді можна використовувати localStorage.foo = JSON.stringify({ arbitrary: 'object', meaning: 42, awesome: true });і var foo = JSON.decode(localStorage.foo);.
— Lars Gyrup Brink Nielsen
Що localStorageстосується глобальних змінних?
— Michał Perłakowski
1
ОП шукає рішення цієї проблеми: "Я хочу використовувати змінну сліду (оголошена у функції makeObj) в інших функціях." Хто каже, що рішення повинно включати глобальні змінні? Глобальні змінні рідко є хорошим рішенням будь-чого.
— Lars Gyrup Brink Nielsen
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>

Я не перевіряв цього, але якщо ваш код працював до цієї невеликої зміни, він повинен працювати.

— ShanerM13
джерело
-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-izjave-a-global-variable-in-JavaScript

— Шоханур Рахаман
джерело
Хоча це теоретично може відповісти на питання, бажано було б сюди включити істотні частини відповіді та надати посилання для довідки.
— Рохіт Гупта
-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
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.