javascript - 使用对象获取位置 (x, y) - Javascript

Question

此代码有效：

var myElement = document.getElementById("red"); 
    setInterval(function() {
        console.log("Left:" + myElement.offsetLeft + "px | Top:" + myElement.offsetTop + "px");
    }, 1000);

这每秒打印出位置（x，y）

但是，如果我尝试将其更改为使用对象：

function Enemy(id){
    this.id = getElementById(id);
    this.getCoordinates = function(){
        setInterval(function() {
            console.log("Left:" + this.id.offsetLeft + "px | Top:" + this.id.offsetTop + "px");
        }, 1000);
    }
}

$(document).ready(function(){
    var enemy = new Enemy("red");
    enemy.getCoordinates();

});

它什么也没打印出来——我看不出我的错误在哪里。

Answer 1

在setIntervalor setTimeout（或任何事件处理程序，如 onclick）中，this变量指的是全局对象。在浏览器中是window.

在现代浏览器中，您可以这样做：

setInterval((function() {
        console.log("Left:" + that.id.offsetLeft + "px");
    }).bind(this), 1000); // <------- bind

否则所有其他解决方案基本上与您的第一段代码相似。

请注意，bind()Mozilla 有一个纯 js 实现，可以移植到旧版浏览器。在 MDN 上搜索它。

Answer 2

问题是“this”的值在 setInterval 内发生变化。解决方法是将其更改为：

function Enemy(id){
  this.id = document.getElementById(id);

  var self = this;
  this.getCoordinates = function(){
    setInterval(function() {
        console.log("Left:" + self.id.offsetLeft + "px | Top:" + self.id.offsetTop + "px");
    }, 1000);
  }
}

Answer 3

function Enemy(id){
    this.id = document.getElementById(id);
    this.getCoordinates = function(){
        var element = this.id;
        setInterval(function() {
            console.log("Left:" + element.offsetLeft + "px | Top:" + element.offsetTop + "px");
        }, 1000);
    }
}

$(document).ready(function(){
    var enemy = new Enemy("red");
    enemy.getCoordinates();

});

Answer 4

正如 slebetman 所说，“this”变量不是您所期望的。尝试将其保存在一个“那个”变量中，该变量可以在不同的范围内访问。

function Enemy(id){
    var that = this; // reference to 'this' that can be used in other scopes
    that.id = document.getElementById(id);
    that.getCoordinates = function(){
        setInterval(function() {
            console.log("Left:" + that.id.offsetLeft + "px | Top:" + that.id.offsetTop + "px");
        }, 1000);
    }
    return that;
}