了解 JavaScript 中的命名空间

Question

虽然我对 Python 有一些编程经验，但我还是 JavaScript 的新手。我的问题是，我似乎不理解 JS 中命名空间的概念，因为它看起来与 Python 中的不同。这是我的代码：

    function snake(x, y) {
      // x and y coordinate of square (topleft)
      this.x = x;
      this.y = y;

      // reference to div object 'box2'
      this.boxid = "#box";
      this.box = document.getElementById(this.boxid);

      // attempts to move the box by args
      this.move = function (speedx, speedy) {
        var m = 50;
        // check if the box is within the container, moves if true
        if ((this.x+(speedx*m))<=150 && (this.y+(speedy*m))<=150 &&
        (this.y+(speedy*m))>=0 && (this.x+(speedx*m))>=0) {
          this.x = this.x + speedx*m;
          this.y = this.y + speedy*m;
        }
      }

      // called every frame to update position of the box
      this.update = function () {
        $(this.boxid).css({top: this.y, left: this.x});
      }
    }

    var snakeObj = new snake(100, 100);
    var t = setInterval(s.update, 100);

当按下四个箭头键之一时，将使用正确的参数执行 move() 函数。

现在上面显示的代码方式，JS 告诉我 update() 函数中的 x 和 y 值是 "undefined"。但是，一旦我将它们从 this.x 和 this.y 更改为 snakeObj.x 和 snakeObj.y，以及将 this.boxid 更改为“#box”，一切都完美无缺。我想了解为什么 update() 函数不能 "access" 对象的值，而 move() 函数却完全可以。

澄清一下，工作代码如下所示：

    function snake(x, y) {
      // x and y coordinate of square (topleft)
      this.x = x;
      this.y = y;

      // reference to div object 'box2'
      this.boxid = "#box";
      this.box = document.getElementById(this.boxid);

      // attempts to move the box by args
      this.move = function (speedx, speedy) {
        var m = 50;
        // check if the box is within the container, moves if true
        if ((this.x+(speedx*m))<=150 && (this.y+(speedy*m))<=150 &&
        (this.y+(speedy*m))>=0 && (this.x+(speedx*m))>=0) {
          this.x = this.x + speedx*m;
          this.y = this.y + speedy*m;
        }
      }

      // called every frame to update position of the box
      this.update = function () {
        $("#box).css({top: snakeObj.y, left: snakeObj.x});
      }
    }

    var snakeObj = new snake(100, 100);
    var t = setInterval(s.update, 100);

Answer 1

那是因为你有另一个this值；一个用于内部函数。

在JavaScript中，每个函数都有自己的this值。函数在调用时绑定，这意味着如果您不通过属性访问调用它们，它们将在没有正确 this 值的情况下被调用。一个常见的解决方法是在对象的构造函数中设置 var that = this;，这样您就可以通过构造函数中定义的函数的闭包来使用原始值。

如果您不介意放弃对 IE11 的支持，另一种解决方法是使用 ES6 箭头函数，如下所示：

function snake(x, y) {
  // x and y coordinate of square (topleft)
  this.x = x;
  this.y = y;

  // reference to div object 'box2'
  this.boxid = "#box";
  this.box = document.getElementById(this.boxid);

  // attempts to move the box by args
  this.move = (speedx, speedy) => (function (speedx, speedy) {
    var m = 50;
    // check if the box is within the container, moves if true
    if ((this.x+(speedx*m))<=150 && (this.y+(speedy*m))<=150 &&
    (this.y+(speedy*m))>=0 && (this.x+(speedx*m))>=0) {
      this.x = this.x + speedx*m;
      this.y = this.y + speedy*m;
    }
  }).call(this, speedx, speedy);

  // called every frame to update position of the box
  this.update = () => $("#box").css({top: this.y, left: this.x});
}

var snakeObj = new snake(100, 100);
var t = setInterval(s.update, 100);

了解 JavaScript 中的命名空间

Understanding of namespace in JavaScript

javascript

namespaces

javascript-namespaces