development

JavaScript 함수에서 전역 변수 정의

big-blog 2020. 2. 14. 23:46
반응형

JavaScript 함수에서 전역 변수 정의


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>

예, 다른 사람들이 말했듯이 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>

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

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

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

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


그냥 선언

var trialImage;

외부. 그때

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

도움이 되었기를 바랍니다.


함수 외부에서 선언하고 함수 내부에 값을 할당하십시오. 다음과 같은 것 :

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

아냐, 못해 함수 외부에서 변수를 선언하십시오. 값을 지정할 때 동시에 선언하지 않아도됩니다.

var trailimage;

function makeObj(address) {
  trailimage = [address, 50, 50];

함수 외부의 trailimage 변수를 정의하고 makeObj 함수에서 값을 설정하는 것은 매우 간단합니다. 이제 어디서나 그 가치에 접근 할 수 있습니다.

var offsetfrommouse = [10, -20];
var displayduration = 0;
var obj_selected = 0;
var trailimage;
function makeObj(address) {
      trailimage = [address, 50, 50];
      ....
}

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


고전적인 예 :

window.foo = 'bar';

IIFE 를 사용하여 모범 사례를 따르는 현대적이고 안전한 예 :

;(function (root) {
    'use strict'

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

요즘에는 WebStorage API 를 사용하는 옵션도 있습니다

localStorage.foo = 42;

또는

sessionStorage.bar = 21;

성능 측면에서 변수에 값을 저장하는 것보다 눈에 띄게 느린 지 확실하지 않습니다.

사용할 수있는 광범위한 브라우저 지원 ...


따라서 함수 내부의 변수를 함수 외부에서 사용할 수 있습니까? 함수 내부의 변수 결과를 반환하지 않는 이유는 무엇입니까? 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>

나는 이것을 테스트하지는 않았지만 작은 변경 전에 코드가 작동하면 작동해야합니다.


여기에 도움이 될만한 샘플 코드가 있습니다.

  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 

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


다음은 전역 변수를 사용하지 않고도 다른 함수에서 변수를 사용할 수있는 쉬운 방법입니다.

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

makeObj();
someOtherFunction();


시작 기능을 만드는 경우 다음과 같은 방식으로 전역 기능 및 변수를 정의 할 수 있습니다.

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

이 인수를 사용하여 함수가 전체적으로 호출되므로 여기에서 전체 범위입니다. 그래서 뭔가는 세계적인 것이어야합니다.

참고 URL : https://stackoverflow.com/questions/5786851/define-global-variable-in-a-javascript-function



반응형