Question

我想创建两个函数，它们给出了x，y的东西，所以我可以比较那两组x和y。以下是其中一项功能。第二个会做同样的事情。

我可以在函数内部安装console.log position.gx和position.gy，但是我如何在函数外部访问它，这样我可以做一些比较position.gx和position.hx的事情？

我知道这是一个范围问题，但我无法弄清楚如何重写这个，所以我可以将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

我相信你真正想做的是采取一种稍微不同的方法来解决你的问题。

如果你创建一个module - 一个处理移动的代码块，你可以暴露你需要在其他地方使用的任何内部方法。

以下是一些可能有用的链接

该视频是系列中的一个视频，它将逐步引导您如何进入显示模块模式。

一开始会有些奇怪，但它非常值得学习，因为它既非常常用于JavaScript，也非常强大。

Answer 2

您可以导出该功能并设置它的一些属性。（这有点时髦，但应该告诉你它是怎么做的）：

注意（请参阅此代码的最后几行以了解更改）

使用这个简单的标记：

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

我认为这里没有问题，在窗口范围内声明一个变量（任何代码体之外的任何地方都可以访问它）。作为设计器解决方案，检查类（原型）并创建跟踪某个对象位置并更新它的引擎对象，将此引擎存储在窗口范围内，然后您可以从任何地方查询它。您还将拥有创建更复杂的游戏引擎（只是猜测正在发生的事情）的基础，您可以在计时器上创建更新循环，并在您的引擎对象中存储精灵，这将管理更新和查询所有数据

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

如何在函数外部访问var？

4 个答案: