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>

— 햄즈
소스

19

글로벌을 선언하기 위해 단순히 "var"키워드를 사용하지 마십시오

— Ibu

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(단지가 많은 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.

— Domi

4

@CasparKleijne, 이해가되지 않습니다. 문자 그대로 창 객체가 실제로 존재한다는 증거가 없을 때 왜 창에 할당합니까? 앞으로 코드가 어떻게 사용 될지에 대해서는 아무것도 모릅니다. 노드 대신 MongoDB 환경이나 rino에서도 사용될 수 있습니다. 예를 들어 웹 워커를 사용하는 경우 브라우저에서도 창 개체가 표시되지 않습니다. 재사용 성이 완전히 없어집니다.

— Gherman

4

window.yourGlobalVariable = ...;스택 사이트에서 5-6 개의 질문을 읽은 후 매력처럼 작동합니다.

— Ahmed Syed 2016

6

@JacquesKoekemoer : 거기에서 무엇을 사용해야 할 이유가 없습니다 eval. 대신 :window[dynamic_variable_name] = dynamic_variable_value;

— TJ Crowder

19

업데이트 1 : 주석을 읽으면이 특정 명명 규칙에 대한 좋은 토론이 있습니다.

UPDATE2 : 내 답변이 게시 된 이후 명명 규칙이 더 공식적인 것으로 보입니다. 가르치고 책을 쓰는 사람들은 var선언과 function선언 에 대해 말합니다 .

업데이트 3 : 여기 내 요점을 지원하는 추가 위키 백과 게시물이 있습니다 : http://en.wikipedia.org/wiki/Declaration_(computer_programming)#Declarations_and_Definitions

... 주된 질문에 대답합니다. 함수 앞에 DECLARE 변수. 이것은 효과가 있으며 범위 상단에서 변수를 선언하는 모범 사례를 준수합니다. :)

— op1ekun
소스

7

다른 곳에서 변수를 정의하려면 호이 스팅이 무엇인지 이해해야합니다. 여기에 적당히 좋은 기사가 있습니다 . goodgood.com/2010/2/JavaScript-Scoping-and-Hoisting . 행운을 빕니다!

— op1ekun

1

이것은 C의 의미 definition와 declaration의미 가 아닙니다 . 첫 번째 줄은 선언 또는 정의 일 수 있습니다 (어디에 있는지에 따라 다름). 두 번째는 단지 과제입니다. 선언은 단지 식별자의 해석을 지정합니다 (즉 myVar, int). 선언이 스토리지 를 예약 하는 경우에는 definition입니다. 이것은 입력과 관련이 없습니다. 컴파일 단위가 다른 컴파일 단위에 대한 참조를 이해하는 방법의 일부입니다.

— EML

4

심지어 JS에서, var myVar라고 선언 (가 입력 할 필요가 없습니다) 및 할당 . 화합물 ( )에 대한 "정의"라는 용어를 들었습니다 . myVar = 10var myVar = 10;

— Bergi

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거스 르고 Guffa를 암시 적으로 사용하지 않고 함수 내에서 전역 변수를 선언 하고 정의 할 수 있습니다. (예 : @DhruvPathak도 지적했습니다).

— cregox

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 . 내 코드에 대해 똑같은 것이 필요했으며 이것은 정말 좋은 생각이었습니다.

— ShanerM13
소스

지금까지 이것은 전혀 작동하지 않는 유일한 대답이지만 페이지를 다시로드 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 });및 var foo = JSON.decode(localStorage.foo);.

— Lars Gyrup Brink Nielsen

localStorage전역 변수와 어떤 관련 이 있습니까?

— Michał Perłakowski 2019 년

1

OP는이 문제에 대한 해결책을 찾고 있습니다. "다른 함수에서 추적 이미지 변수 (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

여기서 나는 자바 스크립트에서 전역 변수에서 어떻게 선언 할 수 있는지에 대한 좋은 대답을 찾았습니다.

— 쇼하 누르 라하 만
소스

이 이론적으로 질문에 대답 할 수 있습니다 동안, 바람직 할 것이다 여기에 대한 대답의 본질적인 부분을 포함하고 참조 할 수 있도록 링크를 제공합니다.

— Rohit Gupta 5

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