无法访问已定义并显示在控制台中的属性

Question

我无法理解我的JavaScript问题。我有这个属性：

this.ref.tileWidth = this.width / 32;

然后在原型函数中我有：

console.log(this);
console.log(this.tileWidth);

现在看一下输出......

为什么第二个console.log显示undefined？在第一个tileWidth中明确定义。我不明白为什么我无法访问这个属性。

更多代码：

function Tileset(url) {    
    this.image = new Image();
    this.image.ref = this;
    this.image.onload = function(){
        if(!this.complete) throw new Error('Error when loading the tileset:' + url +   '');
        this.ref.tileWidth = this.width / 32;
    }
    this.image.src = 'tilesets/'+url;
}

Tileset.prototype.drawTile = function(number, context, xDestination, yDestination) {
    console.log(this);
    console.log(this.tileWidth);
}

Answer 1

onload回调上下文中的变量 this 是图像，而不是tileset函数的 this 。

一个基本的例子：

function newObject() {
    this.x = 42;
    this.img = new Image();
    this.img.src = "image.png";
    this.img.onload = function() {
        console.log(this.width); //Outputs the width of the image
        console.log(this.x); //undefined in this context
        //EDIT: x is actually a property of the Image object, but it would equal 0, not 42
    };
}

您可以创建一个临时变量来保存上下文，以便在onload回调中访问它。

function newObject() {
    this.x = 42;
    this.img = new Image();
    this.img.src = "image.png";
    var _this = this;
    this.img.onload = function() {
        console.log(this.width); //Outputs the width of the image
        console.log(_this.x); //Outputs 42
    };
}

Answer 2

这是一个onload问题，它似乎我尝试读取属性但onload代码是在我的console.log之后执行的（可能是异步问题）

如果我使用setTimeout工作