javascript - 全局 JavaScript 变量在对象构造函数的内部变得未定义

Question

我正在尝试重构一些代码，但遇到一个问题:全局变量在对象构造函数的一部分中正确定义，但在同一函数的另一部分中未定义。

我定义了一些全局变量如下:

$( document ).ready(function() {
  var imgWidth;
  var imgHeight;

然后我写了一个对象构造函数。最终目标是为图像创建一个对象，其中包含:实际图像对象、宽度(定义为实际图像宽度/2)、高度(定义为实际图像高度/2)、x 位置(手动指定)和 y 位置(手动指定)。

function Character(name, x, y){
    //define the image object within the Character
    this.imageObject = new Image();
    //using base-64 encoded data in place of an image url, just for the demo
    this.imageObject.src = name+'iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAW0lEQVR42mL8//8/AzpgZGTcC6KBcs5wMRwK/0MVMsLEmLAoEmXAApiwiKUhaRJCltgLsQVsWwIQ/wTx0fBeRigD7B6Y24i1mj4Kn4KI7Uie2Y7FI8+B2AMgwABjRynfWgpcxQAAAABJRU5ErkJggg==';

    console.log(this.imageObject);
    console.log(this.imageObject.src);

    //set natural width and natural height once the image is loaded
    if (this.imageObject.addEventListener){
        this.imageObject.addEventListener('load', function(){
            console.log('this.naturalWidth for '+this.src+' = '+this.naturalWidth);
            window.imgWidth = this.naturalWidth/2;
            window.imgHeight = this.naturalHeight/2;
            console.log('imgWidth inside imageObject event listener for '+this.src+' = '+window.imgWidth);
        });
    } else if (this.imageObject.attachEvent){
        this.imageObject.attachEvent('onload', function(){
            console.log('this.naturalWidth for '+this.src+' = '+this.naturalWidth);
            window.imgWidth = this.naturalWidth/2;
            window.imgHeight = this.naturalHeight/2;
            console.log('imgWidth inside imageObject event listener for '+this.src+' = '+window.imgWidth);
        });
    }
    //set natural width and natural height to object
    this['w'] = this['w0'] = window.imgWidth;
    this['h'] = this['h0'] = window.imgHeight;

    //set initial x and y position
    this['x'] = x;
    this['y'] = y;

    console.log('imgWidth inside character constructor = '+window.imgWidth);

}

我像这样调用函数，立即在文档中准备好:

var sun0 = new Character('data:text/javascript;base64,', 1, 0);

在 Chrome 中检查控制台时，console.log 行输出如下:

console.log(this.imageObject); //the image object as expected
console.log(this.imageObject.src); //the image url as expected
console.log('this.naturalWidth for '+this.src+' = '+this.naturalWidth); //10 as expected
console.log('imgWidth inside imageObject event listener for '+this.src+' = '+window.imgWidth); //5 as expected
console.log('imgWidth inside character constructor = '+window.imgWidth); //undefined

为什么这里 window.imgWidth 未定义？有没有更好的方法来创建这个对象，使其具有 w 属性，即图像自然宽度的 1/2？

JS Fiddle - open the console to see the messages

Answer 1

它变成“未定义”的原因是因为您在事件处理函数中设置了 imgWidth 变量，该函数仅在将来的某个时刻执行。事件处理程序函数异步发生 - 也就是说，在未来的某个时刻，程序在事件处理程序声明后的代码上继续执行。

声明事件处理函数后，代码将继续运行并在调用 onload 事件处理函数之前执行这些行:

//set natural width and natural height to object
this['w'] = this['w0'] = window.imgWidth;
this['h'] = this['h0'] = window.imgHeight;

//set initial x and y position
this['x'] = x;
this['y'] = y;

此时，onload 事件处理程序尚未被调用(触发)，因此运行时环境将正确地提示 window.imgWidth 未定义。

如果您希望运行此代码，最简单的方法是将以上内容添加到事件处理程序例程中，如下所示:

this.imageObject.attachEvent('onload', function(){
    console.log('this.naturalWidth for '+this.src+' = '+this.naturalWidth);
    window.imgWidth = this.naturalWidth/2;
    window.imgHeight = this.naturalHeight/2;
    console.log('imgWidth inside imageObject event listener for '+this.src+' = '+window.imgWidth);

    //set natural width and natural height to object
    this['w'] = this['w0'] = window.imgWidth;
    this['h'] = this['h0'] = window.imgHeight;

    //set initial x and y position
    this['x'] = x;
    this['y'] = y;
    console.log('imgWidth inside character constructor = '+window.imgWidth);
});