javascript - 如何访问函数外部的 var？

Question

我想创建 2 个函数来给出某物的 x,y，这样我就可以比较这 2 组 x 和 y。下面是其中一项功能。第二个也会做同样的事情。

我可以在函数内部console.logposition.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

您可以导出函数并设置它的一些属性。 (这有点时髦，但应该向您展示它是如何/做什么的):

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

使用这个简单的标记:

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