了解JavaScript中的名称空间[重复]

Question

这个问题已经在这里有了答案：

• 如何在回调中访问正确的“ this”？ 10个答案
• “ this”关键字如何工作？ 22个答案

尽管我对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值是“未定义的”。 但是，一旦我将它们从this.x和this.y更改为snakeObj.x和snakeObj.y，以及将this.boxid更改为“ #box”，一切都将正常运行。 我想了解为什么update（）函数无法“访问”对象的值，而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;设置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);