如何訪問函數外的var？

Question

我要創建2個函數，給我X，東西ÿ這樣我就可以比較的2臺x和y的。以下是其中一項功能。第二個會做同樣的事情。

我可以CONSOLE.LOG position.gx和position.gy裏面的功能，但我如何訪問它的功能外，所以我可以做一些像position.hx比較position.gx？

我知道它是範圍問題，但我無法弄清楚如何重新寫這個，所以我可以我可以比較position.gx從另一個函數的東西。

（與正在自學成才是我先掛了上最愚蠢的事情的問題。）

function guyLocation() { 

var myElement = document.querySelector("#guy"); 
var xPosition = 0; 
var yPosition = 0; 

    function getPosition(el) { 
     this.addEventListener("load", true); 

     while (el) { 
     if (el.tagName == "BODY") { 

      var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft; 
      var yScrollPos = el.scrollTop || document.documentElement.scrollTop; 

      xPosition += (el.offsetLeft - xScrollPos + el.clientLeft); 
      yPosition += (el.offsetTop - yScrollPos + el.clientTop); 
     } else { 
      xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
      yPosition += (el.offsetTop - el.scrollTop + el.clientTop); 
     } 

     el = el.offsetParent; 
     } 
     return { 
     gx: xPosition, 
     gy: yPosition 
     }; 
    }; 

    document.body.onkeydown = function() { 
     position = getPosition(myElement); 
     console.log(position.gx + ", " + position.gy); 
    }; 
}; 

Answer 1

您可以導出功能，並設置它的一些特性。 （這是一個有點古怪，但應該告訴你如何/它在做什麼）：

NOTE（查看此代碼的最後幾行，以使更改）

這種簡單的標記：

<div id="guy"> 
    Howdy 
</div> 

此代碼：

function guyLocation() { 
    var myElement = document.querySelector("#guy"); 

    var xPosition = 0; 
    var yPosition = 0; 

    function getPosition(el) { 
    // this.addEventListener("load", true); 

    while (el) { 
     if (el.tagName == "BODY") { 

     var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft; 
     var yScrollPos = el.scrollTop || document.documentElement.scrollTop; 

     xPosition += (el.offsetLeft - xScrollPos + el.clientLeft); 
     yPosition += (el.offsetTop - yScrollPos + el.clientTop); 
     } else { 
     xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
     yPosition += (el.offsetTop - el.scrollTop + el.clientTop); 
     } 

     el = el.offsetParent; 
    } 
    return { 
     gx: xPosition, 
     gy: yPosition 
    }; 
    }; 

    document.body.onkeydown = function() { 
    guyLocation.position = getPosition(myElement); 
    console.log(guyLocation.position.gx + ", " + guyLocation.position.gy); 
    }; 
    guyLocation.getPosition = getPosition;// allows outside calls 
}; 

guyLocation();// sets stuff up, exports function 
console.log(guyLocation.position);// undefined 
// sets value 
guyLocation.position = guyLocation.getPosition(document.querySelector("#guy")); 
console.log(guyLocation.position);// Object {gx: 8, gy: 8} 

Answer 2

我不認爲有一個問題在這裏，申報窗口範圍變量（外任何地方的任何代碼體）。作爲設計人員的解決方案，檢查類（原型）並創建一個跟蹤某個對象位置並更新它的引擎對象，將此引擎存儲在窗口範圍內，然後您可以從任何地方查詢它。你還必須創建一個更復雜的遊戲引擎實現的基礎，（只是猜測那是什麼回事），在那裏你可以創建一個定時器的更新循環，並具有存儲在您的引擎對象的精靈，將管理更新和查詢所有數據

Answer 3

我相信你真的想要做的是採取略有不同的方法來解決你的問題。

如果您創建module - 處理移動的代碼塊，您可以公開任何需要在別處使用的內部方法。

下面是一些鏈接，可以幫助

• http://weblogs.asp.net/dwahlin/techniques-strategies-and-patterns-for-structuring-javascript-code-revealing-module-pattern
• https://www.youtube.com/watch?v=HkFlM73G-hk

視頻是一個在一系列那種可以引導你一步一步怎麼去的揭示模塊模式。

這將將在第一種奇怪，但它是非常值得學習的，因爲它是兩者在JavaScript中很常用，也很強大。

Answer 4

移動的keydown監聽功能外呼......

function guyLocation() { 

    var myElement = document.querySelector("#guy"); 
    var xPosition = 0; 
    var yPosition = 0; 

    // return the parts you want to expose outside the function scope... 
    return { 
     getPosition: getPosition 
    }; 

    function getPosition(el) { 
     this.addEventListener("load", true); 

     while (el) { 
      if (el.tagName == "BODY") { 

       var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft; 
       var yScrollPos = el.scrollTop || document.documentElement.scrollTop; 

       xPosition += (el.offsetLeft - xScrollPos + el.clientLeft); 
       yPosition += (el.offsetTop - yScrollPos + el.clientTop); 
      } else { 
       xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
       yPosition += (el.offsetTop - el.scrollTop + el.clientTop); 
      } 

      el = el.offsetParent; 
     } 
     return { 
      gx: xPosition, 
      gy: yPosition 
     }; 
    } 

} 

function dollLocation() { 

    // return the parts you want to expose outside the function scope... 
    return { 
     getPosition: getPosition 
    }; 

    function getPosition(el) { 
     // more logic here... 
    } 

} 

// put this part outside the `guyLocation` function 
document.body.onkeydown = function() { 
    // access different functions, and compare in here... 
    guyPosition = getPosition(myElement); 
    dollPosition = getPosition(myElement); 
    console.log(guyPosition.gx + ", " + guyPosition.gy); 
    console.log(dollPosition.gx + ", " + dollPosition.gy); 
};