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

Question

此代码有效:

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

这会每秒打印出 position(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

在 setInterval 或 setTimeout(或任何事件处理程序，如 onclick)中，this 变量引用全局对象。在 window 的浏览器中。

在现代浏览器中你可以这样做:

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

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

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